TubeSort Extras
You're not Alone!

We're here to help you to fight your YouTube Addiction!

Join TubeSort Today!
...
TubeSort Extension

Take your get rid of youtube challenge to the next level with our free chrome extension.

Get it now!
Browse Categories
Video Description
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