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.
