https://peertube.lagbag.com/videos/watch/211e8f1e-d21e-48b0-bfb8-4eb3445705f2 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 Wed, 08 Apr 2026 20:17:30 GMT https://validator.w3.org/feed/docs/rss2.html PeerTube - https://peertube.lagbag.com https://peertube.lagbag.com/client/assets/images/icons/icon-512x512.png https://peertube.lagbag.com/videos/watch/211e8f1e-d21e-48b0-bfb8-4eb3445705f2 All rights reserved, unless otherwise specified in the terms specified at https://peertube.lagbag.com/about and potential licenses granted by each content's rightholder.