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:
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!
Object > Path > Average
and tickVertical
and hitOK
is it better? @joojaa is correct that it's an on-screen rendering issue. Usually prints won't show the hairline and saving as raster withArt Optimized
anti-alias settings usually removes it as well. But if it's showing in SVG, you may need to rethink the joins.Object > Path > Average > Vertical
but it didn't seem to make any difference. I don't think I can save an SVG withArt Optimised
? I've looked the joins @Scott and they seem ok. The 5 diagonal lines are all the same shape just duplicated and repositioned - so they should be consistent. Zooming in I can see all the flat joins are 100% flat, no bumps or anything. Any other ideas on rethinking the joins? Thanks again - Steve