Learn SVG Animation – With HTML, CSS & Javascript

Get an understanding of how these powerful animations are created using 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



Interested in improving the development of your next website? How about learning one of the hottest animation skills?

You will be able to create six SVG projects in two hours using a variety of animation techniques. Today, it is standard practice to use animation within the user interface of a website. We will explore new ways to improve your client projects through this fast-paced and effective course.

We provide all the SVG files, but we also create the SVG files in Adobe Illustrator (or similar). Videos screencast the lessons, which are explained in detail as we work through real-world projects designed specifically for this Learn SVG Animation – With HTML CSS & Javascript course.

Trending Now:   The Complete JavaScript Course 2022: From Zero to Expert!

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

We recommend taking our other Learn SVG Animation – With HTML CSS & Javascript course in the series if you are a complete beginner. 

Who this course is for:

  • Should already know what an svg file is
  • Must be familiar with HTML/CSS – does not suit an absolute beginner to coding
  • For students who want to improve their svg animations and try out new techniques, but don’t know where to start

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

Download Course

Leave a Reply

Your email address will not be published.

Related Courses

Back to top button


Join our telegram channel and be the first to know when we post/update courses and also when we share awesome deals & freebies.