Howdy, partner. It’s been an awful week between Ukraine and Texas, and my heart breaks for the innocent victims of the world’s tyrants.
Gooey Warping SVG Numbers Article
This countdown CodePen by Fabio Ottaviani is so fun, and uses two great techniques!
As the numbers count down, the 30+ circles slide into place to make the next number. How do they know where to go? Turns out there’s a couple handy functions to help with that.
There’s a great, gooey feel to the edges of the numbers as they animate. Fabio makes it happen by combining three specific filters, one after the other.
This article has a few interactive demos so you can see exactly what effect the filters are having!
I hope you enjoy reading it as much as I enjoyed writing about it.
Here’s a few CodePens I really enjoyed over the past week.
Cyd Stumpel makes great use of clip-path and CSS custom properties for this wonderful navigation transition.
Adam Kuhn with another super stylish CodePen. 3D CSS, filters, a slick reflection, and a nice color palette.
Frontend Horse community member Dom Jay designed and built some really nice callout components for their blog. I really like the decorative SVG elements in the background.
This Thursday we’ve got our good friend Colby Fayock back on to teach us how to use Cloudinary’s incredible image APIs to create just about anything we want!
Thursday, March 3, 12:00 PM EST
So long, partner
That’s it for this week. I hope next week brings with it better days. Regardless, I hope you and your loved ones are safe.
Thanks for reading, you and the rest of the community have truly helped get me through the loneliness of the pandemic. Let me know if I can repay the favor.