This isn’t as clever as seeing how long each path is before defining how long its stroke segment will need to be.
There are, however, simpler ways to style paths. Use CSS!
http://jsfiddle.net/rgbk/2b9M9/
In this version, I made a stroke array that was one part filled to beyond the length of any line (150%) and another unfilled segment also beyond any length (120%) then used offset to shift the filled part onto the whole.
http://jsfiddle.net/rgbk/4ujLL/
In this version, the stroke array is 100% blank and a 0% stroked path that animates to a 0% blank and 100% stroked path.
http://jsfiddle.net/rgbk/4ujLL/2/
Finally, in this variation, the blank space starts as a lot of smaller segments which are diminishing to zero while the stroked path is trying to reach 100% giving a “shimmer” effect.
Whether you use AnimationFrame, CSS Animation, or just as easily CSS Transitions, or the ancient and strange relic SMIL, I hope everyone hops on the SVG bandwagon soon. I’ve had a lot of fun with it this year already. It’s nice to know someone else is cranking on it. Thanks Brian
Wray Bowling
This isn’t as clever as seeing how long each path is before defining how long its stroke segment will need to be.
There are, however, simpler ways to style paths. Use CSS!
http://jsfiddle.net/rgbk/2b9M9/
In this version, I made a stroke array that was one part filled to beyond the length of any line (150%) and another unfilled segment also beyond any length (120%) then used offset to shift the filled part onto the whole.
http://jsfiddle.net/rgbk/4ujLL/
In this version, the stroke array is 100% blank and a 0% stroked path that animates to a 0% blank and 100% stroked path.
http://jsfiddle.net/rgbk/4ujLL/2/
Finally, in this variation, the blank space starts as a lot of smaller segments which are diminishing to zero while the stroked path is trying to reach 100% giving a “shimmer” effect.
Whether you use AnimationFrame, CSS Animation, or just as easily CSS Transitions, or the ancient and strange relic SMIL, I hope everyone hops on the SVG bandwagon soon. I’ve had a lot of fun with it this year already. It’s nice to know someone else is cranking on it. Thanks Brian