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:
Also the codepen where you can see the icon in a webpage:
http://codepen.io/moy/pen/yyvVZm
And how it animates (so you can see why I've broke the shape up):
http://codepen.io/anon/pen/xbYmRJ
Thanks again, hope someone can help!
No comments:
Post a Comment