Make Awesome SVG Animations with CSS // 7 Useful Techniques

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

#css #animation #tutorial

Also see...

SVG in 100 Seconds https://youtu.be/emFMHH2Bfvo CSS Keyframe Animation https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes SVG Docs https://developer.mozilla.org/en-US/docs/Web/SVG

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8 Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro Use code lORhwXd2 for 25% off your first payment.

My VS Code Theme

• Atom One Dark
• vscode-icons
• Fira Code Font ... https://www.youtube.com/watch?v=UTHgr6NLeEw