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
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
Overall Score : 86 / 100
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.
Instructor Details
- 4.3 Rating
2,190 Reviews
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.
More courses by code withsam
More CSS courses
Build Responsive Real-World Websites with HTML and CSS (2024)
4.8 (119,018 Reviews)
Provider: Udemy
Time: 37.5h
$174.99
Advanced CSS and Sass: Flexbox, Grid, Animations and More! (2024)
4.8 (46,326 Reviews)
Provider: Udemy
Time: 28.1h
$149.99
Modern HTML & CSS From The Beginning 2.0 (2025)
4.8 (28,669 Reviews)
Provider: Udemy
Time: 24.3h
$129.99
How to Create A Website: An HTML Tutorial and CSS Tutorial (2025)
4.7 (2,057 Reviews)
Provider: Udemy
Time: 31.9h
$10.99
Ultimate CSS Grid Course: From Beginner to Advanced (2021)
4.7 (1,039 Reviews)
Provider: Udemy
Time: 2.7h
$13.99
Reviews
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







