Learn SVG Animation – With HTML, CSS & Javascript

You will learn how these powerful animations are generated with HTML, CSS, & JavaScript

What you’ll 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


  • An editor like Atom.io or Sublime Text should be installed on their computer
  • You can follow along if you have a vector graphics program like Adobe Illustrator, but it is not necessary. The SVG files are all provided.
  • Know how to write CSS code and style using classes
POPULAR  Modern React with Redux [2020 Update]


Would you like to improve the development of your next website? What about learning one of the most popular animation skills?

Using a variety of animation techniques, you will be able to create six SVG projects in two hours. It is now standard practice for websites to use animation within the user interface. With this fast-paced and effective Learn SVG Animation – With HTML, CSS & Javascript course, we will discover new approaches to improving client projects.

SVG files are provided, but we also create the files using Adobe Illustrator (or a similar program). Our instructors screencast the lessons as we go through all of the assignments in detail and explain the concepts in depth.

POPULAR  E-Commerce Website in PHP & MySQL From Scratch!

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

In case you are a complete beginner, we recommend looking at our other SVG Learn SVG Animation – With HTML, CSS & Javascript courses in the series. 

Who this course is for:

  • Should already know what an SVG file is
  • You must be familiar with HTML/CSS – this job is not suitable for someone with no prior coding knowledge
  • These tutorials are for students who want to better their SVG animations and learn new techniques, but aren’t sure where to start
POPULAR  JavaScript: The Advanced Concepts (2021)

Created By: Code Collective
Last updated 8/2017
Size: 172.92 MB

Download Course

The author(s) of this course invested a lot of time and effort in creating it. Please consider purchasing the course from the original author(s) if your budget permits. Your purchase motivates the author(s) to keep the course up-to-date and to provide support. The course also includes a certificate of completion. Thank you

Leave a Reply

We're On Telegram

Join our telegram channel and be the first to know when we post new courses, update courses and also when we share freebies.