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

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.

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.

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.

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 thoughts on “Animate SVG – How to animate a path in SVG”

Leave a Reply

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

Related Posts

Tips and Tricks

Google Fonts, an easy and free way to spice up your project

Today, we are going to talk about google fonts. As promised in an earlier post. “The web is the best place for text. Unlike a printed artifact, text at a URL can be searched, copied, Read more...

Codepen

Beating heart, be my valentine

Originally created in 2015 on valentines day (February 14, mark it in your calendar) for my girlfriend. Since this years Valentine’s day is around the corner I thought it would be nice to kick off this Read more...

Tutorials

Animate SVG – How to create a path in SVG

This is going to be a short series of posts about on how to animate SVG. We start of basic and get more advanced later on. I don’t know how long it is going to Read more...