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.

From our sponsor: Reach inboxes when it matters most. Instantly deliver transactional emails to your customers.

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:

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

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:

We hope you like the effects and find them inspiring!

Tagged with:

Mary Lou

ML 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.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 80

Comments are closed.
  1. Guys, can anybody tell me, how to do this for custom image or mockup? Cant get it.

    • First you have to create your image on a vector drawing software like Illustrator and save it as an SVG file.
      Then you open the SVG file in your code editor and you copy all the path you’ll find inside the tag into the same section in the html !

      I don’t know if I’m clear enough !

  2. hello, is there a way to make the “draw()” function fire on scroll? 🙂

  3. Hey, it works perfectly fine for me even tough I have a hard time making my svg correspond to the image behind but that’s not my concern.

    The little thing I would like to do with this is being able to relaunch the animation without having to reload the whole page, just with a simple click on a specific button.

    Anyway, great stuff thanks for sharing !

  4. Nice… leaves me with one question. How to get this drawing one line after each other instead of all lines at once !?

  5. Hi.. This is great work. Can could let me know how can i change the effect of the image to appear on hover?


  6. Do not know anything about how this works, since I was over 40 minutes trying to understand the code, and see the comments and the information posted above and do not understand how it works.

    Someone can explain me or teach?

  7. Hi

    I followed this tutorial and it worked perfectly, but for my final website im looking for an effect similar to (what we do section)

    How do you redraw the svg when scrolling up again? Thanks,

  8. Great,!! really helpful, i made similar effect above referring above files. THANKS A TON MARY LOU

  9. Is there a way to make the animation work when loading the SVG externally? I’m loading the SVG externally like so: it shows the icon however the animation fails. I hope someone could help on this on.
    Many thanks!

  10. In Demo 2, how do you get the svg outline path to be directly in place of the paragraph text? How is it laid out?

  11. Amazing as always 😀 I wrote an angular directive wrapper that animates the SVG by adding ‘svg-draw’ data attribute to the svg element. You can find it here

  12. hello,
    awesome work!
    I have a question: the reveal animation works with image ( in jquery ). how can i do with other elements like div to make them appear ? ( show / hide )


  13. Mary Lou, i have a problem with this tutorial… i was change path coordinate with this..

    example :

    and the result : “the picture upside down”……
    please help me…. Mar Lou….

    Big Thanks…..

  14. I am trying to work my head around the first demo. I dont get how the svg path gets animated. Can anyone give me a bit of hint? Many thanks,