<div class="circle" id="app" style="--ln:28;">
  <b>mystery</b>
  <strong style="--d:0;--h:0;">silence</strong>
  <strong style="--d:1;--h:12;">sound</strong>
  <strong style="--d:2;--h:25;">storytelling</strong>
  <strong style="--d:3;--h:38;">surprise</strong>
  <strong style="--d:4;--h:51;">symbolism</strong>
  <strong style="--d:5;--h:64;">synchronocity</strong>
  <strong style="--d:6;--h:77;">synergy</strong>
  <strong style="--d:7;--h:90;">wholeness</strong>
  <strong style="--d:8;--h:102;">witnessing</strong>
  <strong style="--d:9;--h:115;">art</strong>
  <strong style="--d:10;--h:128;">clearing</strong>
  <strong style="--d:11;--h:141;">connectedness</strong>
  <strong style="--d:12;--h:154;">discernment</strong>
  <strong style="--d:13;--h:167;">facing darkness</strong>
  <strong style="--d:14;--h:180;">healing</strong>
  <strong style="--d:15;--h:192;">intuition</strong>
  <strong style="--d:16;--h:205;">listening</strong>
  <strong style="--d:17;--h:218;">love</strong>
  <strong style="--d:18;--h:231;">movement</strong>
  <strong style="--d:19;--h:244;">music</strong>
  <strong style="--d:20;--h:257;">mystery</strong>
  <strong style="--d:21;--h:270;">non-attachment</strong>
  <strong style="--d:22;--h:282;">non-judgment</strong>
  <strong style="--d:23;--h:295;">not knowing</strong>
  <strong style="--d:24;--h:308;">quickening</strong>
  <strong style="--d:25;--h:321;">re-membering</strong>
  <strong style="--d:26;--h:334;">sensing</strong>
  <strong style="--d:27;--h:347;">service</strong>   
</div>
<fieldset>
  <legend>Controls</legend>
  <label>Circle Size
    <input type="range" min="6" max="40" value="12" oninput="app.style.setProperty('--c', this.value+'rem')" />
  </label>
  <label>Font Size
    <input type="range" min="1" max="10" value="5" oninput="app.style.setProperty('--fz', this.valueAsNumber)" />
  </label>
</fieldset>
div {
  --c: 12rem;
  --fz: 5;
  --h: 10;
  aspect-ratio: 1;
  border-radius: 50%;
  inline-size: 25rem;
  position: relative;
}
b {
  transform: translate(-50%, -50%);
}
b,
strong {
  color: hsl(var(--h), 55%, 50%);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  position: absolute;
  /* translate: -50% -50%; */
  white-space: nowrap;
}
strong {
  inline-size: var(--c);
  padding-inline-start: var(--c);
  transform: translate(-50%, -50%) rotate(calc(var(--d) * 1deg * (360 / var(--ln, 1))));
  /* rotate: calc(var(--d) * 1deg * (360 / var(--ln, 1))); */
}
strong:nth-of-type(4n+1) { font-size: calc(1em + (var(--fz) * 0.050em)); }
strong:nth-of-type(2n+2) { font-size: calc(1em + (var(--fz) * 0.075em)); }
b, strong:nth-of-type(4n+3) { font-size: calc(1em + (var(--fz) * 0.095em)); }

* {
  box-sizing: border-box;
  margin: unset;
}
html {
  block-size: 100%;
}
body { 
  display: grid;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-block-size: 100vh;
  place-content: center;
}
fieldset {
  background: hsl(0, 0%, 95%);
  border: 1px solid hsl(0, 0%, 80%);
  font-family: monospace;
  inline-size: calc(100% - 2em);
  inset-block-end: 0;
  margin: 1em;
  position: fixed;
}
label {
  align-items: center;
  display: inline-flex;
  gap: 2ch;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.