DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Creating a Word Wheel in CSS
Mads Stoumann
Mads Stoumann

Posted on

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:

Word Wheel

β€” 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(' ')
Enter fullscreen mode Exit fullscreen mode

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('')
Enter fullscreen mode Exit fullscreen mode

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

app.style.setProperty('--ln', arr.length);
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

--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)));
Enter fullscreen mode Exit fullscreen mode

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):

Top comments (9)

Collapse
caseycole589 profile image
Casey Cole

Doesn't work on firefox.

Collapse
madsstoumann profile image
Mads Stoumann Author • Edited on

It works fine in the latest version of Firefox (103.0.1) Which version are you using?
I'm on Mac (can not test on PC).

Collapse
katye333 profile image
Katye Stevens

I just tested on a Mac and it works fine on Firefox (version 103.0.1) but not on Chrome (version 103.0.5060.134)

Thread Thread
madsstoumann profile image
Mads Stoumann Author

The individual transforms (rotate, translate) only works in the latest build of Chrome (104 and onwards)

Collapse
caseycole589 profile image
Casey Cole • Edited on

104.0b5 not working in chrome on pc for me either, so maybe its just my computer. Didn't work on chrome in girlfriends macbook either.
Image description

Thread Thread
madsstoumann profile image
Mads Stoumann Author

It's because of individual transforms - see "update".

Collapse
nstvnsn profile image
Nathan Stevenson

Works well on Firefox v103.1.0, viewing from my android smartphone.

It does not play nice with the Samsung Internet app v17.0.7.34.

Either way, thanks. My frontend skills are...ugh... so I always enjoy seeing different ideas to potentially use in a project.

Collapse
billypentester profile image
Bilal Ahmad

amazing

Collapse
madsstoumann profile image
Mads Stoumann Author

Thx!

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.