Last month I’ve posted the first part of the SVG mini series, it teaches you how to create a path that is valid for animation. Today I am going to follow up on this post, I will teach you what to do when you want to animate. Last time I showed you what to look out for when creating a path that is capable of animating, if you have missed it you can read it here. But how do we animate a path?

Dashed lines

To animate a path in SVG we need a starting and an ending point. The path out of the box is a line that is as long as our path is. Now the following css rule comes into play

svg{
  stroke-dasharray: 20;
}

If you use this code, the line will be broken up in dashes with a width of 20 pixels. You can see how this looks in the demo below, the simple rectangle now has a dashed border.

See the Pen QpRMRa by Skippy (@Skippy) on CodePen.0

Dashes of just 20 pixels wide can be usefull in other animation, but this is not what we need. What if the dashes are longer? Let’s say, as long as the shape is. Now the rectangle’s border is completed again.

See the Pen pemWoZ by Skippy (@Skippy) on CodePen.0

How to calculate the length of the path

This can be tricky, I will probably spend an entire post on this subject someday, as you might have multiple paths in the same SVG object. But for now we assume you have one path, or you don’t care if some of the shorter paths animate quicker than the longer ones.

You can easily calculate the length of a path by selecting it with JavaScript and use the getTotalLenght()  function to get the path length in pixels.

var path = document.querySelector('path');
var length = path.getTotalLength();

console.log('L:'+length);

Open up your browser’s console to view the output, or print it somewhere on the page. Use this value in your css to set the stroke-dasharray of your path.

I can hear you think, “This is cool and all, but nothing is happening, and it looks just like a regular rectangle”. And you are right! Let’s animate it!

Animate the stroke dasharray

Using the stroke-dashoffset css rule will move the dashed border around. But without setting the stroke-dasharray you get a bunch of stripes following your shape, this will not give the drawing effect. So first we need to make sure we have hidden the border of the shape. Use the stroke-dashoffset  and set the value of it the same as the stroke-dasharray  value. The shape will now be invisible.

stroke-dasharray: 1604;
stroke-dashoffset: 1604;

This ensures us that the starting position of the animation is hidden. Otherwise we break the illusion of drawing the line on screen. If we were to combine this with a CSS animation where we set the stroke-dashoffset  to 0, the line will be drawn until the path has been completed.

svg{
  stroke-dasharray: 1604;
  stroke-dashoffset: 1604;
  animation: dash 2s linear forwards infinite;
}
@keyframes dash {
  100%{
    stroke-dashoffset: 0;
  }
}

In the demo I have set the animation to loop forever, it is up to you how you want to display the animation.

See the Pen pemWwq by Skippy (@Skippy) on CodePen.0

And this is how you animate a path. As you can see there is not much code needed, and the end result can make your design a little bit more intriguing.

But I don’t want a stupid rectangle on my site

I wouldn’t either (This is on my site, so I guess I did wanted it?) but you can use any shape you want. I have made some demo’s over the last couple of days, not my best work. But I got a new program on my tablet and wanted to try it’s SVG capabilities. But they do the trick on conveying the idea.

Skippyweb can’t post about SVG animations and not include a kangaroo

See the Pen rypgmj by Skippy (@Skippy) on CodePen.0

As a gamer and retro game collector I needed the triforce wings in here.

This is also a (not so good) example on how you extend the animation after the line has been drawn.

See the Pen Zelda logo svg animated by Skippy (@Skippy) on CodePen.dark

My favorite console is the SNES, meet the controller

Don’t mention the bogged lines around the A-B-X-Y buttons.

See the Pen Rpgbra by Skippy (@Skippy) on CodePen.0

Summary
Animate SVG – How to animate a path in SVG
Article Name
Animate SVG – How to animate a path in SVG
Description
Animate SVG, this miniseries is here to make your life easier and learn from my mistakes. Animating a SVG, creating the SVG and what you should not do.
Author
Publisher Name
Skippyweb
Publisher Logo

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.