CSS/SVG Art & Animation: A Curated Collection of Useful Resources & Tutorials

Annie 🦄⚡️
3 min readAug 10, 2020
Photo by Mr TT on Unsplash

Originally published as a thread on Twitter, I wanted to compile this list of CSS and SVG resources all in one place for easy reference. I’ve updated some of the resources and as a bonus, also added additional information and useful tools that were not on the original thread.

Who Am I?

I’m a designer-turned-developer who started my #100DaysOfCode journey in April 2020 with an aim to get better at JavaScript. Somewhere along the way, I got derailed by some beautiful CSS art I was seeing from other developers on the platform. It was a complete mystery but as I started to explore this new world, I found it a beautiful fit for my designer/artist side.

On Twitter, people would often ask me about tutorials and how to get better. To be honest, I don’t really follow tutorials. I love working on my own ideas and googling as needed when I got stuck or needed to dive deeper to understand something. I think this is a great way of bringing your own ideas to life and keeps you challenged!

That said, tutorials & documentation play a HUGE role in my learning. So, without further ado, here are some resources I like. I hope they’ll be beneficial to you!

CSS art

  1. A great place to start
  2. Great tutorial aimed at the beginner with a free video course
  3. Master shapes; They’re a cornerstone for creating CSS art
  4. How to draw with gradients
Annie 🦄⚡️

Designer // Developer | ENFP-T ♐ | 🌏 Traveller | Optimist 🥛 | Suffers from FOMO & analysis-paralysis