Skip to content
UdemyCssPaid courseAll LevelsCertificate

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

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

Created by: code withsam

Last updated August 2017

icon
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

icon
Quality Score

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

Overall Score : 86 / 100

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


icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

code withsam

Get ahead in the developer world. Learn new skills that will help take your career to the next 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.

icon
More courses by code withsam

$15.99

icon
More CSS courses

$174.99

$149.99

$129.99

$99.99

$10.99

$13.99

icon
Reviews

4.3

2,190 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

By Ctrachte on 11/1/2024

Sam did a really nice job. The first project alone gave me everything I needed to get started with something relevant - a path animation (I'm not a graphics designer, but, rather, a geologist who would like to animate the downhole trace of a drillhole). I would liken working through the exercise to watching a several second guitar riff tutorial on youtube. You end up using the pause key a lot and watching the lesson repeatedly before you get it, but it's worth it. Sam is British; his original English speech is a little fast the American ear, but, again, it's just a matter of adapting. The other animations Sam covers show just how easy it is to do a number of attractive animation and text effects seen in film and the internet. The code is made available. Even if you're new to CSS and SVG, this little course can provide really useful content quickly. Nice job.

By Evan Hsu on 11/7/2020

Content is helpful so far. Production value is somewhat lower than other Udemy courses though.

By Leonardo Geyer Maia on 10/23/2020

Some videos end suddenly sometimes lacking a conclusion.

By Ida Hui on 9/23/2020

SVG animations is a new concept for me, and this was a great course to get started.

By Farrukh Shafiq on 9/20/2020

I like this course. It is for intermediate level. Clear concepts all the way. Thanks.

By Rashid Raza on 9/19/2020

nice and great, i learn alot now its time to create own SVGs

By Sreedevi B on 9/13/2020

Good one

By Joo Pedro Pereira on 9/13/2020

Globally a good course. Lacks a bit of explanation and context sometimes and lacks a big real world-like project imo. Learned cool stuff and glad I took it :)

By Marjolijn S on 9/9/2020

I loved this course. I didn't have the same results, strangely, with the Social Icons Project but overall, It's just wonderful to learn about all these techniques for making SVG's. I didn't know they were made this way only a few weeks ago so, I learned a lot. Thanks.

By Sambhaji Patankar on 8/21/2020

Very Good course

By Stijn Beckers on 8/8/2020

prima

By Rajvinder Singh on 8/7/2020

good tutorial

Showing 12 of 363 reviews