Gooey Warping SVG Numbers | Frontend Horse

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.

If you’re in the position to help, here’s a list of ways you can help Ukraine, and ways you can help trans youth in Texas.

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.

Gooey Warping SVG Numbers - Frontend Horse — frontend.horse See how Fabio Ottaviani cleverly uses SVG filters and other SVG tricks to animate this fun countdown!

CodePens

Here’s a few CodePens I really enjoyed over the past week.

Navigation Stacked Clip Path Animation — codepen.io

Cyd Stumpel makes great use of clip-path and CSS custom properties for this wonderful navigation transition.

Cubic Clock — codepen.io

Adam Kuhn with another super stylish CodePen. 3D CSS, filters, a slick reflection, and a nice color palette.

Callout components — codepen.io

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.

Upcoming Shows

Generate Images with Code using Cloudinary! - Frontend Horse — frontend.horse

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.

Your neigh-bor,

Alex