SVG Line Animation for Beginners

I love SVG line animation because 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 animation.

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 ont going to go into it here, but there are lots of great resources explaining SVGs and how to make them!

---

Prepare your SVG

In order to achieve this effect, we will 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 the SVG easier to work with.

The path must also have a stroke property. This is the SVG equivalent of an outline. We can use CSS to adjust the width and colour of the stroke.

.star {
    fill: none;
    stroke: #7d2d68;
    stroke-width: 17px;

---

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 restes 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

animation-fill-mode: forwards;

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?

If you are just starting out and still feel uncomfortable with JavaScript, trial and error is a perfectly viable (if tedious) way of getting the length of the SVG path. The entirety of my first line animation was done with 0 JavaScript, just a lot of patience. If this is where you are at, try animating anyway! Practice is a great way to enhance your skills, and I love that you don’t NEED JavaScript to accomplish this. Have fun playing!

---

If you feel comfortable getting your feet wet with a little JavaScript, you can get the length of the path with a few lines of code.

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

console.log(length); 

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;

in your JavaScript, and this will take the length that you just got and apply it directly to your CSS styles.

See the Pen Line animation walkthrough by Meghan Sterling (@megster) on CodePen.

---

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

We’ve gone over some pretty basic things here, but there are all sorts of ways to utilize JavaScript, animation libraries, and even masking to make incredible animations with this method.

There are a ton of resources out there on SVG line animation, here are a few more:

How SVG Line Animation Works

https://jakearchibald.com/2013/animated-line-drawing-svg/

https://medium.com/bitmatica-lab/svg-line-animation-for-the-uninitiated-5a65d91c6044