Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Creating an Animated Line Drawing

4:56 with Guil Hernandez

Using SVG stroke properties and CSS, you can create an animation that moves a stroke along its path. The animation makes it look like the stroke is drawing itself. Once you understand how SVG line animation works, creating your own animated line drawing will be simple.

So let's look at one last SVG animation technique. 0:00
How to animate a line drawing in SVG. 0:03
Using SVG stroke properties and 0:06
CSS we can create an animation that moves a stroke along its path. 0:07
The animation makes it look like the stroke is drawing itself. 0:12
For example, we can draw simple shapes like this, or we can draw letters and 0:15
words, like in this example. 0:20
We can also get really creative and build complex line animations like this one. 0:21
Pretty cool, right? 0:26
Once you understand how SVG line animation works, 0:27
creating your own animated line drawing will be simple. 0:30
When you launch the new work space for 0:34
this lesson, you'll see an HTML file with an embedded SVG. 0:35
And when I preview the work space in the browser, 0:40
the graphic looks familiar, doesn't it? 0:43
It's the Treehouse logo. 0:44
We're going to create a line animation that will 0:46
draw the Treehouse logo before our eyes, in the browser. 0:49
So, let's dive in. 0:53
Back in my HTML file, 0:55
the SVG itself uses a single path element to draw the shape of the treehouse logo. 0:56
So first, I'm going to give this path element a class of logo. 1:03
This path currently has its fill color set to this light shade of green. 1:11
So I'm going to change the path's fill value to transparent so 1:15
that it renders a transparent fill. 1:20
If I save my HTML file and refresh the browser, 1:24
we don't see the logo because the fill is fully transparent. 1:28
For the line animation to work, the path needs to have a stroke. 1:33
So I'm going to add the stroke with CSS, using some SVG only stroke properties. 1:36
So, inside style.css, I'm going to create a new rule under my SVG styles. 1:42
And this rule will target the logo element. 1:50
And then I'm going to change the stroke color with the stroke property and I'm 1:56
gonna set the stroke color to that light shade of green with the hex value #6fbc6d. 2:02
Then, I'm going to increase the stroke width, by adding a stroke width property. 2:11
And giving it a width of two. 2:19
If I save my style sheet, 2:21
and preview it again, we're able to see the outline of the logo. 2:23
So, how do we animate this path stroke to make it look like its drawing itself? 2:28
Well, animating the stroke is essentially an illusion that's created using two 2:34
key SVG stroke properties. 2:39
Stroke-dasharray, and stroke-dashoffset. 2:40
So these stroke-dasharray property controls the dashes and 2:45
gaps in a path stroke. 2:49
So for example, I can make this a dashed stroke by going back to my style sheet and 2:50
giving the logo a stroke-dasharray property. 2:56
Then I'm going to set the value to five, which creates a dashed line. 3:06
The stroke will alternate between a five pixel dash, and a five pixel gap. 3:11
So let's see how this looks. 3:16
When I save my style sheet, and 3:18
refresh the browser, as you can see we get a dashed line affect in the stroke. 3:20
To create wider dashes and gaps, I can go back and 3:25
change the dash array value here to say, something like ten. 3:28
And when we refresh it again we can see how the stroke now alternates 3:33
between a dash of ten pixels and a gap of ten pixels, so they're wider. 3:38
Now, I like the narrower dash array. 3:43
So I'm going to set the stroke-dasharray back to five. 3:45
So the other key SVG stroke property, is stroke-dashoffset. 3:52
The stroke-dashoffset property controls the position, 3:56
or offset of the dashes and gap in the stroke. 4:00
So let me show you what I mean. 4:03
So, back in my style sheet, I'm going to add 4:05
the stroke-dashoffset property to my logo rule. 4:08
And I'm going to set the value to five. 4:16
So now, when I go back to the preview and refresh the browser. 4:19
Notice how the dashes and gaps in the stroke move over by five pixels. 4:23
And if I go back and change the value to 10, when I go back and 4:28
refresh the page, the dashes and gaps move over 10 pixels, and 4:33
the value 15 will move them again by 15 pixels, and so on. 4:38
So how are these two properties used to create line animations? 4:45
Well, in the next video I'll show you how to animate these properties to create 4:49
the illusion of a line being drawn on the page. 4:53

You need to sign up for Treehouse in order to download course files.

Sign up