Creative SVG Animation From Scratch [2021]

What you'll learn

Creating SVG animations using HTML and CSS
Drawing creative SVGs using Figma
CSS animations, transforms, transitions and keyframes
Creating 10 real-world projects
Using basic JavaScript for SVG animation


Requirements

Be able to understand basics of HTML and CSS

Description

If you are a developer or a designer and want to improve your visual skills, this course is the perfect match for you. Nowadays, it's not possible to impress someone by creating boring regular web pages and applications. It's not the 2010s anymore and users really care about visualization. And using SVGs is the best and the easiest way to create your own drawings and animate them on your web applications.

In this course, we are gonna be creating awesome real-world projects that will be an inspiration for your imagination. We are gonna begin with the basics of the SVG and learn how to create shapes using an HTML file and how to use SVG properties. And then you are gonna see how easy to create incredible vectors by using a free design tool which is called Figma. After that, we will dive into CSS animations and learn how to animate elements, how to use transform, transitions, and keyframes. And finally, we are gonna create our own projects and learn about advanced techniques of SVG animations.

If you are a beginner at animations, don't worry, everything in this course is from scratch. You don't have to know advanced CSS or JavaScript. The only prerequisite is understanding how HTML and CSS codes work.

And after this course, you will be able to draw and animate your own icons, shapes, and vectors. And you will be more confident in front-end development.

Who this course is for:

Web developers who want to improve their front-end skills.
Developers curious about SVG animations
Designers who want to learn advanced SVG