An animated radial gradient mask over text in CSS

I saw a cool text effect on Nikhil’s blog recently, where the big “Hello!” on his website has some rings masking the word “hello” that produce a cool effect, and I thought I’d try to replicate it. Here’s the final result, which I’ll explain further, and I want you to open it and be ready to poke at it and change some things: See the Pen Radial gradient mask over text by Cassidy (@cassidoo) on CodePen. It was a fun little experiment! The font The main thing that was particularly (and surprisingly) challenging was picking a font that worked well. Whatever font I picked needed to have a perfectly circular letter “o” for the “stripes” to show up well. I used Fredoka because it had that circular “o” character, and I liked that it was a nice rounded sans serif font. CSS mask + repeating-radial-gradient The CSS mask property lets you mask/clip elements. It’s typically used on images, but doesn’t have to be! Now when I say “mask” or “clip” here, I mean literally hiding aspects of it. The…