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: github.com/fireship-io/animat...
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 • SVG Explained in 100 S...
CSS Keyframe Animation developer.mozilla.org/en-US/d...
SVG Docs developer.mozilla.org/en-US/d...
Install the quiz app 🤓
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font

Пікірлер: 478

  • @jonlothar6126
    @jonlothar61263 жыл бұрын

    I learned so much about SVGs just from your 100 second video! This is gold ~ The power of SVGs is severely underrated.

  • @RexGalilae

    @RexGalilae

    3 жыл бұрын

    Having worked with SVGs a lot lately, I'd say you're in the honeymoon phase right now lol Once you dive deep into creating visualisations and charts using SVG and libraries like d3, you'll start to realize that even trivial tasks like aligning text and setting overflow rules have to be done manually and you have to provide the exact pixels for every measurement. No flexbox or grid either lol.

  • @piyush9555

    @piyush9555

    3 жыл бұрын

    It's just ur perception that you learnt a lot in 100 secs cuz' that's hollow learning until you practice that

  • @sidheshwartiwari9834

    @sidheshwartiwari9834

    3 жыл бұрын

    @@piyush9555 very true

  • @HassanSelim0

    @HassanSelim0

    3 жыл бұрын

    yesterday I learned you can nest CSS inside an svg file so you can still reference the svg file inside your html instead of copying it, I don't know if there are browsers who don't support this or not though. The cool thing is that you can also reference this svg in a Github markdown file (like Readme), which is how I discovered this trick yesterday 😁

  • @sneaky-Jay

    @sneaky-Jay

    2 жыл бұрын

    Until recently it had poor browser support.

  • @manjurulislamkhan4722
    @manjurulislamkhan47223 жыл бұрын

    Bro, your ship is certainly on fire, and I am onboard!

  • @mfaizsyahmi

    @mfaizsyahmi

    3 жыл бұрын

    wait, we're not talking about Evergreen, are we?

  • @yannicknana

    @yannicknana

    3 жыл бұрын

    🔥🔥🔥

  • @MM-vr8rj

    @MM-vr8rj

    3 жыл бұрын

    Haha corny

  • @AndreasDelleske

    @AndreasDelleske

    3 жыл бұрын

  • @thumbsdownbandit

    @thumbsdownbandit

    3 жыл бұрын

    Who in they right mind wants to be on a burning ship?

  • @ihavetwofaces
    @ihavetwofaces3 жыл бұрын

    I'm a full stack developer and your content drives me CRAZY because it makes me want to do gorgeous front end stuff like this so bad! But instead I write database queries and c#/java all day. Maybe someday I can pivot to front end or even UX development.

  • @dori8118

    @dori8118

    3 жыл бұрын

    if can i ask, what the challenge to do both?

  • @ihavetwofaces

    @ihavetwofaces

    3 жыл бұрын

    @@dori8118 Mostly a time thing. Between "make a working, easy to use front end that looks good but nothing to write home about", "make a performant back end with good error handling and debugging", "deliver a complete product on a timeline defined by a customer", and "make the front end gorgeous with animated, responsive SVGs that don't add a ton of substance but do add a ton of style", but you can only pick 4. The others are obviously hard requirements, so very very nice UX stuff goes out the window and you get a plain ass button that says "Do Thing" instead of a cool, animated button with a nice color scheme and an aesthetic icon.

  • @thecuriousape9712

    @thecuriousape9712

    Жыл бұрын

    @@ihavetwofaces 1 year later, did you manage to get in a position to play around on the front end? Perhaps something entrepreneurial?

  • @dieerste5799

    @dieerste5799

    Жыл бұрын

    U are smart guy ❤

  • @darkerthansuede2439

    @darkerthansuede2439

    Жыл бұрын

    @@thecuriousape9712 I hope they did

  • @shayanzamani9907
    @shayanzamani9907 Жыл бұрын

    Bruh 👌 The stagger animation effect is what I've always wondered how to apply in a clean way using plain CSS and you just simply nailed it 🤯

  • @meetzaveri734
    @meetzaveri7342 жыл бұрын

    This video helped me solve an issue that I was having since 3-4 months in my side project. Really, the content they produce here is powerful. Loved it

  • @MikePeiman
    @MikePeiman2 жыл бұрын

    How could I possibly like this more? You are hands-down one of the greatest teaching channels in the world. Keep it up. Thank you.

  • @yunusbilecen6660

    @yunusbilecen6660

    Жыл бұрын

    What is the name of the program he is using ?

  • @beta9996

    @beta9996

    Жыл бұрын

    @@yunusbilecen6660 for drawing svgs? its Figma

  • @subhadeepchatterjee1528
    @subhadeepchatterjee15283 жыл бұрын

    This is LITERALLY what I wanted!!! I commented exactly this on your last video.

  • @Fireship

    @Fireship

    3 жыл бұрын

    Thanks for the suggestion

  • @ShintekBeats
    @ShintekBeats3 жыл бұрын

    I belong to the 43.4%. I really appreciate your videos, I used to do CSS/HTML/JS/PHP etc when I was a kid and I have a lot of catching up to do!

  • @brendabaholo1610

    @brendabaholo1610

    3 жыл бұрын

    Beloved, Please give this your special attention. God is a Good, Holy and Just( meaning that He up holds justice and does what He deems as good) Judge. He is also forgiving and He is All-Loving. He is also perfect meaning that there is nothing about Him this is contradictory. But How can He forgive you and me but still uphold Justice. It's through faith in the death, burial and resurrection of Jesus Christ. So turn repent and put your faith in the Living Christ who died for U and now Lives

  • @axeleli6845

    @axeleli6845

    3 жыл бұрын

    @@brendabaholo1610 shut up you're crazy

  • @Kevessi

    @Kevessi

    3 жыл бұрын

    @@axeleli6845 chill man

  • @danymajeed

    @danymajeed

    2 жыл бұрын

    😄

  • @jaideepshekhar4621

    @jaideepshekhar4621

    Жыл бұрын

    @@brendabaholo1610 Want forgiveness? Take crack- I meant religion.

  • @nishilsheth9076
    @nishilsheth90762 жыл бұрын

    I never knew about the animations tab in chrome dev tools. There are so many things I learn from your videos in such a short amount of time. Keep up the good work ☺️!

  • @romeorel1679
    @romeorel16798 ай бұрын

    You are a genius. Being able to reverse engineer the animation design and recreate a new one based off of it. A truly web engineer.

  • @philippebaillargeon5204
    @philippebaillargeon52043 жыл бұрын

    EASILY one of the best programming channel on KZread. You don't understand how valuable your videos are !!

  • @taofeekbakare990
    @taofeekbakare990 Жыл бұрын

    Really thought developers coded svgs using some kind of artistic mastery. Never knew figma could do this seamlessly. Thank you

  • 2 жыл бұрын

    You are definitely one of the most efficient, useful channels in this domain. A lot of useful information in a very short duration... Thank you!

  • @yunusbilecen6660

    @yunusbilecen6660

    Жыл бұрын

    What is the name of the program he is using ?

  • @Dawa202
    @Dawa2023 жыл бұрын

    Best programming shorts on youtube! Your execution and knowledge is very impressive man!

  • @tomijovanoski18
    @tomijovanoski183 жыл бұрын

    Whoa 😮 I’m accustomed to use all these features in my 7+ years of front-end development career , but damn - that last trick with the inline css variable just blowed my mind 🤯

  • @krackytech2344

    @krackytech2344

    2 жыл бұрын

    yes im definitely using it

  • @butterfly7562

    @butterfly7562

    2 жыл бұрын

    I thus solved a complex animation that required JS implementation, which was great!

  • @danymajeed

    @danymajeed

    2 жыл бұрын

    wow

  • @suraj351

    @suraj351

    Жыл бұрын

    It's very usefull.... But i already know about 😊

  • @ontheruntonowhere

    @ontheruntonowhere

    Жыл бұрын

    @@suraj351 Give yourself a ribbon, champ.

  • @Shdnfncidjen
    @Shdnfncidjen3 жыл бұрын

    Half of viewers subscribed is actually really good! Congrats!

  • @Gepeto213
    @Gepeto2133 жыл бұрын

    Seriously ? What a great content for such a short video. Full of a lot of tips! Awesome!

  • @irun_mon
    @irun_mon Жыл бұрын

    I didn't even know you can do this with SVG, learn new things everyday

  • @thefront5871
    @thefront5871 Жыл бұрын

    WoW! Learning SVG and animating it is like learning HTML5 and CSS3 all over again! Amazing!

  • @JR-um3kt
    @JR-um3kt3 жыл бұрын

    I might get job with all of this. In few videos learned more than in my entire Web programing course on faculty.

  • @Fireship

    @Fireship

    3 жыл бұрын

    This video should help your personal website stand out at least.

  • @leonardomoraes1658
    @leonardomoraes1658 Жыл бұрын

    I came to learn how to animate svgs, I left with what I came for and a set o tools. Many thanks!

  • @kalugy
    @kalugy Жыл бұрын

    that's just a good explanation, really complex concepts in a few minutes in a very useful and understandable way. thank you

  • @gregoryolenovich6440
    @gregoryolenovich64402 жыл бұрын

    I do this stuff everyday and I just learned about changing css vars with js and the inline vars. Great stuff glad I watched it.

  • @brucemozart3665
    @brucemozart36655 ай бұрын

    The animations are impressive, but what's even more impressive is your awesome tutorial. Thank you

  • @TechJohnson
    @TechJohnson3 жыл бұрын

    You have a great teaching style. Thank you for a great refresher!

  • @dankelman9562
    @dankelman9562 Жыл бұрын

    Awesome video! I really enjoy these clear and short tutorials!

  • @patroclus8796
    @patroclus87963 жыл бұрын

    This was very well explained. Thank you! More of this pleeezz

  • @daniellasilverman7554
    @daniellasilverman75543 жыл бұрын

    1:02 - Jeff pulling out his college Math HW 😂

  • @akshitsingh6429
    @akshitsingh64293 жыл бұрын

    For anyone who cannot see the animation panel (probably due to an older ver of chrome ) try clicking on the 3 dots , then click on the more tools tab then select animation

  • @yunusbilecen6660

    @yunusbilecen6660

    Жыл бұрын

    What is the name of the program he is using ?

  • @Meletion1

    @Meletion1

    11 ай бұрын

    @@yunusbilecen6660figma he said it

  • @Gust8

    @Gust8

    8 ай бұрын

    Visual Studio Code(web/application) and Figma(web)@@yunusbilecen6660

  • @lucasbss
    @lucasbss3 жыл бұрын

    every time i watch your videos i wonder why i spent so much on random courses, i could have just seen your videos

  • @sthefanocarvalho2823
    @sthefanocarvalho28233 жыл бұрын

    Your explanations are the best! Efficient and complete.

  • @Aspiiire
    @Aspiiire3 жыл бұрын

    Never knew about the animation tab thank you so much for the video and for this feature it's a game changer

  • @yatochka7777
    @yatochka7777 Жыл бұрын

    Wow, it's the best SVG guid ever! Thank you so much! 💖💖💖💖💖

  • @ugarz
    @ugarz3 жыл бұрын

    Thank you very much you couldn't release this video at a better time ! This is exactly what I was looking for the past few days ! I was even reverse engineering Stripe's buttons 😂

  • @BO-ny5mm
    @BO-ny5mm3 жыл бұрын

    Wooow! Priceless 12 minutes video :) Thank you so much for supercalifragilistic tutorial!

  • @curiosdevcookie
    @curiosdevcookie3 жыл бұрын

    I’m so super happy I had you by my side when I started self-teaching. Everyone who hasn’t subscribed is missing the hell out of web dev and programming in general. That said, I owe you a lot. When I’ll hold my first dev job, I’m going to bake you a cake, and/or consider anything else*), that makes you smile/happy, yours 🙃 *) in my realm of possibilities (no end world hunger stuff, no soul of my first born, … you get the picture 🧐.

  • @TheSerbianTube
    @TheSerbianTube3 жыл бұрын

    More people should subscribe in sign of respect because of quality content you provide to us. Thank you!

  • @ben97864
    @ben978642 жыл бұрын

    Buddy! Blew me away! The more I learn how math and dynamic programming principles can be harnessed on the front end, the more I fall in love with it. Thumbs up on every vid of yours I watch, and an eternal subscriber!

  • @GamingTSH

    @GamingTSH

    2 жыл бұрын

    Top Js Effect kzread.info/dash/bejne/iGh105uyd7rWcZc.html :)

  • @ic3xiii
    @ic3xiii3 жыл бұрын

    OMG that --order variable trick is amazing!

  • @dbroche
    @dbroche2 жыл бұрын

    Cool video. I'm a big fan of embedding SVG directly into the DOM; however, I prefer to leverage & for performance. Happy animating!

  • @catalinim4227
    @catalinim42273 жыл бұрын

    Always wanted to learn this, many thanks 😊

  • @Spainog
    @Spainog3 жыл бұрын

    Mr Delaney these last weeks you have became my favorite channel.. love your content

  • @ShmoreIITG
    @ShmoreIITG5 ай бұрын

    This is really well formatted and precisely explained video. You saved so much of my time with this video. Thank you so much!

  • @aitboss85
    @aitboss852 жыл бұрын

    Love your videos. You are one of the best guides on KZread.

  • @WellSaint001
    @WellSaint0012 жыл бұрын

    man! thank you! this is a lot more than what I expected!

  • @mohamed_elmardi
    @mohamed_elmardi3 жыл бұрын

    thank you so much, SVG is awesome.

  • @kwamenaplays5899
    @kwamenaplays58993 жыл бұрын

    I really needed this video. My app needs a UI update and this gave a few excellent ideas 👌

  • @snakeeyesOFFICIAL76
    @snakeeyesOFFICIAL76 Жыл бұрын

    Just when i thought i knew a litle bit about animations... i find this stuff... i already subscribe

  • @Bstiler100
    @Bstiler1003 жыл бұрын

    I can't thank you enough, I was looking for something like this.

  • @harshbrownes
    @harshbrownes Жыл бұрын

    I feel like I knew this the whole time! What a great video!

  • @agrittiwari5485
    @agrittiwari54852 жыл бұрын

    Thanks for the elaborative introduction to SVGs

  • @itsgunu5393
    @itsgunu53933 жыл бұрын

    It has the best Content available to try and create things , Without any length tutorials

  • @paulmitchell2916
    @paulmitchell29162 жыл бұрын

    nice image at 1:04.. brings back memories of all those many years at community college catching up to the folks who actually worked hard in high school..

  • @ayanmukherjee9744
    @ayanmukherjee97443 жыл бұрын

    To me you are the best web dev channel.

  • @babakkarimiasl8127
    @babakkarimiasl81273 жыл бұрын

    such a helpful and time-saver video thank you

  • @fieldtrip2178
    @fieldtrip2178 Жыл бұрын

    Just learned how to make svg animations from this. Nice.

  • @AkshayKumar-kz6zh
    @AkshayKumar-kz6zh2 жыл бұрын

    Jeff you're a hero! Thank you a ton for making these videos. Hope they cryogenically preserve you so that the dev community never loses you. You need to be protected.

  • @yavuzerkal2551
    @yavuzerkal25518 ай бұрын

    amazing video as always. You are like a gift from the web development gods

  • @CoryTheSimmons
    @CoryTheSimmons3 жыл бұрын

    Didn't realize you could use calc with time durations. Very nice stagger technique! 👏

  • @user-zo2ky4mz7d
    @user-zo2ky4mz7d3 жыл бұрын

    THANK YOU FOR THIS. LEARNT A WHOLE LOT🔥

  • @shamiul_islam
    @shamiul_islam Жыл бұрын

    Really an impressive one! Thanks!

  • @leosouza3008
    @leosouza30082 жыл бұрын

    what a video!!! i dont usually subscribe to channels on YT but had to subscribe to you! thanks a lot for the content on this video

  • @SouravDuttaROCKSTAR
    @SouravDuttaROCKSTAR3 жыл бұрын

    This one is GOLD STANDARD ...so much SVG and animation knowledge packed in just a few mins. JUST AWESOME!

  • @rice5817
    @rice58172 жыл бұрын

    Absolutely love your videos as they're always packed with yummy tips & tricks. You're the man! Keep it going

  • @GamingTSH

    @GamingTSH

    2 жыл бұрын

    Top Js Effect kzread.info/dash/bejne/iGh105uyd7rWcZc.html :)

  • @EmmanuelNgwandu
    @EmmanuelNgwandu3 жыл бұрын

    Thanks bro, I never liked svg cuz I didn't understand ém but now I feel like you gave me super powers

  • @axa993
    @axa9933 жыл бұрын

    Holy shit you just taught me how to SVG. Brilliant. I love this channel and I've been subscribed for a long time but you just keep impressing me.

  • @thebavarian8726
    @thebavarian87263 жыл бұрын

    I love it how I always get this "AHHHH nice" effect from your tutorials.

  • @MrKostas336
    @MrKostas3363 жыл бұрын

    Your videos are extremely helpful. Thanks brother

  • @utvikler-no
    @utvikler-no2 жыл бұрын

    Loved the css variable --order at the end. Very creative!!

  • @GamingTSH

    @GamingTSH

    2 жыл бұрын

    Top Js Effect kzread.info/dash/bejne/iGh105uyd7rWcZc.html :)

  • @pijushbarik
    @pijushbarik3 жыл бұрын

    Man, you are on fire! Keep up the good work. ❤️

  • @SSGVB
    @SSGVB5 ай бұрын

    Before this video I was scared of scalable vector graphics, but now, I can’t leave home without one, thanks FireShip

  • @Webtricker
    @Webtricker2 жыл бұрын

    That's called the way of explaining things perfectly.🤗

  • @LoveThatSceneChannel
    @LoveThatSceneChannel3 жыл бұрын

    Okay... I literally need this!

  • @brendensong8000
    @brendensong8000 Жыл бұрын

    Fantastic Video! Thank you sharing!!!

  • @CHITUS
    @CHITUS2 жыл бұрын

    Whoa I’m accustomed to use all these features in my 7+ years of front-end development career , but damn - that last trick with the inline css variable just blowed my mind

  • @radigaming1584
    @radigaming15843 жыл бұрын

    High quality content + Moving speed = Fire 🔥

  • @swoorp

    @swoorp

    3 жыл бұрын

    High quality content + Moving speed = Friction causing x+y = Fire🔥

  • @jimmyj.6792
    @jimmyj.67923 жыл бұрын

    Awesome explaination 🎉🎉 really great. Nice work. Thanks you so much 👍👌

  • @steveeparsonsjr7929
    @steveeparsonsjr79292 жыл бұрын

    This is pretty much how you would do it in Inkscape, using layers, grouping, containers and ID's etc. Nice

  • @jonathan-arias
    @jonathan-arias3 жыл бұрын

    The way you animate the bolt icons blew my mind, the inline CSS variables are amazing.

  • @jeremyrubio1531
    @jeremyrubio15312 жыл бұрын

    *subscribed. Great content and very well explained. Thank you !! I learned a lot with this video.

  • @mukiibipeter07
    @mukiibipeter072 жыл бұрын

    Hohohooooo ... Bro, you have more?? I enjoyed every bit of it.

  • @aleksandarstoev1611
    @aleksandarstoev16112 жыл бұрын

    Man that's some quality content right there! Respect!

  • @GaborGubicza
    @GaborGubicza8 ай бұрын

    Great content thanks for sharing. Since the video Figma became a subscription based SW.

  • @d3v431
    @d3v4312 жыл бұрын

    This is awesome. Thanks for sharing ❤️

  • @ashishtiwari3094
    @ashishtiwari30943 жыл бұрын

    Jeff you are amazing thanks for all the videos

  • @sbJin
    @sbJin Жыл бұрын

    thanks for your great teaching.

  • @ahmedroberts4883
    @ahmedroberts4883 Жыл бұрын

    Great video. Thank you!

  • @gravy1770
    @gravy17702 жыл бұрын

    Oh he's good good. I never thought of svg or animations as simple, let alone put together, so you can imagine my intrigue while opening this video. But again, Fireship has proven in under 15mins that if he has a video on it, it's simple

  • @bhaveshbhide
    @bhaveshbhide3 жыл бұрын

    Brilliant explaination!! Love this channel!

  • @lwendt220
    @lwendt2203 жыл бұрын

    This channel is genuinely one of the best learning resources I've ever found, I look forward to every upload.

  • @stylesg7818
    @stylesg78182 жыл бұрын

    That was a cool one. Thank you.

  • @simonlampert
    @simonlampert2 жыл бұрын

    Thanks for the tutorial, really clear 🔥

  • @GamingTSH

    @GamingTSH

    2 жыл бұрын

    Top Js Effect kzread.info/dash/bejne/iGh105uyd7rWcZc.html :)

  • @WilliamJuan
    @WilliamJuan3 жыл бұрын

    Wow, amazing content as always! 🔥🔥

  • @fadlaichsan4924
    @fadlaichsan49243 жыл бұрын

    thanks for making this video tutorial 🔥

  • 3 жыл бұрын

    This is really an awesome guide. It's unbelievable how somebody can clearly and quickly explain something like svg, animations, keyframes, etc...

  • @trishaseal7782
    @trishaseal778211 ай бұрын

    Here from The Odin Project, that was stunning!

  • @nitroflap
    @nitroflap3 жыл бұрын

    You listened to me! Thanks!

  • @pedromartindelcampogonzale9613
    @pedromartindelcampogonzale96132 жыл бұрын

    Amazing videos, thank you so much

  • @eggescobar
    @eggescobar2 жыл бұрын

    Outstanding video! Great use of CSS variables!

  • @GamingTSH

    @GamingTSH

    2 жыл бұрын

    Top Js Effect kzread.info/dash/bejne/iGh105uyd7rWcZc.html :)

  • @klutch4198
    @klutch41983 жыл бұрын

    Finally, something fun to do today 🔥🎸🍺🍔

Келесі