Exploring circular text in CSS and SVG

I decided I’m sick of the grid. I want to align some text to a circle.

As it turns out, it’s not so hard to do this with SVG. You don’t even need a complicated path element. Just grab yourself a <circle>, like so:

With this pen, I wanted to explore depth, so I adjusted the placement, opacity, and size of the text in each circle.

And of course, if you know me, you know I’m into my colors. So I thought, well, rainbows are sort of a circle too.

Writing creative CSS

My best moments in CSS are when I find out something new, and just keep riffing on it endlessly. I’ve got a whole site dedicated to this rainbow situation here:

This is how you learn in design school. You take a piece of paper, and you cut it up and really focus on how the shapes or colors or just one piece of it is interacting with the rest. And then, you figure out the best bits.