Amazing SVG Animations with No Code

Тәжірибелік нұсқаулар және стиль

bit.ly/3PpjTPe 👈 Learn UI/UX & CSS Today. Use "UI2022" for 22% Off!
-- Today, I'm going to show you how to create infinite looping SVG animations without touching any code. The tool I'm using for this tutorial is svgator.com (not a sponsored video).
Codepen demo:
codepen.io/designcourse/pen/X...
0:00 - Intro
0:47 - Creating Masks in Figma
5:45 - Animation in SVGator
14:24 - Exporting the SVG
15:23 - Final Result
Let's get started!
#svg #frontend #animation
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

Пікірлер: 30

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

    What do you use more often for hero section graphics.. An SVG illustration? Or a photograph..

  • @konstantinkleber8792

    @konstantinkleber8792

    Жыл бұрын

    1) why not simply clip the content of the frames rather than masking 2) why not simply smart animate the whole thing in figma itself? seems alot more complicated the way you do it...

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

    Hi! I've recently discovered your channel and have probably watched over 100 hours of your content in the past 15 days and just love your content! I've learnt so much and my web designing has gotten sooo much better. Now as I'm also a developer who is just getting into front-end dev (I used to code things like discord bots and such) I'd really like to see more of designing and then actually developing the design as I still struggle with getting my design into html and css like I originally designed. Keep up the amazing work!

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

    Exactly what I was looking for. Thank you!

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

    great stuff dude , thank you so much for the courses 🔥🔥🔥

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

    Funny how I’ve been looking at your older svg animation videos trying to replicate it myself for practice, thanks for the video

  • @JTSS69
    @JTSS698 ай бұрын

    Please, more SVG animations like this one! I love your content. Thank you so much

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

    Wow, nice been wanting to rebuild my portfolio site so now I've got some ideas on what to add to it 🥳

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

    I had to inspect the code, this is actually sick

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

    amazing as usual

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

    Amazing

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

    amazing

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

    You shoud do an NFT with this animation 🤣 Your tutorials are great men, you are so cool 💚 This app is incredible men!!!!!!

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

    Am I the only one feeling that these online apps with monthly fees are geeting out of control? 12 bucks a month for 10 exports a month AND a strongly limited toolset?!? They have to be kidding - for this kind of money I get Photoshop AND Lightroom - the full experience, no strings attached. Not only a small one purpose web service. Sorry, this is - in no(!) way - reasonable. 😥

  • @Teckstudio

    @Teckstudio

    Жыл бұрын

    Oh wait, its 16 $ if you pay monthly ... this app has to do some awesome magic ... animating SVG isn't that complicated and offering a nice interface for doing so isnt' worth 150 $ per year ... once, with all features ... for sure ... but not yearly! But I may be wrong.

  • @sangeethanandh907

    @sangeethanandh907

    Жыл бұрын

    On your side, it's $12 buck, In India nearly Rs.1000. Yearly subscription for this tool takes one month of my salary🙃🙃🙃🙃 I GET ENTIER ADOBE APPS CHEPPPERR THAN THISSS.....

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

    Uzbekistan 🔥🔥

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

    ❤ from india

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

    Incredible teacher! Encourage you to PLEASE take his course if you want to take your UI Designs to the next level! Best investment you can make in gaining the knowledge this man is sharing. 💯% FACTS

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

    Hello ! Do you have a course for beginners with subtitles in Portuguese?

  • @Eltaurus
    @Eltaurus8 ай бұрын

    3:23 - to bring a circle into the isometric view you need to scale it down vertically to 57.7%. Rotating it was a mistake.

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

    Might be obvious question, but why not use lottie?

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

    Can JavaFX load this kind of SVG?

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

    What application software do you use in this video?

  • @Eltaurus

    @Eltaurus

    8 ай бұрын

    It's Google Chrome

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

    before you waste time on creating a continuous svg animation as a web background, know that it causes chrome and especially firefox to use over 100% cpu

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

    1st person watch this 😂

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

    India

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

    So basicly you can animate svg icons as lottie files and lord icon is doing it😅

  • @ChiliStory
    @ChiliStory4 ай бұрын

    TOO much water.