From the course: Interactive Animations with CSS and JavaScript

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

Applying CSS to SVG

Applying CSS to SVG

From the course: Interactive Animations with CSS and JavaScript

Start my 1-month free trial

Applying CSS to SVG

“

- [Instructor] So we've successfully animated our SVG using JavaScript. I would like to change the styling a little bit, though. There's a couple different things I wanna do. For one thing, I'd rather have a different color. Black's not really, I'm not really feeling the black. The other thing I wanna do is I wanna play a little bit with the line width, and I wanna use our VMIN unit again to make it more consistent across different resolutions. So the first thing I wanna do is go back into my code, and I'm going to go to my style sheet. And since these are just elements, like any other elements, I'm gonna go ahead and create a rule for path elements. And in this, I'm going to use the properties that are defined in SVG. So I'm gonna give it no fill. So fill, none. Because it's just a line drawing. And I need to give it a stroke color. And you use the stroke property for that. And I'm gonna make it green. 'Cause I've been using green a lot. And then the last thing I wanna do is give it…

Contents