Master SVG Animation Using HTML & CSS: Build 8 Projects

Master SVG Animation Using HTML & CSS: Build 8 Projects

1 Review

5 Hours

$9.99$40.00

You save 75%

55 Lessons (5h)

Introduction to the Course , Instructor and Understanding Syntax.
Introduction to SVG.5:38
Introduction to instructor.1:01
The first SVG example.7:10
BASIC SHAPE - Designing of RECTANGLE.
Designing a Basic Rectangle.6:23
Adding concept of TRANSPARENCY to the Rectangle.6:43
The advance TRANSPARENCY concept.4:10
Adding Rounded Corners to a Rectangle.5:10
BASIC SHAPE - Designing of CIRCLE.
Designing CIRCLE in SVG.5:37
BASIC SHAPE - Designing of ELLIPSE.
Designing a Basic ellipse.5:45
Designing Multiple Ellipse in SVG.7:04
Designing the combination of two ellipse.5:03
BASIC SHAPE - Designing of LINE.
Designing LINE in SVG.4:40
BASIC SHAPE - Designing of POLYGON.
Designing a Basic POLYGON.6:29
Designing POLYGON with FOUR sides.6:07
ADVANCE use of POLYGON.9:08
ADVANCE use of POLYGON - Part 2.3:54
BASIC SHAPE - Designing of POLYLINE.
Designing a Basic POLYLINE.6:06
Combination of Different straight Lines.4:02
Understanding the concept of PATH in SVG.
Basics and Practical example of PATH.6:44
Designing a Quadratic Curve using the PATH concept.19:48
Adding TEXT to your SVG.
Defining a basic TEXT in SVG.2:45
Rotating the TEXT at a certain angle.3:40
Adding some advance Functionality to TEXT.5:41
Using TEXT as a link in SVG.6:52
Useful ELEMENTS in SVG.
The use of g element in SVG.7:29
The use of defs element in SVG.6:40
The use of symbol element in SVG.4:56
STROKES in SVG.
Introduction to stroke with practical example.4:37
The use of stroke-width property in SVG.3:33
The stroke dasharray concept.5:39
The stroke linecap property in SVG.4:55
Some ADVANCE concept used in SVG.
The Clip path concept in SVG.5:34
Use of mask in SVG.11:03
Introduction to TOOLS for SVG.4:11
Adding JAVASCRIPT to SVG.
Using script in SVG.10:56
Adding more than one event to SVG.7:23
Applying different EFFECTS / FILTERS to SVG.
Applying BLUR effect.8:12
Implementing the SHADOW effect.10:00
Using BLUR effect for an OFFSET image.5:44
Applying black shadow to an element.2:58
Applying Colored shadow.4:29
Applying GRADIENTS in SVG.
Understanding the concept of gradient.9:54
Understanding the vertical linear gradient .3:00
Adding Text to Linear gradient.3:39
The concept of Radial Gradient in SVG.8:43
Performing Animation in SVG.
The basic implementation of animation.7:51
The advance function of animation.10:04
Applying animation to multiple objects.8:50
The use of END element in SVG.6:21
Performing repeated actions in Animation.10:34
The use of SET element in SVG.9:43
Understanding the transform animation.6:43
Animating the MOTION of element.5:21
Animating Motion of an element -Part26:22
Adding Links to Images.3:28

DescriptionInstructorImportant DetailsReviewsRelated Products

Design High Resolution Images, Logos, & Screensavers Using SVG Animation

Kunal Asudani

Kunal Asudani | Website developer | Bestselling Instructor

Kunal Asudani is a website developer with 8 years of experience in web development and as an instructor. He has expertise in programming languages such as HTML, JSON, JavaScript, jQuery, CSS, Twitter Bootstrap, AngularJS, Foundation, C, C++, PHP, and DSA.

Description

SVG stands for Scalable Vector Graphics. SVG programming allows you to code two-dimensional graphics that scale and can be manipulated via CSS, HTML, or JavaScript. This beginner-friendly SVG programming course is great for anyone who wants to design logos and images for websites and enhance their web design capabilities.

Access 55 lectures & 5 hours of content 24/7
Get an introduction to SVG & understand the syntax
Deisng basic shapes
Add text to your SVG
Explore important elements in SVG
Use JavaScript in SVG
Apply filters to images & explore the concept of gradients in SVG
Understand animation & design logos and complex animation

Specs

Important Details

Length of time users can access this course: lifetime
Access options: web streaming, mobile streaming
Certification of completion included
Redemption deadline: redeem your code within 30 days of purchase
Experience level required: all levels
Have questions on how digital purchases work? Learn more here

Requirements

Any device with basic specifications
Inernet access

Terms

Unredeemed licenses can be returned for store credit within 30 days of purchase. Once your license is redeemed, all sales are final.

1 Review

5/ 5

All reviews are from verified purchasers collected after purchase.

Michael Donnelly

Verified Buyer

Very clear instruction. Well detailed and explained. Voice is clear and easy to understand. Video is clear, with no distractions.

Jul 7, 2020

Your Cart

Your cart is empty. Continue Shopping!

Processing order...