Creating an Animated Line Drawing

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