Skip to content

Examples

Horizontal

The default direction, and the same marquee with a negative sensitivity, which reverses it.

Skewed by the velocity

The skew is CSS: the track's transform reads --marquee-velocity and clamps it. The component knows nothing about it.

Circular

The same class, a different transform.

Circular, faster and reversed

Why are there two radius parameters?

  • outer_radius sets the size of the svg viewBox. radius sets the size of the <path> the circular text is written on.
  • outer_radius needs to be greater in order to avoid cutting the text, since the <svg> always hides the overflowing content.