Animating an SVG Christmas Tree with CSS

This is Hour 2 of 12 Hours of Kosmas, our small agency’s marathon of mini research spikes each lasting….an hour! As it’s the season of giving, we’ve decided to write-up about each with a step-by-step, simple project to show a proof of concept. Ho ho ho!


Today’s hour was spent reading into SVG line animation for simple icons. For our project, I created a Christmas tree with some ornaments and a star. You can view the Codepen here.

The process itself isn’t as complicated as I thought it would be and after reading this quick tutorial, hopefully you’ll feel the same way!

Illustrating Your SVG

The illustration is just as important as the animation itself so let’s first start with a few notes on designing icons to animate.

Note: I used Illustrator here which makes SVG exporting easy thanks to a plugin they’ve developed.

First thing to keep in mind is to keep your illustration as a series of strokes. No fills! To create the Christmas tree in our example, I merely stacked three triangles on top of each other and used the pathfinder tool to merge them into a single shape. The trunk is a simple square and the ornaments are circles. The star was created with the pen tool.

Note: Before the pixel police comment, this isn’t a pixel perfect design. To keep in our one hour allotted timeframe, I had to quickly toss something together. Put the handcuffs away…

Second, is to ensure that each shape is on a separate layer and named in a way that you will understand later. This is because we want to animate each shape separately and when we copy the SVG code, it’ll automatically name each shape (layer) using a CSS id. In our example, I changed my ids into classes. As you can see in the example, I chose simple names like tree and trunk.

Now you have two options for saving your SVG.

1. The first is to go to File -> Save As -> SVG. Please choose SVG and not SVGZ.

2. The second is to simply copy your graphic and paste it into your favorite code editor (in my case that’s Sublime Text) without even saving it in Illustrator. Thanks to aforementioned Illustrator plugin, all the math that it takes to create your illustration should be copied into the code file.

Note: There are ways to optimize the size of your SVG but that is beyond this tutorial.

The HTML Markup

Now let’s put our SVG into our page. The markup is easy.

In this example, I just copied and pasted the SVG into Codepen. If you want to embed your graphic you do so just like an image file:

<img src=”NAME.svg”>

Since I copied and pasted my SVG directly from Illustrator it came with a bunch of extra code. I cleaned it up by deleting everything but:

  1. version
  2. xmlns
  3. viewBox
  4. xml: space
  5. and everything below <style>

Principles of SVG Line Animation

There are three main principles of SVG line animation and they are:

1. To create the animation you will need to turn your SVG’s solid lines into dashes and that’s as easy as using simple CSS. Let’s assume that our SVG is a square with an id of my_square. To turn the square’s solid line into a series of dashes you only need to use this:

#my_square {
stroke-dasharray: 20;
}

Codepen Example

If you increase the stroke-dasharray, your dashes become further apart.

2. The second principle to understand is the idea of offsetting your stroke, which is changing the place where the dash of a stroke begins. The higher the number, the further along the dash will begin.

#my_square {
stroke-dasharray: 20;
stroke-dashoffset: 300;
}

Codepen Example

Combine that with a little CSS animation and magically you get marching ants:

#my_square {
stroke-dasharray: 20;
animation: dash 3s linear;
}
@keyframes dash {
to {
stroke-dashoffset: 300;
}
}

Codepen Example

3. And finally, the last principle to understand is that if you increase the length of each dash to the size of your image, offset it equally to your dash, and combine that with animation, it will appear as though your icon draws itself.

#my_square {
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: dash 3s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}

Codepen Example

Let’s breakdown how we did this and why it works.

So we set my_square’s stroke-dasharray to roughly the size of the square. And we set its stroke-dashoffset equal to the size of each dash. This leaves our image blank because the first dash starts past the size of our icon.

Then we animated the dash keyframe to take three seconds (3s) with a linear motion so it animates a dash the length of our icon clock-wise into place.

The key here is forwards which keeps the image visible by keeping the last keyframe in place (in this case our image). Without forwards, your image disappears.

The CSS to Animate our SVG Christmas Tree

So using what we just learned, let’s create something a little more advanced with a simple Christmas tree animation. I’m going to go step-by-step through this Codepen.

First we need to set up our HTML. For this example, I kept it very simple: I just copied and pasted the SVG from Illustrator. Then I deleted some of the extra code to clean it up. Finally, I changed the ids to classes because I prefer working with classes.

Now there’s nothing new inside of the SVG, it’s just more shapes than you’re used to. Ignore all the weird numbers. The only thing to focus on are the classes which explain what each shape is (trunk, ornament, etc).

Now let’s breakdown each part of the CSS.

svg {
width: 70%
}

This was simply to get the image to fit inside of the browser window.

.tree, .trunk, .ornament, .star {
stroke: #000000;
stroke-width: 3;
fill: none;
}

Nothing crazy here. Ensured the strokes were black and fill was none, and made the stroke width thicker.

.tree {
stroke-dasharray: 1800;
stroke-dashoffset: 1800;
animation: dash 3s linear forwards;
}
.trunk {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
animation-delay: 2s;
}
.star {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
animation-delay: 3.5s;
}
.ornament {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 15s linear forwards;
animation-delay: 4s;
}

The stroke-dasharray and stroke-dashoffset should look familiar. The only differences in the animation is the length of time it takes to complete the image (15s, etc). Each one is slightly different to reflect the relative sizes of the individual shapes.

And I also added various animation-delay seconds so pieces animate at different times for a better effect.

And finally

@keyframes dash {
to {
stroke-dashoffset: 0;
}
}

Which you’re familiar with.

Parting Thoughts

So as you can see, SVG animation isn’t that hard at this basic level. Obviously you’ll find far more advanced line animations out in the blue yonder that is the internet, but they’re based on a set of key concepts that you just learned.

Depending on the level of browser support you’re stuck with, you’ll also want to check out various Javascript libraries that will ensure compatibility. This demo was merely to show you the ideas behind animating.

So take what you’ve learned, make your own versions of a Christmas tree, and start to explore more complicated versions.

I look forward to seeing what you create!

Check out 12 Hours of Kosmas for more tutorials.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.