SVG Drawing Animation

A little experiment that explores the usage of SVG line drawing animations to precede the appearance of graphics or website elements, simulating the loading of them.

SVGDrawingAnimation

View demo Download source

SVG is finally becoming a more utilized and fun website component. It’s really powerful and there are many creative possibilities for fun effects on a website using SVG. Today we’d like to share two experimental concepts with you that make use of stroke animations, made popular by the animations on the PlayStation 4 and Xbox One review sites. This technique was introduced and explained by Jake Archibald in his article Animated line drawing in SVG and also explored by Brian Suda in his article Animating Vectors with SVG for 24Ways. For our experiments we are using his code to animate the strokes of the paths.

So, what concepts did we explore? The first one is a line drawing animation that fades into a “real” image or illustration once the respective figure is in the viewport. This can be a fun effect for any kind of illustration on a website. The second concept explores using SVG line drawing animations for simulating the loading of a website: website parts are represented by flat drawings with a stroke that gets animated and once finished, the “real” elements are shown. The technique itself is implemented in a static way where we use an SVG for every bunch of elements that fade in. The idea for the schematic representation of the website come from this awesome Dribbble shot by Chris Bannister.

The beautiful illustrations of the devices are by Pixeden and you can find the PSD files here:

The traced SVG line drawings of these illustrations were carefully crafted by talented Emanuel Serbanoiu. Check out his Dribbble profile or visit his website.

The first demo is the line drawing animation with the illustration fade-in:
SVGDrawingAnimation_01

The second demo is the line drawing animation with the website fade in:
SVGDrawingAnimation_02

And the third demo is similar to demo 2, just that the animation and the fading in of the elements happens sequentially but with a random timing:
SVGDrawingAnimation_03

We hope you like the effects and find them inspiring!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 50

  1. 2

    I’m dissecting the JS-code. How can you alter the draw-method so the paths will be drawn after each other, not in parallel? When one is done the next will start. Stuff like “svgs = Array.prototype.slice.call( ” = syntax error for me ;-P

  2. 3

    For some kind of reason my previous post is gone. I was asking how you can alter the draw-method (I believe it is) to have the dashoffset-animation done after each other? So animation not in parallel like it is now.

  3. 9

    Okay guys I fiddle with the code and made it that’s it’s drawing paths in parallel. It’s probably not the best JS you will see but it works. Maybe someone could improve it. Here is the fiddle at jsfiddle

  4. 12

    Looks Great! Much like Polygons “Xbox One Review” and “PS4 Review” :)

    If you dont want it to animate parallel, you can try this out!

  5. 17

    Awesome demo. have managed to get it working on my own project but it fails in IE (no shock there) is their a known fix for this
    Thanks

  6. 18

    Thanks a lot Mary Lou ! Lovely effect !!!
    I’d like to know it’s possible to add mouseenter and mouseleave functions when hovering thumbs (demo 2 and 3) in order to replay animation ?
    Like this wonderful portfolio site : http://carlphilippebrenner.com
    Thanks

  7. 22

    In Firefox (v.27 – win) it draws the paths two times – it’s not hidden initially like it is in the other browsers. any solution for that?

    • 23

      Same issue here. Works fine on Firefox 27 on mac, but draws the path twice on win.

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>