Hello friends. 🦄
This edition is a little special as it’s the last one.
🍺 We started this newsletter exactly a year ago after meeting in Brussels for some beers, and boy – it’s been a whirlwind year.
Writing a newsletter was new for both of us and we’re so lucky to have found so many people to share our excitement – 3000 people to be precise. 🤯
However - There’s been some big changes recently. Cassie joined the GreenSock team and Louis has some mysterious projects coming in late 2021✨
We’ve decided to stop running this newsletter as we have less time available and can’t give it the focus it deserves. But don’t be sad, we’re still only an email or tweet away 🤗
Enjoy this last edition and thank you again for all your support and the lovely messages we received, it was a pleasure for both of us.
We couldn’t have asked for better readers! 🌈
🎨 Article
Shadows are back in trend, but sometimes the CSS box-shadow property can be limited.
In this article by Joel Olawanle you’ll learn to create more advanced shadows with SVG filters!
Filters are so powerful that you can even create inset shadows or combine multiple shadows at once 🤯
Read ‘ Adding Shadows to SVG Icons With CSS and SVG Filters ‘
✨ Fun demos
Boring Avatars – view website
This super cute website made by Hayk An and Josep Martins lets you generate random SVG avatars based on a person’s name. You can also play with various patterns or colours!
We love seeing generative SVG in the wild! 😄
Complex responsive clipping in CSS – view demo
If you ever needed to crop an image with a custom SVG shape whilst also making it responsive, this demo may help you. Louis’ article shows you how to accomplish tricky masks by combining the power of the CSS mask-image property with inline SVG 🤿
Read the article: ” Perfect Tooltips With CSS Clipping and Masking”
Musically-animated Burger Band – view demo
If you haven’t hung out with Alex Trost during his Component Carousel stream - you’re missing out. This animated burger band was the result of an excellent episode with Andrew Rubin.
The SVG is animated using GreenSock and they hooked into the Web Audio API to sync the animation with the music 🎶
Check the live stream to see how it was made
Accessible SVGs – view demo
A11y Queen Carie Fisher wrote an extensive article to explain some common patterns for SVG accessibility.
The demo that goes along the article is really interesting and includes a table that sums up all the results in different operating systems and browsers 🧭
Read the article: “Accessible SVGs: Perfect Patterns For Screen Reader Users”
🌐 Stay connected
If you’ve enjoyed learning about SVG and still have demos to share or questions to ask - we have just the thing - a whole SVG Animation slack community for you to call your own.
We look forward to seeing you in there! 🥳
Join now and let’s have a chat
🧠 Carry on Learning
If you want to take your SVG skills to the next level - Cassie is throwing her workshop again this September!
5 sessions of learning, experimenting and digging in to SVG and web animation.