A popular little SVG animation technique is path drawing. If you can't picture it, here's a collection of a zillion examples I've created. Essentially the stroke around SVG shapes draws itself over time.

I first heard of it from Jake Archibald's article Animated line drawing in SVG, which is about a good of an explanation of it as there can be. But of course, I attempted my own explanation as well and we go over that in this video.

I think it's easiest to think about starting with CSS, and how the dash properties work as applied to an SVG shape. How they can get longer, and even long enough to the point of covering (or not covering) the entire shape. Then offsetting them when they are that long is how the drawing works.

Then once you understand that, understand that JavaScript can help calculate the length of the needed dashes and offsets and do it just right.

Deploy a static site in one minute
Build and deploy a CMS-enabled site with Gatsby in just a few clicks. It's free.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.