We've seen that you can animate HTML elements, but you will be pleased to learn that you can also animate SVGs and this is really cool. Let's take a look. Just in case you don't know, SVG stands for Scalable Vector Graphics. Now this is not a lesson on SVGs, but we are going to take this little trend line and see how we can playfully animate it. Okay? So we have this SVG here with a class of trend line,

and see how we can playfully animate it. Okay? So we have this SVG here with a class of trend line, which is how we can target it. And then what we are interested in is this polyline with a series of points that will describe this trend line that we've looked at. So you can see it has a black stroke and a stroke width of four. Now I'll put the code and the browser side by side so we can see what we're doing.

Now I'll put the code and the browser side by side so we can see what we're doing. Uh, you'll notice that we have this SVG overflow visible and the reason for that is without it our line would be subtly cropped out of the SVG view box here. So let me show you if I remove that line. You can see here we have this weird little crop out. And so by setting overflow visible, the SVG will be visible outside of its bounding box. So there's a lot of things that you can animate with SVG,

outside of its bounding box. So there's a lot of things that you can animate with SVG, but here let's see how we can reveal the line and make it look like we are drawing it progressively. So there isn't a line progress properly that we could animate, but we can recreate this effect by using the stroke dash array. So let's target, uh, that trend line SVG. And here specifically I want to target the poly line.

So let's target, uh, that trend line SVG. And here specifically I want to target the poly line. And like I mentioned, we can target the stroke dash array and let's go through it step by step. So I will go 20, eh, maybe let's go 10. And you can see that this is going to break up the path or the poly line in a series of dashes. 10, 10, 10, 10 on and off. Now you can be a lot more precise than this. So let's say you wanted the dashes to be 20,

Now you can be a lot more precise than this. So let's say you wanted the dashes to be 20, but the spaces between the dashes to be only five. Alright, that's pretty cool. And you can go even further and have more than just a dash and space definition. You can have multiple of them. So you could go five five. And so now we should have a 20 pixel dash followed by a five pixel space and then a five pixel dash followed by a five pixel space.

by a five pixel space and then a five pixel dash followed by a five pixel space. And indeed you can see that pattern applied. Alright, so how does this help us draw the line? Like I mentioned? Well, I'm glad you asked. Let's say that I'm going to have only one dash array definition and the dash will be 20 pixels and then the space will be humongous. Let's go 1000. It's more than the whole length of the path.

and then the space will be humongous. Let's go 1000. It's more than the whole length of the path. And so as a result we should only see a 20 pixel dash followed by just a huge empty space. And maybe you start seeing where this is going. Let's make it so that when we hover the SVG, so that trend line hover and again we want to target the poly line. Well here, let's grab the stroke dash array and paste it. But this time we're going to make this dash array also 1000. And so now if I hover over the SVG,

But this time we're going to make this dash array also 1000. And so now if I hover over the SVG, the whole line is revealed, but if I'm not over it, it's just a 20 pixel dash. Okay, let's add a CSS transition and we will transition this stroke dash array over say two seconds with the ease in out transition timing function. And now take a look at what happens. Oh, you can see the line draws in and out

And now take a look at what happens. Oh, you can see the line draws in and out and this is far from perfect, but this is definitely a step in the right direction. Okay, so let's continue fine tuning. We want the stroke dash array to start at zero so it's completely invisible. And I wanna hover, we animate from zero. Now remember that we have this ease in out, uh, transition timing function.

Now remember that we have this ease in out, uh, transition timing function. So the animation should start slow and end slow, but it starts slow but ends up really quick. And the reason is we are transitioning to 1000 pixel for the stroke dash array, but 1000 pixels is way beyond the end of that line. And so basically our dash keeps getting longer, uh, beyond the end of the line, but we can't see it. So we need to try to find a more realistic value

beyond the end of the line, but we can't see it. So we need to try to find a more realistic value to animate towards. Uh, and there's a way you can figure that out with a little bit of JavaScripts. Let's do it quickly in the console. So check this out. Cons, a line equals document do query selector and we want to select the dot trend line space polyline.

and we want to select the dot trend line space polyline. So if I check for line, we should see that polyline perfect. And this polyline element will have a methods that I can call line get total length, whoops, line gets total length, and if I call that, it's going to give me the length of that polyline 366. Okay, so if we now replace the 1000 values with 3, 6, 7, 6, 7,

Okay, so if we now replace the 1000 values with 3, 6, 7, 6, 7, Well now our line animation should feel much more targeted and you can see that it slows right down at the end because we are actually animating the dash length exactly to the length of the polyline. So it looks like to do a line draw, you just animate the dash array length and that kind of works. But there's actually a little gotcha with this right now.

and that kind of works. But there's actually a little gotcha with this right now. Uh, if I hover over the line, you can see that our line start and end is a square end. It's called a but end. And this is defined here in the HTML with the stroke line cap of, but let's change this to round and uh, oh, look at this. We have this little black dot. Actually the animation will work perfectly,

We have this little black dot. Actually the animation will work perfectly, but what happens now is that when the dash has a length of zero, we still have that little circle, which is essentially a zero length dash, but that has the rounded corners on both sides. So it creates a little circle with the two rounded edges. So we kinda need to hide that. And so we're going to revisit our approach. Instead of a dash that has a huge empty space

And so we're going to revisit our approach. Instead of a dash that has a huge empty space or hidden line, basically we are going to set the dash array to 3, 6, 7 so that it covers the entire line and you can see the line draw. And now, uh, if I hover, nothing happens because we are already showing the entire line by default. And so here on the hover, instead of uh, targeting the stroke dash array, what we want to do now is actually offset that dash

targeting the stroke dash array, what we want to do now is actually offset that dash and we can use the stroke dash offset properly for this. So if it's set to zero, the default on hover, nothing is going to change. But watch what happens if I set it to say 50. Now when I hover, you can see that the last 50 pixels of the line are disappearing. And here it's sort of weird to grasp, but it's not disappearing.

And here it's sort of weird to grasp, but it's not disappearing. It's literally offsetting the whole line to the left. Let's go in the transition here and change the property to dash offset. So it feels like the end is disappearing here. But what you need to think about is this whole line going all the way towards the empty invisible space here. And so basically we have that fully visible line and then it offsets to the start

And so basically we have that fully visible line and then it offsets to the start and the part that is beyond the start disappears. And so that's why the end looks like it's getting shorter. It's because it's moving away towards the start. So let's put that offset value to 367 and it should offset it completely to the point where we don't see any line, not even the little rounded edges. Let's try that. The stroke dash offset, we are going

not even the little rounded edges. Let's try that. The stroke dash offset, we are going to go 3, 6, 7. And so now when I hover, the line should completely disappear, including the little rounded edges. Okay? And basically we have done it. All we need to do is move that up here and then when we hover, we want the stroke dash offsets to go back to zero. And so now the line will draw on hover like initially

we want the stroke dash offsets to go back to zero. And so now the line will draw on hover like initially intended and all is well. So that's just a tiny example of what you can do with SVGs and animations and hopefully it's opening your mind to some ideas that you could play with. So we've used CSS transitions, but obviously you can also use CSS key frame animations. So in the next lesson we'll do a quick example of a loading spinner that use key frame animations

So in the next lesson we'll do a quick example of a loading spinner that use key frame animations and SVG animations.