Creative Coding: Animating SVG with Simple CSS Code | Aga Naplocha | Skillshare
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
40 students are watching this class

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

866633cf

1,428

Students

11

Projects

  • --
  • Beginner
  • Intermediate
  • Advanced
  • All Levels
  • Beg/Int
  • Int/Adv

Level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

Aga Naplocha

Creative coder & designer

Hello, I'm Aga! I'm a coding designer currently working at Adobe.

I love sharing with my knowledge and experience this is why I'm working on The Awwwesomes - an initiative, which encourages people to start learning coding and designing awwwesome websites!

You can visit me at:

- http://twitter.com/aganaplocha
- https://www.instagram.com/theawwwesomes/
- https://twitter.com/the_awwwesomes
- http://theawwwesomes.org

 

 

See full profile

Report class