CSS trig radial layout — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Radial Layout Lab</h1>
    <p class="pg-sub">
      Every dot below is positioned by CSS's own <code>cos()</code> and <code>sin()</code>.
      JavaScript touches each dot exactly once, to hand it an index — drag the sliders and
      watch CSS do the rest.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="wrap-controls">
        <div class="field">
          <label class="label" for="count">Items — <span id="countVal">6</span></label>
          <input type="range" id="count" min="3" max="12" value="6" step="1" />
        </div>
        <div class="field">
          <label class="label" for="radius">Radius — <span id="radiusVal">110</span>px</label>
          <input type="range" id="radius" min="40" max="150" value="110" step="1" />
        </div>
        <div class="field">
          <label class="label" for="stageWidth">Container width — <span id="stageWidthVal">100</span>%</label>
          <input type="range" id="stageWidth" min="40" max="100" value="100" step="1" />
        </div>
      </div>
      <div class="presets" style="margin-top: 14px">
        <button class="btn sm" data-preset="menu">Radial menu (8)</button>
        <button class="btn sm" data-preset="clock">Clock ticks (12)</button>
        <button class="btn sm" data-preset="tight">Tight cluster</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result — no JS ran after you dragged</div>
      <div class="stage-wrap" id="stageWrap">
        <div class="stage" id="stage" style="--count: 6; --radius: 110px;">
          <div class="hub">circle<br />center</div>
        </div>
      </div>
      <div class="status" id="status" style="margin-top: 12px">
        <span class="dot good" id="dot"></span
        ><span id="statusText">6 items, radius 110px — positioned entirely by CSS.</span>
      </div>
      <p class="hint">
        Drag "Container width" down — the whole circle rescales instantly. That's plain CSS
        responding to layout, not a resize listener recomputing anything.
      </p>
      <div class="code" id="codeOut" style="margin-top: 10px"></div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.