Simple line animation :: SVG :: Playground

Hello SVG — jalokimgraphics.pl

As always, finding the simplest, CSS-only way to add some flair to a site is what I love most. I will show you the general idea and behind the scenes of the tutorial I made on my website.

Click the link above for the full tutorial. (with code snippets)
The plan is to animate an SVG stroke to simulate writing or drawing.

Setting up shop.

First you will need a program that will create vector images, and be able to save it as an .svg file. I used Adobe’s Illustrator.

Courtesy of jalokimgraphics.pl

Choose a canvas of your liking and grab the pen tool.
Now in one continuous swoop, create the line that you wish to animate. I created a simple “hello”.

How to start the magic?

Save your file as an .svg and open it via a text editor like sublime or atom etc…

The entire trick is about the stroke, and stroke properties in CSS.
We know that a stroke has a width, a color and a style. This style can be dashed. And since it can be dashed, we can change the dash gap (how much space is between the two dashes)
Courtesy of jalokimgraphics.pl

Using svg’s and css’s 
stroke-dasharray and 
stroke-dashoffset we need to create a HUGE gap in our line.

This gap should be big enough to entirely cover our line, making it invisible.

I usually test the gap in Chromes developer tools so I can see it live.

I think you see where this is going.

Since we can no longer see the stroke, it’s been moved away from the viewbox, so now we can animate it back in. Using stroke-dashoffset start changing the value, you will notice the stroke start creeping in.

Using a negative value will reverse the action. Now add some good old CSS animations and you are good to go.

Summing up :: TLDR

Using css animation keyframes, and svg stroke-dash properties we can animate a single continuous line. Great to use for logo’s or other fancy intros.

For full details and code check out the link I provided above.