Learn SVG Animation - With HTML, CSS & Javascript (Udemy.com)

Learn how these powerful animation are created using HTML,CSS & Javascript

Created by: Code Collective

Produced in 2017

What you will learn

  • Optimise SVG files for use online
  • Prototype animations in the online tool Codepen
  • Use Javascript to calculate the length of an SVG Path
  • Create SVG's that make use of Masks & Gradients

Quality Score

Content Quality
Video Quality
Qualified Instructor
Course Pace
Course Depth & Coverage

Overall Score : 82 / 100

Live Chat with CourseDuck's Co-Founder for Help

Need help deciding on a css course? Or looking for more detail on Code Collective's Learn SVG Animation - With HTML, CSS & Javascript? Feel free to chat below.
Join CourseDuck's Online Learning Discord Community

Course Description

Looking to enhance your next web development project? Or learn one of the most sort after animation skills?
Within two hours you will have created Six SVG projects looking at a number of different animation techniques. Using animation within the user interface of a website is now standard practise. This fast and effective course will introduce use to new ways to improve your client projects.

All SVG files are provided but we do also work through creating the SVG files in Adobe Illustrator(or Similar). Lessons are taught with video screencasts, explained in detail as we work through real projects created directly for this course.
Projects Include
- Animating Logos
- Animating Social Icons
- Hand Drawing Text
- CSS animation properties explained
- Using Gradients over Text and Icons (Cross Browser)
- Using Masks
- Using CodePen
- Introduction to SVG Optimisation Online
For a complete beginner to SVG we recommend taking our other course in the series.

Who this course is for:
  • Should already know what an svg file is
  • Should have used html/css before - not suitable for absolute beginner to coding
  • Students who want to improve their svg animations and try new techniques but don't know how

*Some courses are excluded from this sale. Coupon not working? If the link above doesn't drop prices, clear the cookies in your browser and then click this link here.
Also, you may need to apply the coupon code directly on the cart page to get the discount.

Coupon Code

Instructor Details

Code Collective

Get ahead in the developer world. Learn new skills that will help take your career to the nest level.
Over 1000 positive reviews and 20k students enjoy my courses.
If you need a specific course please contact us and we can create courses on anything related to coding.



48 total reviews

5 star 4 star 3 star 2 star 1 star
% Complete
% Complete
% Complete
% Complete
% Complete


Interesting course and kind invitation to dig further. I had to tweak the examples (add transform-box:fill-box along with transform-origin: 50% 50%) to have them work on my machine (Chrome 78).

The course is very instructive. Perhaps it can be extended by including keyboard events or another kind of interactions.

Excellent course, specific and right to the point. Covers all topics of the subject.Thanks

Really nice course ^^ really enjoy all the course but especially the course on gradients ^^ thanks !

Course was great. I learned a lot. There were a couple hiccups that I had to figure out by googling, stack overflow, and looking at the questions. It doesn't seem like the instructor has kept active in responding to the questions.

I did learn some good lessons from this course, but I felt more time could have been spent to showcase different effects, and also to explain some different things like browser compatibility issues, the purpose of the viewbox, and other basic things about SVG.

The instructor is good and I learned a lot, but there could be a lot more content for the price. Very short course. Great for cliff-note people.

Course content is almost identical to the course SVG & CSS Animation - Using HTML & CSS, no amazing and new things to learn

Another good course by the Code Collective. I took this class the same day and immediately after taking their other course, "SVG & CSS Animation - Using HTML & CSS." I appreciate how their classes are short, to the point and easy to understand. Though, I do feel this probably should have been part of the other course rather than being a separate one. It's much shorter than most courses for the same price. But, that said, I feel I have a good grasp of basic SVG animation now that I didn't have before, so I'll call that a win.

Un cuso prctico muy bien explicado y con ejemplos claros y sencillos.Altamente recomendable!!!

This course was good but there was one mistake in the code which I fixed via the Q&A. Also, it would be good to supply all the code from each exercise, CSS, HTML, JS.