Skip to content

24 ways to impress your friends

Animating Vectors with SVG

Brian Suda Brian Suda

10 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

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

Steven Langbroek

I love this technique, but you basically forked this code straight over from Vox Media’s product-blog: http://product.voxmedia.com/post/68085482982/polygon-feature-design-svg-animations-for-fun-and.

Chad Clark

Josh Riser, you can most definitely use .svg files as background images in CSS. If you use Modernizr, it is also very easy to write a Sass mixin to serve fallback images (.png, etc.) to less capable browsers.

Here’s a Gist of the mixin I use: https://gist.github.com/chadclark/5498661

Tiago

I’m trying to get this work with an external SVG file. So I used
“<use xlink:href=“images/sprites.svg#icon-undo”></use>” to call the external SVG and it actually shows the icon however the animation fails :( Is there a way to get this work?
Thank you!

Justin Avery

I love this new technique.

For those of you that prefer a drag and drop approach (not neccessarily the best approach, but certainly the quickest) then you should check out Lazy Line Painter – http://lazylinepainter.info

I put together this codepen using that particular tool – http://codepen.io/justincavery/full/qHfrl

Raymond Uphoff aka myradon

@Josh you can say ‘background-image: url(“/path/to/image.svg”)’ You can even make some kind of SVG-spriting using target pseudo-class. Check this how-to: http://dev.webonomic.nl/unleash-the-power-of-svg-sprites

I’ve fiddled with SVG dash-offset-animation too. I stopped because the project took to long, I couldn’t find time anymore. Personally I’m very pleased with the results check it at http://debian.myradon.net. There were problems with going into an other MQ and some paths stopped animating. Also inserting 54 SVGs from an XML-file with Ajax is a bit slow.

Colm

Really like this technique!

To work the svg needs to be made up of path elements, have you got any tips/links explaining how to draw svg images that consist of path elements? When I use illustrator it always seems to want to make everything a polygon element…

Thanks

Josh Riser

This is awesome. I would definitely jump on the bandwagon and start using SVGs, but for the most part I try to use CSS background-image to put an image anywhere, so as to not have img tags all over the site, loading various images and bogging down load times.

Is there a way to use SVGs in this manor?

Impress us

Be friendly / use Textile