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 • Edited

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

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

Collapse
 
caseycole589 profile image
Casey Cole • Edited

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

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

Thx!