Circular Text

`<pura-circular-text>` lays text on a circular SVG path (`textPath`) and spins it continuously around its center, the classic badge or sticker seal for hero sections. The circle, the path and the text (justified around the exact circumference via `textLength`) are all produced by the pure template, so the static seal renders on the server and before JS; the rotation is a single CSS `@keyframes` on the SVG, zero per-frame JS. The default slot holds optional center content (a logo, an icon, an image) that does not spin. `radius` sizes the circle, `repeat` tiles the text around it, `speed` sets seconds per revolution and `direction` flips it to counter-clockwise. `paused` and `pause-on-hover` stop the spin, and `play()` / `pause()` / `toggle()` drive it imperatively. The SVG copy is `aria-hidden`; a visually-hidden span keeps the text readable, and reduced motion shows the static circle. Tokens: `--pura-circular-text-size`, `--pura-circular-text-color`, `--pura-circular-text-weight`, `--pura-circular-text-tracking`, `--pura-circular-text-transform`, `--pura-circular-text-duration`, `--pura-circular-text-diameter`. Each instance registers in `window.__puraCircularTexts` by `data-pura-id` and mirrors state in `data-pura-circular-text-*` attributes.

Preview

<!-- hero badge: spinning seal around a logo -->
<pura-circular-text text="LEARN MORE • EARN MORE • GROW MORE • " radius="90" speed="18">
  <img src="/logo.svg" alt="Acme" style="width: 80px;" />
</pura-circular-text>

<!-- short phrase tiled around the circle, slow counter-clockwise spin -->
<pura-circular-text text="OPEN SOURCE ★ " repeat="3" radius="64" speed="30" direction="ccw"
  style="color: #7c3aed; --pura-circular-text-size: 12px;">
</pura-circular-text>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/circular-text.js"></script>

import "./pura/lib/circular-text.js";