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.

By Manoela Ilic in Playground on
Demo Download

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.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

How to Implement and Style the Dialog Element

Grid Zoom Layout

Building a Scrollable and Draggable Timeline with GSAP

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 80

Comments are closed.

  4. Woow! This is so cool. I’m going to dissect the demo-code. I’m a major fan of SVG! I can draw my own illustrations in Adobe Illustrator, save them as SVGs ,then copy and paste applicable code and add them as inline-svg. Only down side is your HTML is starting to get big and less readable.

    Mary Lou did you give Snap.svg a try?

  6. How did you code? lol

    I see such as these codes in html file:

    <path d="m 579.44258,124.24714 c 0,0 26.94592,-21.17898 59.75842,0 l 123.29566,73.28106 c 0,0 33.20953,17.10157 …

    Is there any editor for this?

    • SVG is actually based on XML. I like Sublime Text and Webstorm. One of the best and free drawing-tools is Inkscape for altering SVGs. eg you can reverse paths with Inkscape (drawing direction when doing animation). This is not possible with Adobe Illustrator.

  8. I was also fiddling with SVGs retrieved from an XML-file with Ajax but it’s slow is hell Have to load and insert 53 SVGs. And doing the same dashoffset-animation. Yep I’m no JS-scriptkid SVG/JS/SMIL/CSS3-test

  10. Amazing as always !! Is there any generator who can generat svg Html Code of an uploaded image ? or it has to be done manually ?? thanks

    • Depends if the image is an illustration then you could (re-)trace it with Illustrator, Inkscape. When you have a bitmap picture it is not usable as a SVG. That’s way to complicated. You’ll end up with a SVG of zillion lines of paths and other shapes. You can test that by tracing the pic with Illustrator and then save as SVG.

  13. Awesome! Really love SVG. Need to start a project on this soon, love the idea of the loading transition, looks great.
    Best.
    Chris.

  14. This is an interesting wayu to use SVG. I used SVG paths mixed with the scrolling parallax plugin Skollr to create a cool line chart that looked animated on scroll. You can check it out Here . Just scroll down to view. the bar chart just uses CSS animations. Great tutorial. Always great stuff here!

  19. Inspiring.. it would be a nice idea to include a tutorial on how to design SVGs as well .

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

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

  24. Hi, Nice..just rocked. Wondering, what all you cant do for the web? Thank for sharing..

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

  28. Looks Great! Much like Polygons “Xbox One Review” and “PS4 Review” 🙂

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

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

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

  38. 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?

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

  41. 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 !

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

  45. 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 !

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

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

    Thanks

  49. 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?

  50. Hi

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

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