Udemy

Platform

English

Language

Web Development

Category

Creative SVG Animation From Scratch [2021]

Learn SVG by Using Advanced CSS Animations. Draw Vectors and Create SVG Web Animations.

4.54 (17 reviews)

Students

4 hours

Content

Apr 2021

Last Update
Regular Price

EXCLUSIVE SKILLSHARE OFFER
Exclusive SkillShare Offer
Unlimited access to 30 000 Premium SkillShare courses
40%OFF ANNUAL MEMBERSHIP

What you will 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


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. We are going to be covering all those awesome CSS animation properties and JavaScript DOM manipulation basics.

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.


Screenshots

Creative SVG Animation From Scratch [2021]
Creative SVG Animation From Scratch [2021]
Creative SVG Animation From Scratch [2021]
Creative SVG Animation From Scratch [2021]

Content

Introduction

What is SVG

Why SVG

Installation Tools

Basics of SVG

Creating First SVG

Styling SVG Elements

Creating SVG by Using Figma

Creating SVG by Using Figma Part 2

SVG Viewbox

SVG Dash Array and Dash Offset

CSS Animation

CSS Transforms

CSS Transitions

CSS Animations and Keyframes

SVG Animation Projects

Creating a SVG Button

Creating a SVG Logo

Creating a SVG Loading Animation

SVG Handwritten Signature Animation

SVG Drawing Animation Project

Drawing Shape on Figma

Adding Text in SVG

Animating SVG with CSS Animations Part 1

Animating SVG with CSS Animations Part 2

SVG Animated Social Media Icons Project

Creating SVG Buttons

Animating SVG Buttons Part 1

Animating SVG Buttons Part 2

SVG UFO Animation Project

Editing SVG on Figma

Animating Ufo

Animating Character Part 1

Animating Character Part 2

SVG Drawing Envelope Project

Introduction

Drawing Vector on Figma

Animating SVG Vector with CSS

SVG Animated Hamburger Menu Project

Introduction

Creating Hamburger Menu with SVG

SVG Animation Using JavaScript


Reviews

M
Mansoor11 May 2021

It is a very basic course in which you will learn hardly 6-7 concepts. So if you just want to start, the course is perfect for you.


Coupons

DateDiscountStatus
2/25/2021100% OFFExpired

3866984

Udemy ID

2/22/2021

Course created date

2/25/2021

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram