I've created an icon made out of basic lines/shapes in Adobe Illustrator, then make it one solid, continuous shape.
I want to use this icon as a pre-loader on a website, the idea being each 'segment' slides/fades in one-by-one. So to do this I've sliced the solid shape up so I can animate each section individually. I've done this but there are thin white lines between some of the shapes (image attached). I've checked the joins and I don't think I could get the shapes any closer together! The coordinates/points seem to be exactly the same as well.
You can see what's happening in the image below:
Is there away to get around this? It's really going to impact the quality/sharpness of the icon. I'm guessing I should be able to fix this somehow as I've seen plenty of more complex shapes which don't have any visible 'joins'.
Here's the source for the SVG's I'm working with:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 249 351.5" enable-background="new 0 0 249 351.5" xml:space="preserve"> <path d="M0,0l39,39.9v84.8l85,84.9v57L0,141.8V0z"/> <path d="M124,124.8v57L39,96.9v-57L124,124.8z"/> <path d="M124,124.8L249,0v57L124,181.8V124.8z"/> <path d="M209,96.9L249,57v169.7L124,351.5v-57l85-84.9V96.9z"/> <path d="M124,351.5L0,226.7v-57l124,124.8V351.5z"/> </svg>
Also the codepen where you can see the icon in a webpage:
And how it animates (so you can see why I've broke the shape up):
Thanks again, hope someone can help!