From the course: Interactive Animations with CSS and JavaScript
Unlock the full course today
Join today to access over 23,400 courses taught by industry experts.
Applying CSS to SVG
From the course: Interactive Animations with CSS and JavaScript
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.