SVG Line Animation for Beginners
I love SVG line animation because I think that it looks amazing as an effect, but is also simple enough to grasp that I was able to use it in one of my very first SVG animations.
Don’t know what an SVG is? That’s perfectly fine! I had to Google “what is an SVG” before making the pen above! I’m not going to go into it here, but Google has lots of great resources explaining SVGs and how to make them!
Prepare your SVG
In order to achieve this effect, we need to start with an inline SVG (this means that the SVG data is inserted into your HTML, rather than just linking the .svg in an image tag). The SVG we want to animate must have a path (if you are animating a basic SVG shape it will need to be converted to a path). Here is an example of path data for a simple SVG star:
<path class="star" d="M246.573,89.84l42.511,126.463l137.566,0l-111.293,78.158l42.51,126.462l-111.294,-78.158l-111.293,78.158l42.51,-126.462l-111.293,-78.158l137.566,0l42.51,-126.463Z"/>
Note that it has an element called “path” followed by the letter “d” and a whole bunch of numbers. I have added the class “star” to the path to make SVG easier to work with.
The SVG path must also have a stroke property. This is pretty much the SVG equivalent of an outline. We can use CSS to adjust the width and color of the stroke.
Animate with keyframes and stroke-dasharray
Now we want to animate the stroke. Here we can use a nifty trick with the stroke-dasharray and stroke-dashoffset properties to make this work.
Stroke-dasharray makes our SVG stroke dashed by whatever value we give it, while stroke-dashoffset offsets the dash by whatever value we give it. In the example below I have set the stroke-dasharray and stroke-dashoffset to 50.
To make it look like it is moving, I have set up an animation in which at 100% the stroke-dashoffset property moves back to 0. This looks a little choppy because it resets back to 50 when the animation loops, but you can see that the animation has a clear start and end point based on the stroke-dashoffset property.
Ok, so now we have moving dashes, how do we get to an animated line? Well, we can set the stroke-dasharray property to be equal to the length of our SVG. Then if we apply the same value to the stroke-dashoffset property, the line will visually disappear since it will be offset past the beginning of the SVG. Then when we use our animation to move the property back to 0, it looks like our shape is drawing itself in.
If you don’t want your animation to repeat (which you probably don’t), you will need to apply
so that your animation stays at the final stroke-dashoffset value rather than resetting. You can play with it in the above CodePen by removing the infinite property and un-commenting the animation-fill-mode.
So how do we get the length of the path?
let path = document.querySelector(".star");
let length = path.getTotalLength();
Lets break down what is happening here. We are creating two variables: path and length. For the path variable, we are assigning it a value using the document.querySelector() method to obtain the selector with the class of “star”. We are then taking the path variable and using the .getTotalLength() method to assign the length of the element to the length variable.
If this is sort of making your head swim a bit, you can simply add
to your code, open up your console and manually transfer the length of the path to your code.
If you want the process to be more automated, you can write
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
What about multiple elements?
We often want to animate more than one path at a time if we are using this for line drawings. This can be achieved using the same method giving each path its own class, and getting the length for each path class.
Generally you don’t want every path to start animating at the same time, so you can apply various animation-delay to paths to get a staggered effect. Again, you can do this manually with some experimentation, or you can start looking into things like animation libraries to help you out.
What about animated text?
If you would like to animate text from a font, you will have to create the text you would like to animate with that font in a program that lets you make SVGs. You will then have to convert that text to SVG paths(you can find tutorials on how to do this). One thing to note is that the stroke property will create an outline around the text, so it won’t animate in like handwriting, you would need to make text that is simply a stroke in order to do so. In my first example, I drew my own text in vector illustration software for the handwriting effect.
Another thing to keep in mind with text is that if you do not give your SVG a title, the text will not be read by screenreaders as it is an image. So make sure you think of accessibility when using text and give screenreaders something to read!
The sky’s the limit
There are a ton of resources out there on SVG line animation, here are a few more:
I bet all of you have seen that little trick where an SVG path is animated to look like it's drawing itself. It's super…css-tricks.com
I like using diagrams as a way of showing information flow or browser behaviour, but large diagrams can be daunting at…jakearchibald.com