v156 · textPath side · composition

Orbit ticker

SVG 2 marks side as animatable, which makes it a state you can flip mid-flight. This ticker orbits a ring by animating startOffset — that part runs in every browser — while side chooses the lane: outside the ring or inside it. Flip lanes while it flies, or let it swap lanes automatically on every lap.

Fly the ticker

A ticker text orbiting a ring, on the outside or inside lane ON AIR NOW·PLAYING·SIDE·B·—·TEXT·ON·THE·OTHER·SIDE·

The moving parts

<textPath href="#orbit" startOffset="42%">…</textPath>  <!-- animated -->
<textPath href="#orbit" side="right">…</textPath>       <!-- the lane -->

/* SVG 2: side — Value: left | right · Initial: left · Animatable: yes */

The orbit animation honours prefers-reduced-motion: with reduced motion set, the ticker starts paused and moves only when you press Play. On browsers without side, the lane flip sets the attribute but the ticker visibly stays in the outside lane — the state line reports the measured truth either way.

see also