Placing Text Along a Path Without Animation

The CSS offset-path property—formerly known as motion-path—is often associated with moving elements along a trajectory. But the property doesn't require animation at all, and a recent demo by yuanchuan shows how to use it for static placement of text on a circle.

Elements placed via offset-path are positioned at a single point on the path, so an entire word like <span>Chris</span> would sit at one coordinate. The technique here breaks the string into individual letter spans, each with its own offset-distance value to distribute them along the curve.

Each letter span receives the circular path definition:

offset-path: path('M 0 200 A 200 200 0 0 1 400 200')

Distances for individual letters are computed with demo-specific math that leverages a custom property per span, avoiding repetitive :nth-child rules:

offset-distance: calc(8% + var(--n) * 89.5% / var(--total));
<div style="--total:14;">
  <span style="--n:0">C</span>
  <span style="--n:1">S</span>
  <span style="--n:2">S</span>
  <!-- ... -->

The same principle works beyond typography—any set of elements can be arranged along a path this way.

Comparison with Earlier Approaches

  • An older CSS technique required each span to use transform: rotate() combined with a shared transform-origin point offset from the letter, which is far more cumbersome.
  • SVG offers native curve-text support without requiring markup splitting, making it cleaner in that regard.
  • Since this method requires splitting text into spans, the parent element should carry an aria-label for accessibility—a step that underscores the somewhat hacky nature of the approach.