29
CSS/SVG Art & Animation: A Curated Collection of Useful Resources & Tutorials
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.
Annie 🦄⚡@anniebombanie_
I often get asked CSS/SVG tutorials.
While there's nothing like that sweet sweet struggle of working on your own ideas 😳, they definitely have a place in my learning.
So, here are some resources I like!
🧵16:55 PM - 13 Jul 2020
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.
Annie🦄⚡@anniebombanie_I started my #100DaysOfCode journey to work on JS, but got mad sidetracked into #CSS art by @ellie_html 💜
This was new for me & the learning has been awesome!! A snapshot of some stuff I've made since I started.
Code is all on @CodePen
👉 codepen.io/anniebombanie20:34 PM - 23 Jun 2020
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!
A great place to start:https://www.creativebloq.com/amp/features/get-started-with-css-art
Great tutorial aimed at the beginner with a free video course:https://medium.com/coding-artist/a-beginners-guide-to-pure-css-images-ef9a5d069dd
Master shapes; They’re a cornerstone for creating CSS art:https://css-tricks.com/the-shapes-of-css/
How to draw with gradients:https://webdesigntips.blog/web-design/css-tricks/drawing-images-with-css-gradients/
Another insightful article on using gradients:https://fossheim.io/writing/posts/css-polaroid-camera/
How I created my one div iPad, with additional one div art resources:https://frontend.horse/issues/3/
Tips to get better as you advance:https://css-tricks.com/advice-for-complex-css-illustrations/
Understanding key animation principles will take you far:https://www.cgtarian.com/animation-tutorials/disney-animation-principles.html
w3schools has all the properties you need!:https://www.w3schools.com/css/css3_animations.asp
Great guide on CSS animation for beginners:https://thoughtbot.com/blog/css-animation-for-beginners
Incredibly comprehensive guide to CSS animation:https://blog.hubspot.com/website/css-animation
Complete foundation video series on CSS animation:https://www.youtube.com/channel/UC4QVZ552Q-dXIdMSc2cewcA
More tips & tutorials to help you level up!:https://cssanimation.rocks
Collaborative coding with great CSS animation live streams:https://www.youtube.com/keyframers
Beginner-friendly guide on all things SVG:https://www.creativebloq.com/features/the-complete-guide-to-svg
Practical easy-to-understand guide to using SVGs:https://svgontheweb.com/
SVG (and CSS) properties, and how to use them:https://css-tricks.com/svg-properties-and-css/
Must-know on how to scale SVGs:https://css-tricks.com/scale-svg/
Understanding SVG filter basics:https://tympanus.net/codrops/2019/01/15/svg-filters-101/
Sara Soueidan’s excellent 49min video recording on SVG filters:https://www.sarasoueidan.com/blog/svg-filters/
Insight into how SVG filters were used to create an amazing animation:https://frontend.horse/issues/6/
Check if properties you’re thinking of using are supported cross-browser:https://caniuse.com/
A must for responsive border-radius:https://9elements.github.io/fancy-border-radius/
Easily create clip-paths with this indispensable tool:https://bennettfeely.com/clippy/
Refine your animation eases with this handy visualiser:https://cubic-bezier.com/
Optimise your SVGs for smaller file sizes:https://jakearchibald.github.io/svgomg/
You may wonder, what’s the point of CSS/SVG art or spending hours doing something that honestly, we probably won’t get paid for?
My response: “Great question! It’s helped me gain a deeper insight into CSS properties I don’t typically use & I’m able to sometimes apply those solutions practically at work as well.
But another answer is: What’s art good for? I do it for the pure process of creation & expression as well.”
Sounds pretty good right? And finally, in case you’re wondering, “So... how do I get better?”
Sorry, no shortcuts. Practice, practice, practice. I spend hours learning, trying, failing, refactoring, succeeding. You just gotta be brave enough to suck at something new. Good luck!!
29