Master SVG Animation Using HTML & CSS: Build 8 Projects

1 Review
5 Hours
You save 94% -

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

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

Kunal Asudani


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


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


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


  • Unredeemed licenses can be returned for store credit within 30 days of purchase. Once your license is redeemed, all sales are final.
Your cart is empty. Continue Shopping!
Processing order...