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.