I'm trying to get this animation to work in my website. For some reason the layered paths show through so a thin white outline for the path (that's animated in) is visible ruining the animation, despite the fact the paths are identical in size. I wondered if anyone has any suggestions on how to prevent this?
I've made a jsFiddle and added the code below. If you change the background for the body to black it's even clearer.
Any help would be appreciate.
body {
background: #333;
padding: 2em;
}
svg {
display: block;
left: 50%;
max-width: 8em;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
#rect {
animation: slideOver 5s linear infinite;
}
@keyframes slideOver {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}v<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 346">
<defs>
<clipPath id="clip-path">
<rect id="rect" x="0" y="0" height="346" width="250"/>
</clipPath>
</defs>
<path fill="#fff" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>
<path clip-path="url(#clip-path)" fill="#000" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>
</svg>