Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Master SVG animation using HTML & CSS - Build 8 Projects.
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 -Part2 (6:22)
Adding Links to Images. (3:28)
Using BLUR effect for an OFFSET image.
Complete and Continue