Staff Pick

Creative Coding: Animating SVG with Simple CSS Code

Aga Naplocha, Creative coder & designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
12 Videos (28m)
    • Welcome! Intro to the classes

      0:57
    • Goals of the classes

      0:35
    • Tools

      0:44
    • Materials

      1:07
    • Intro to SVG

      1:01
    • Intro to CSS (only for non-coders)

      4:40
    • SVG code

      1:18
    • Embedding SVG in HTML document

      2:16
    • CSS Animations

      5:28
    • Animating selected parts of SVG graphics

      6:30
    • Codepen - useful tool

      2:03
    • Class Projects

      0:51
56 students are watching this class

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 ('class-project.zip', 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! :)

Attached Files