Gracelle Mesina

Nuthin' but a g-thang, baby.

24

1

Animating Simple SVG Icons with CSS

Hey everyone!

The first class I plan to teach is how to animate a simple SVG icon using CSS. Lately, I've been playing around with this concept a lot at work, so I wanted to share that knowledge with other digital visual designers and amateur front-end coders. Hopefully, it's a topic of interest to others out there! Thanks for tuning in on my progress.

Class Topic & Project

My class name is a work in progress. I want people to be able to see the value in learning this skill right away with their first interaction with it. Here are some ideas:

  • Animating a simple SVG icon with CSS
  • Animate your own SVG logo with CSS
  • CSS Animation: give your own SVG logo some personality

If these working titles don't explain the project well, to summarize, I want my future students to create their own simple SVG graphic (whether it's an icon or a personal logo) and code it themselves to animate it in whichever way they like.

Here's a basic outline of the videos to start off with:

  1. Introduction with personal examples (of what my students will eventually be able to do)
  2. Understanding the basics of SVG
  3. Designing your own icon/logo (basic process: sketching, digitizing, exporting)
  4. Decoding and organizing your SVG code (to have the students understand their own creations through the syntax)
  5. Learning the basics of CSS animation #1: Look & Feel
  6. Learning the basics of CSS animation #2: How to get things moving
  7. Learning the basics of CSS animation #3: All about timing
  8. Cleaning your code (aka CSS animation best practices) & final thoughts

My official outline is in process here.

Feedback appreciated!

Update: I have finally decided to revive this course, as I recently did an in-person workshop at work which received great feedback. Stay tuned!

Comments

Please sign in or sign up to comment.