Learn 7 useful SVG animation techniques to make beautiful graphics for your website. In this tutorial, we’ll build two different SVGs from scratch and animate them CSS. Source code: https://github.com/fireship-io/animated-svg-demo

• 00:00 What we’re building
• 00:42 What is an SVG?
• 02:22 1. Chrome Animation Inspector
• 03:11 2. Drawing Groups
• 05:10 3. Duotone CSS Variables
• 06:30 4. Transition Animations
• 07:41 5. JS events
• 08:36 6. Keyframe Animations
• 10:11 7. Animation Staggering

#svg #css