When you enroll through our links, we may earn a small commission—at no extra cost to you. This helps keep our platform free and inspires us to add more value.

Development
SkillShare logo

Creative Coding: Animating SVG with Simple CSS Code

Unlock creativity with Skillshare! Learn acrylic painting, AI writing, graphic design, and photography.

     0 |
  • Reviews ( 0 )
Free
Creative Coding: Animating SVG with Simple CSS Code

Related Courses

This Course Includes

  • iconskillshare
  • icon0 (0 reviews )
  • icon27 minutes
  • iconenglish
  • iconOnline - Self Paced
  • iconcourse
  • iconSkillShare

About Creative Coding: Animating SVG with Simple CSS Code

Welcome! Intro to the classes

Goals of the classes

Tools

Materials

Intro to SVG

Intro to CSS (only for non-coders)

SVG code

Embedding SVG in HTML document

CSS Animations

Animating selected parts of SVG graphics

Codepen - useful tool

Class Projects

What You Will Learn?

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