Creative Coding: Animating SVG with Simple CSS Code

Skillshare Creative Coding: Animating SVG with Simple CSS Code

Register & Get access to index
Extra Resources
All the resources are in the folder.
Creative Coding: Animating SVG with Simple CSS Code

About This Class
If you have ever dreamed of making your graphics alive, it’s high time to knuckle down to work. Explore fun & creative coding with Aga Naplocha - coding designer, currently working at Adobe and co-organizer of The Awwwesomes workshops. In these classes, you will learn step-by-step how to animate vector graphics saved in SVG format using simple CSS animations.
Don’t worry if you don’t have experience with coding! You will have fun as well and be able to do the exercises. The course is adjusted to people with different coding levels (newbies, beginners and CSS fans).
By the end, you will be able to make designs alive straight in your web browser. Just like in this example.
Practice makes master, so the course includes a set of exercises.
The course is destined for:
- people who like coding & designing,
- designers who would like to animate their vector works with the code,
- everyone, who likes to create things on the computer and the web.

Project Description
For the class project, everyone is encouraged to select one vector graphics in SVG format available in the exercises package and create their own animation. Designers are welcome to use their own SVG artwork.
Download the course files ('', under 'attached files') and apply your own CSS animations to the chosen SVG files. You decide what will be animated.
Show us your work by sharing code snippets, screenshots or videos etc. or link to the Codepen in your project. If look for help, feel free to ask any questions in the 'Community' section.
Good luck!
May CSS animations and SVG be with you! :)

You don't have permission to view the spoiler content. Log in or register now.
Random Guy
First release
Last update
0.00 star(s) 0 ratings

More resources from Random Guy