From the course: CSS: Animation
Join today to access over 24,400 courses taught by industry experts.
Animating SVG with CSS - CSS Tutorial
From the course: CSS: Animation
Animating SVG with CSS
- [Instructor] Let's take what we know about CSS animation and apply it to SVG elements too. We'll create this heart filling animation with this SVG heart to create an effect that you might see when liking a post or photo or something like that. My SVG code is inline here in my HTML. This is our SVG. And inside our SVG, we have two main shapes. We have our heart outline that I've given the idea of outline, and we have our heart fill that I've given the idea of heart fill. We're working with a simplified SVG for this example, an SVG with just two shapes, but CSS animations can be applied to SVGs with more shapes and more complexities as well. We're just keeping it focused for this example. Over in my CSS, I have the two sets of key frames we'll be using to create this animation. The first is a set of key frames I've called beat, and we'll use this on the fill shape of the heart. It will take the fill shape starting very,…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
