Circular Text

Select the ring and drag across it: it comes out as one string, in order, because this is a single <textPath> and not twenty-eight rotated spans. Find-in-page matches it too. The centre slot does not turn with the ring — the two are separate layers, and a seal whose mark spins with it is a spinning logo, which is a different and much worse thing.

The path's sweep is flipped, not the string — the glyphs read the right way round and the DOM is unchanged, where reversing the text would give correctly ordered glyphs that are each individually mirrored and a phrase no screen reader could read. The turn follows the path, so text set anticlockwise never slides backwards through itself. startOffset={25} is a quarter turn measured along the phrase, so on this badge it starts at nine o'clock rather than twelve — the same number would start a clockwise badge at three.

startOffset turns the ring; it never shortens it. Every badge here carries the same phrase all the way round — count the separators. It is a rotation on the text and not SVG's startOffset along the path, which with a textLength of the whole circumference would have pushed the tail past the path's end, and glyphs that fall off a path are not rendered at all. The value wraps rather than clamping, so 125 is the same badge as 25 and -25 is the same badge as 75.

The radius is derived from the box and the text's own height, so there is no radius prop to disagree with size — the two only agree until somebody changes one of them, and the symptom is text clipped at the top of its own badge. The repeat count is derived too, from an estimated glyph advance; the fit is not, because the textPath carries textLength equal to the circumference, so the ring closes exactly whatever the estimate said.

repeat is the seam the derivation exposes: pass it when you want the count exact, because working it out properly needs the phrase's measured width, which needs a canvas, a layout effect and a client boundary. Both of these override the estimate and neither breaks — the textPath carries textLength equal to the circumference, so the renderer spreads the slack and the ring closes on itself either way. A wrong count costs tracking, never a gap and never an overlap.

The ring is aria-hidden by default and that is deliberate: SVG text is real text, so a seal repeating its phrase three times would be announced three times in every screen reader and show up three times in find-in-page. Pass label and it becomes one role='img' announced under your name instead. Leave it off — the common case — when the badge is a mark.

The box reserves size rather than fixing it, so a centre slot larger than the badge grows it instead of overflowing into whatever is next on the page — the ring on the left is 160px around a 190px card. An empty text with a centre slot is just the centre slot, correctly placed; an empty text with nothing in the middle renders nothing at all rather than an empty circle.

spin={false} on the left, and on the right the same badge under Reduce Motion — turn it on in your OS and reload, and the two are the same picture. That is also what an install renders with the stylesheet import forgotten: the phrase set all the way around its circle, at the right radius, evenly spaced, legible. The rotation is the flourish, not the mark, which is why that path needed no separate design.