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
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.
Quick Reference
Animated Line Drawing Examples
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up