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!

[@DesignCourse]

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

[@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]

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!

[@mehdigharbi732]

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

[@DivyanshBalchandani]

Exactly what I was looking for. Thank you!

[@ashtongeorge3984]

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

[@midkaa]

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

[@JTSS69]

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

[@dannycabrera8466]

I had to inspect the code, this is actually sick

[@mohamedelsheemy149]

amazing as usual

[@bram_gunst]

Amazing

[@MoneyLProd]

amazing

[@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

[@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]

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]

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]

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.....

[@catiagraciele9484]

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

[@matejrovis5525]

Might be obvious question, but why not use lottie?

[@nishant6032]

❤ from india

[@Eltaurus]

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.

[@isaacjon]

Uzbekistan 🔥🔥

[@manhnguyenhuu9351]

Can JavaFX load this kind of SVG?

[@epsisayidina2989]

What application software do you use in this video?

[@Eltaurus]

It's Google Chrome

[@RLNDcaST]

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

[@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]

1st person watch this 😂

[@mazharsolkar7500]

India

[@imdefnotash]

it's not free forever

[@ChiliStory]

TOO much water.