Text on a path

Full motion specification

How the movement works

Use it to run text along a shape: around a logo, along a road, river or wave, or as a looping band of text.

1. 01Path: y = 118 + 42·sin(2πx ÷ 330 + 0.6) for x = −70 to 609, shown 6 px below as a navy dashed line (14/10, width 5).
2. 02"ALONG THE LINE • " (42 px, bold, 2 px letter spacing) is repeated. Each character is placed at its arc-length position on the path and rotated to the path direction.
3. 03The text moves along the path by the length of one copy of the string every 4.7 s, so the loop joins up.
4. 04Letters are white; the bullet is yellow.