Learn To Build An SVG Animation With CSS

Поділитися
Вставка
  • Опубліковано 23 січ 2025

КОМЕНТАРІ • 652

  • @arturogsme
    @arturogsme 4 роки тому +158

    I cant't believe I didn't know SVG elements could be animated. Thanks a lot.

    • @abulkalamasif1270
      @abulkalamasif1270 4 роки тому +18

      I didn't know that these animations are made using CSS

    • @eggs1170
      @eggs1170 3 роки тому +1

      Rt xd

    • @ProgrammingWithTSH
      @ProgrammingWithTSH 3 роки тому

      ❤️👉 ua-cam.com/video/lmIwYLFYZ9U/v-deo.html 👈❤️.

    • @GamingTSH
      @GamingTSH 3 роки тому

      ❤️👉 ua-cam.com/video/lmIwYLFYZ9U/v-deo.html 👈❤️.

  • @nomadvagabond1263
    @nomadvagabond1263 5 років тому +781

    "favorite photo editing tooool, visual studio code"
    best weed quality ever😂😂

    • @GreatDynamism
      @GreatDynamism 5 років тому +1

      😂😂

    • @HammaRyuk
      @HammaRyuk 5 років тому +2

      😂😂😂😂😂😂

    • @indieNik
      @indieNik 5 років тому

      😂😂😂

    • @kornikopic
      @kornikopic 4 роки тому +16

      To be fair, there is "visual" in vs code :D

    • @doreenchemweno
      @doreenchemweno 4 роки тому +2

      Thought I was the only one who noticed that haha

  • @ayyyrajat
    @ayyyrajat 5 років тому +2

    My friend you've already created this and have it open in the other monitor, but you're making it sound like you're doing it first time. Absolute Legend.

  • @ramazonalizoda731
    @ramazonalizoda731 5 років тому +29

    you did it in 20min.
    dude you're a genius

  • @soulshott8284
    @soulshott8284 5 років тому +19

    Thank you for doing what you do! I love your voiceovers and your humor as well as going through the issues with us and giving your verbal thought process. Keep it up! Really looking foreword to your HTML/CSS course, I plan on that being my intro to paid course work to learn and I’m really excited for the release!

    • @ProgrammingWithTSH
      @ProgrammingWithTSH 3 роки тому

      ❤️👉 ua-cam.com/video/lmIwYLFYZ9U/v-deo.html 👈❤️.

  • @kabilr1820
    @kabilr1820 5 років тому +55

    If UA-cam have facility to like 1000 times, I will like this video 1000 times.
    Thank you so much Ed sir

    • @konohamaru8497
      @konohamaru8497 5 років тому +4

      Just click the like button twice ✌

    • @rupammankar3410
      @rupammankar3410 4 роки тому

      ua-cam.com/channels/kgYqlsFvu7Tq-W2n8aQwtg.html..
      Wow.. Amazing css and js effects here 😍😍..
      Visit once..

  • @ghostrgp01
    @ghostrgp01 3 роки тому +2

    The "export with id" part was a big revelation, I have so many ideas now. Thank you!

  • @real-manoj-manoharan
    @real-manoj-manoharan 2 роки тому

    Thanks!

  • @anathkantonda
    @anathkantonda 4 роки тому +21

    You are full of chaotic energy and I love it! 😂😂 thank you for the tut.

  • @danielgiustiniperez4289
    @danielgiustiniperez4289 3 роки тому +1

    Bro I swear this man is the funniest teacher on the internet. THIS is how everything in life should be taught, making me smile as much as I learn every time I watch a video

  • @lowkyio
    @lowkyio 4 роки тому

    I was struggling so much with SVG animation and could not find a video that showed how to do this well until now! I appreciate you sharing your knowledge and hope you are doing well. Bless your beautiful face

  • @jassieeeee
    @jassieeeee 5 років тому +23

    This is really cool and interesting. Never heard of all of these things. Thank you very much!

  • @theonex7108
    @theonex7108 4 роки тому +33

    Couldn't stop laughing when he started animating the hat. The look on his face everytime it didn't go as expected 😂😂😂

    • @ProgrammingWithTSH
      @ProgrammingWithTSH 3 роки тому

      ❤️👉 ua-cam.com/video/lmIwYLFYZ9U/v-deo.html 👈❤️.

  • @moodeongah
    @moodeongah 3 роки тому

    This is still the best in 2021!! I will try it on my own. You are the best , Dev!!

  • @motivation4life430
    @motivation4life430 4 роки тому +22

    I watch full ads so that he can get paid well to teach such cool things for free

  • @MaharshiBhaduriMusic
    @MaharshiBhaduriMusic 3 роки тому +12

    10:03 “All I need to do is literally just grab what I want to grab” - Dev Ed

  • @nikola93n
    @nikola93n 5 років тому +5

    Wow, you are using Blender! You are KING! Maybe in future we will see some CGI on this channel.

  • @harrisngwenya4120
    @harrisngwenya4120 4 роки тому +5

    I've learnt a lot from this one like the rest of your tutorials I've watched, I thank you Sir.

  • @javascript_developer
    @javascript_developer 4 роки тому

    Awesome Dev. Your channel is very very supportive to stay up to date. Thanks a lot.

  • @elwinjyothis5388
    @elwinjyothis5388 4 роки тому

    This guy is hypnotising me with the way he is moving the cursor across the artboard and highlighting the shits

  • @KP-jx1wy
    @KP-jx1wy 5 років тому

    Wow this is incredible! The amount of awsome UI's that can be built using this method is limitless!

  • @nuwang1
    @nuwang1 5 років тому +5

    Thank u sir, been struggling with svg animations! This soooo helps thank u

    • @rupammankar3410
      @rupammankar3410 4 роки тому

      ua-cam.com/channels/kgYqlsFvu7Tq-W2n8aQwtg.html..
      Wow.. Amazing css and js effects here 😍😍..
      Visit once..

  • @banksdada501
    @banksdada501 4 роки тому

    you are a crazy fun developer - me likey. piking through the css and html course. looking forward to get on the javascript course. Well done you.

  • @shishir833
    @shishir833 5 років тому +1

    thanks for such a tutorial... i already knew about the process, but it wasn't that much clear. But, now it's super clear to me.

  • @chamithjanaka6040
    @chamithjanaka6040 5 років тому +4

    Thank you so much sir, I was struggling a lot with this SVG thing today, Now it's all clear, thanks to you. Please Ed do a video also about How we can create our own illustrations.

  • @tinafilipcic
    @tinafilipcic 2 роки тому

    Thank you a million times! transform-origin and transform-box saved my issue.

  • @shedsoncode
    @shedsoncode 3 роки тому +1

    Thanks for this tutorial, finish creating mine, and it's easy to follow

  • @Osuna2024
    @Osuna2024 2 місяці тому

    That PewDiePie energy is phenomenal. Great work, keep it up!!!

  • @42mix22
    @42mix22 5 років тому +4

    I’ve been looking for this for such a long time

  • @neverbetter1312
    @neverbetter1312 3 роки тому

    Thank you! Clear voice, relaxed guidance, smooth music.

  • @MTT664
    @MTT664 4 роки тому

    Your channel is amazing. Congratulations!

  • @pedrogorilla483
    @pedrogorilla483 4 роки тому

    You can hold ctrl and drag the pointer over the plant to select all of its layers instead of guessing the layers on the panel.

  • @MonirulIslam-sg7oh
    @MonirulIslam-sg7oh 3 роки тому

    Wow I was never known how to make a svg animation with css. Amaizing!

  • @wilsonwang8641
    @wilsonwang8641 3 роки тому +13

    Can't stop laughing since the guy moves with losing his hat.😂😂😂

  • @ststeve499
    @ststeve499 5 років тому +3

    Am I the only one that will always laugh throughout his courses...? I just can't control it😂😂 Thank you boss

  • @parrot785
    @parrot785 4 роки тому +2

    This was a nice introduction to svg animation. Thank you!

  • @gindevgin9298
    @gindevgin9298 4 роки тому

    thank you!!!! happy new year!!! 🎉🎉🎉

  • @mauranonnis9314
    @mauranonnis9314 3 роки тому

    Am I the only one getting 2012 PewDiePie vibes? Too fun. Awesome tutorial!! Thanks 😁

  • @kuthub1989
    @kuthub1989 5 років тому +3

    Bg Mild Music is awesome to hear, some of other UA-camrs damaged my eardrum by their bg music.

  • @shbnmp
    @shbnmp 3 роки тому

    I love you man! Just what I wanted today

  • @recepyldz5491
    @recepyldz5491 4 роки тому

    You are an incredible detail Dev.. Thanks!

  • @johnt3627
    @johnt3627 5 років тому

    You are the best Dev Ed, seriously

  • @liotechtutorials7089
    @liotechtutorials7089 4 роки тому +1

    I love this guy
    really thank you man

  • @valerijstolmacevs8341
    @valerijstolmacevs8341 3 роки тому +1

    Dev Ed makes very high level content, I just watched JavaScript course, and that was great 😌

  • @YayanFauzi
    @YayanFauzi 4 роки тому +6

    8:01 LOL, his photo editing tool in on another level

  • @VoTuongTho
    @VoTuongTho 4 роки тому

    Thank a lot, I am always in love with animation but never know how to do it with css, very nice tutorial :)

  • @emmanuelugwuoke967
    @emmanuelugwuoke967 3 роки тому

    😂😂😂 when you did rotateZ the first time. I love your style man

  • @losrobbosful
    @losrobbosful 3 роки тому

    Holy sh#t!
    Have to use this as soon as I can. Great that you showed this grouping part in figma for the parts. Pure gold! Thanks a ton, you're the man

  • @FirdavsiGameDev
    @FirdavsiGameDev 5 років тому +1

    Nice demo. Thanks! You can use inkspace for svg locally.

  • @navirosas5968
    @navirosas5968 4 роки тому

    Great Job Dev, The Way You Explain Things Is Awesome!!! 🧬 🕉

  • @ahmadalwadi9156
    @ahmadalwadi9156 5 років тому +1

    Hey, I have couple of questions 😬
    0. What font are you using in vs code?
    1. When is the course going to be released?
    2. How much are you planning to charge for it?
    3. Are you able to make a similar course for js?
    Thanks for the awesome videos!

  • @omaryassir5885
    @omaryassir5885 5 років тому +1

    That's the tutorial I was waiting for 🔥

  • @greatstar2524
    @greatstar2524 2 роки тому

    My beloved friend I do respect you a lot. Thank you Sir and God bless you.

  • @jx8551
    @jx8551 3 роки тому

    exactly what I needed. thank you!

  • @jeetusharma8406
    @jeetusharma8406 3 роки тому

    thankyou so much Ed.... now i know how svg animation work😍😍😍

  • @ChristopherOnuminya
    @ChristopherOnuminya Рік тому

    you just got another subscriber and a million thanks for that tutorial

  • @weblearningd2294
    @weblearningd2294 2 роки тому

    My fav Developer!!!!

  • @solotalemwa
    @solotalemwa 4 роки тому

    I diiiiiiiid it! Thanks Dev Ed. The shadows. though....man!

  • @Amar11115
    @Amar11115 2 роки тому

    First time learning it. Heard about it but first time watched how it works.

  • @akinolanifemi8459
    @akinolanifemi8459 2 роки тому +1

    Hi, your tutorials are amazing! You said we can draw our SVGs rather than downloading them. That's awesome. Could you please do one on how to make SVGs. I would really love to know how to make them. Thank you.

  • @tomosterlund6497
    @tomosterlund6497 4 роки тому

    Love it! This helped me a ton. Thanks Ed

  • @JuanRodriguez-ve1wp
    @JuanRodriguez-ve1wp 3 роки тому

    like always Ed, great video and thank you for sharing.

  • @rio0323
    @rio0323 5 років тому +71

    1:11 ”baikuuu”
    Seriously I thought you spoke Japanese

    • @rupammankar3410
      @rupammankar3410 4 роки тому

      ua-cam.com/channels/kgYqlsFvu7Tq-W2n8aQwtg.html..
      Wow.. Amazing css and js effects here 😍😍..
      Visit once..

    • @BasicallyBasics
      @BasicallyBasics 4 роки тому

      @Praveen Kumar 57 😂😂😂😂

    • @powermaker6967
      @powermaker6967 4 роки тому

      That's how you say bike in korean. Paste this into translator and you'll hear just that 바이크

  • @letswithakash
    @letswithakash 4 роки тому

    Great Bro. this is my first video which project now i m going to try svg animation

  • @TheSpxy
    @TheSpxy 5 років тому

    Amazing content as allways. Thanks Ed :)

  • @voyarismus
    @voyarismus 4 роки тому

    I hate the aggressive wix ads but I really like the tutorial... Cheers

  • @xplore2000
    @xplore2000 4 роки тому

    Hi am turning to 17years, and I would like to let you know that your videos on UA-cam really make me feel nice all the time.
    Am still a beginner and I would recommended you if it will be possible for you to teach me JavaScript sir.
    That a lot , I really enjoy your teaching and your explanation.💪
    And please let me know if you can teach me?

  • @lailabouziani7704
    @lailabouziani7704 5 років тому

    Im in love with your videos

  • @SPreciado67
    @SPreciado67 2 роки тому

    Great tutorial. Easy to follow along and create simple animations.

  • @enmanuelsorianovasquez1268
    @enmanuelsorianovasquez1268 4 роки тому

    i like the way that u make your videos

  • @eldan400
    @eldan400 4 роки тому

    great video , keep on posting man :) learned alot right now!

  • @saumyaverma9581
    @saumyaverma9581 5 років тому

    thank you so much .....i was searching for it for so long!!

  • @aa-gb1ck
    @aa-gb1ck 4 роки тому

    what is th vs code extension you are using that is indenting your code automatically? you pasted the svg at 8:43 and then it automatically aligned nicely.

  • @AlexMartinez-pp2sj
    @AlexMartinez-pp2sj 4 роки тому +1

    Im ADOBE XD fan, but in this case Figma was the winner. The archive that XD export, was wrong or different than the Figma export. So... for the beginners like me I recommend use Figma :))

  • @_daya.shankar_
    @_daya.shankar_ 3 роки тому

    Thanks bro. Just what i looking for

  • @yourfingeronscreen8598
    @yourfingeronscreen8598 4 роки тому +1

    Awesome teacher

  • @MohamedKhaled-sf8zm
    @MohamedKhaled-sf8zm 4 роки тому

    Bro you are just a legend ♥

  • @laetitiaarnould8759
    @laetitiaarnould8759 5 років тому

    Great tuto, I didn't know undraw, it's great to learn about it. Thank you very much

  • @strugglingElds
    @strugglingElds 5 років тому +1

    love it man! pls create more animation in svg plsssss!

  • @Tcatcoder2
    @Tcatcoder2 2 роки тому

    thank you soooo much I love your turturials they help me alot!!!!!

  • @youngerbrothertiny4766
    @youngerbrothertiny4766 5 років тому

    Very nice tutorial. Love it !

  • @ivyhello
    @ivyhello 2 роки тому

    This is awesome! Thank you!

  • @echoe09
    @echoe09 5 років тому +2

    Hey man I love the video! I didn't expect to burst out laughing at that wheel rotation.
    My favorite was the hat not moving with the body though. hahahaha
    Subscribed

  • @mahit-m
    @mahit-m 3 роки тому

    Wow, thanks for this simple tutorial

  • @luis96xd
    @luis96xd 4 роки тому +1

    Great video! It was so cool!😄
    Wow, I loved this Figma tools, looks so easy and gives us a lot of functions! 😱

  • @denarybeatle3008
    @denarybeatle3008 4 роки тому

    Thanks Dev Ed for this tutorial

    • @jadijohnson2899
      @jadijohnson2899 4 роки тому

      ua-cam.com/video/-ZKwMlbyr48/v-deo.html html,css and javascript game project

  • @josueaparicio3528
    @josueaparicio3528 3 роки тому +1

    When i put the animation nothing happens and when i open the console in the browser It says invalid property value what can i do? :(

  • @prashantrrai
    @prashantrrai 4 роки тому

    Sir ur ossm in the video 😂
    Too fun to learn with u

  • @atifaslam2965
    @atifaslam2965 3 роки тому

    very well explained,
    sir.

  • @g.creemers3646
    @g.creemers3646 4 роки тому

    Thank you! Didn’t know it was that easy!

  • @rohitkudalkar92
    @rohitkudalkar92 5 років тому

    cool effects. Thanks and love for your efforts.

  • @arsaamofficial
    @arsaamofficial 5 років тому

    For saving some time, you can use CTRL + CLICK on the part of illustration that you want to directly select, rather than going through all the layers from the panel.
    Btw, nice video.

    • @arsaamofficial
      @arsaamofficial 5 років тому

      You can even select multiple layers by holding CTRL + dragging your mouse or if you want to select specific pieces all at once, just hold CTRL + SHIFT + select the parts that you wanna extract.

  • @prithwirajdutta3827
    @prithwirajdutta3827 4 роки тому

    Exactly what I was looking for. Thank you.

  • @FranciscoDara
    @FranciscoDara 5 років тому

    You are amazing man, thanks for your videos (from Brasil).

  • @ionwizard606
    @ionwizard606 5 років тому

    Superb Video.Excellent

  • @desireecaceres5674
    @desireecaceres5674 5 років тому

    omg your tutorials are super helpful!! thank youuu

  • @RahulAhire
    @RahulAhire 5 років тому

    Thanks Edwin for checking out my channel and also showing it to Kyle Cook (Web Dev Simpliified)

  • @hp___n_
    @hp___n_ 2 роки тому

    Thank You. Great Video!

  • @hubertlenningrad2252
    @hubertlenningrad2252 3 роки тому

    Awesome. Thanks dude!

  • @anirbandas12
    @anirbandas12 5 років тому +1

    A tutorial on an animated svg background with a form or controls in front would be nice. Also looking for a react form tutorial with formik w/ material UI form components including datepicker and select.