Learn SVG Animation – With HTML, CSS & Javascript

- 80%

0
Certificate

Paid

Language

Level

Beginner

Last updated on April 10, 2025 6:50 pm

Enhance your web development projects with this fast and effective course on SVG animation techniques. Learn to optimize SVG files, prototype animations, and create stunning effects using masks and gradients. Perfect for those familiar with HTML/CSS, this course offers step-by-step video tutorials and real projects to improve your client work. Suitable for beginners who already know what an SVG file is and have some coding experience. Take your SVG animations to the next level and try new techniques with this comprehensive course.

Add your review

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

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

User Reviews

0.0 out of 5
0
0
0
0
0
Write a review

There are no reviews yet.

Be the first to review “Learn SVG Animation – With HTML, CSS & Javascript”

×

    Your Email (required)

    Report this page
    Learn SVG Animation – With HTML, CSS & Javascript
    Learn SVG Animation – With HTML, CSS & Javascript
    LiveTalent.org
    Logo
    LiveTalent.org
    Privacy Overview

    This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.