Creating a Word Wheel in CSS

Summer Holidays are meant to be relaxing, so I typically read a lot of books. This year, one of the titles I read, was Making and breaking the grid by Timothy Samara. A great and super-inspiring book.

In fact, a bit too inspiring! The book is filled with gems. So ... when I see something like this:

— I can't help myself. I just have to code it!

It's not super-complex. You take an array of words:

const arr = 'word word word etc'.split(' ')

Then you output it as whatever tag you want, in my case <strong>. For each entry, set a custom property with the current index:

arr.map((txt, index) => `
<strong style="--d:${index};">
  ${txt}
</strong>`).join('')

On the parent-element, set a custom property with the length of the array:

app.style.setProperty('--ln', arr.length);

NOTE: You don't need JavaScript for the word-wheel. It's perfecty fine to manually write a bunch of tags (see Codepen-example later).

In CSS, set the parent-element to position:relative, and all the children to:

strong {
  inline-size: var(--c);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  padding-inline-start: var(--c);
  position: absolute;
  translate: -50% -50%;
}

--c is the size of the circle.

We'll use rotate (now available as an individual transform in all browsers!) and our custom properties:

calc(var(--d) * 1deg * (360 / var(--ln)));

UPDATE: Since some people have issues with individual transforms, I've changed them to a "classic" combined value: transform: translate(-50%, -50%) rotate(calc(var(--d) * 1deg * (360 / var(--ln, 1))));

And that's it. I expanded the example with a dynamic hue, font-size and more. Play around with the controls in this Codepen (best viewed in full screen):