SVG & CSS Animation - Using HTML & CSS (Udemy.com)

Learn the fundamentals of creating SVG animations in the browser using HTML & CSS.

Created by: Code Collective

Produced in 2015

icon
What you will learn

  • Create SVG animations using HTML & CSS
  • Prototype animations in the online tool Codepen
  • Explain the CSS properties needed for SVG line animations in the browser

icon
Quality Score

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

Overall Score : 82 / 100

icon
Course Description

"This course is well-structured and easy to follow. The instructor does a great job of explaining how to complete each step and as well as why they are needed." - Dan
"Good introduction to SVG animations. Good clear explanations of each example and providing SVG code for several elements was very helpful." - Michael

"This course is really helpful to get started on SVG animation journey, a wonderful course." - Veera

In this course we will cover the fundamental techniques using in CSS to create animated SVG elements. SVG images look perfect on any screen size and with the importance of mobile web have become increasingly popular. SVG allows you to create animations and take flat illustrations to a whole new level.

This course is perfect for both new and experienced web developers who are yet to use SVG within their projects. If you have used HTML and CSS before you will have the knowledge to follow along with the examples.
By the end of this short course you will have created three separate SVG animations from scratch. Each example adds useful techniques for future projects. In just 2 hours you will have the experience to create your own SVG animations.
Improve your web development skills in this short course and make your next project stand out. Who this course is for:
  • Students should have some experience with creating websites with HTML & CSS.
  • No experience using SVG images is requied, we explain how to create and use SVG images in code for those with no prior knowledge.
  • This course is not suited for a student who is a complete beginner and never seen HTML code before.

icon
Instructor Details

placeholder

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

Learn SVG Animation - With HTML, CSS & Javascript

$11.99

icon
More css courses

CSS Bootcamp - Master CSS (Including CSS Grid / Flexbox)

$11.99

Step By Step HTML and CSS course for beginners

$11.99

The Complete HTML and CSS Course For Beginners

$11.99

Web Design: Wireframes to Prototypes

Free

Modern HTML & CSS From The Beginning (Including Sass)

$11.99

Materialize CSS From Scratch With 5 Projects

$11.99

icon
Reviews

4.1

48 total reviews

5 star 4 star 3 star 2 star 1 star
% Complete
% Complete
% Complete
% Complete
% Complete

It's a very clear and practic course, wich is excellent to the very very beginner in the SVG animations world.

I miss going deeper and more examples. Anyway it's free, so what can I say? Thanx !

I did enjoy the course, I think I forgot that it was a ' fundamentals' course. Was hoping for more examples on some of the other CSS attributes. But over all it was well layed out, it all made logical sense, and he spoke clearly. Thank you

Great introduction to SVG and CSS Animation. If you know a bit of CSS and HTML already, learning to work with SVGs really expands your toolkit. If you're new to CSS, it's still an accessible way to put CSS into context without being too advanced.

Instructor was clear and straightforward. I appreciated that the course was tight.

Good information. But it's too short!

I would like some more parts of this that goes into making custom hover effects and more advanced parts of SVG animations. Perhaps tying in SVG with JS or JQuery for a better idea of the power SVGs have for front-end work.

This was very insightful. However I was clueless at times because the instruction were not so clear. Should have had all the AI design videos as it would help me more. Overall good course.

Fantastic course! I have very very basic HTML, CSS, and JS experience and this course provides a straightforward explanation of some great animation options that does not exceed my current skillset. You don't need to have years of website design experience to pick up SVG animation, and this course proves it. Minor suggestion, Adobe Illustrator has been updated so there are some subtle changes between the version used in this course and the new version, but otherwise, no problems at all.

The instructor was clear and informative and examples were enjoyable to work through. Production quality was great.

I would have liked to have seen even one or two extra examples involving more complex techniques, but the techniques taught in the course can be used to create more complicated animations with some practice.

Easy learning through examples.

The SVG images he uses were created using ADOBE. The files are available for download.

INKSCAPE USERS:

For those wanting to use Inkscape (which is what I used), I recommend saving in PLAIN SVG format. For the coding done in CSS to work, you will need to remove the similar code which is present in the text you paste under the HTML section. If this is not done, the HTML code will override what you enter under the CSS section.

Well paced course for those who already have a basic understanding of html and CSS. Good examples and well explained steps.

I've learned really cool things dealing with CSS and SVG, although it was beginners only, I feel like if I go and continue to play around with this stuff, I can really further everything this course taught me.

Very poor content.. No detailed advanced designs. very bare basic stuff covered