Animation

animate: {
  draw: { duration: 1200, delay: 0, easing: "ease-in-out", from: "start" },  // or just `true`
  flow: { speed: 60 },        // dashes march along the line
  undulate: { speed: 40 },    // patterns travel along the line
  trigger: "load",            // when draw runs: "load", "visible" or "scroll"
  repeat: 1,                  // how many times draw runs, or "infinite"
}

Draw

The line draws itself on, from its start, end or center. It works on every kind of line (bands, hollow, tapered, colour along the line) because the line is revealed through a mask that's drawn on, rather than by dashing the line itself.

animate: { draw: { duration: 2000 }, repeat: "infinite" }
animate: { draw: { duration: 2000, from: "center" }, repeat: "infinite" }

Triggers

trigger	Draws
`"load"`	As soon as the page loads (after `delay`).
`"visible"`	When the layer scrolls into view. `<Linescape>` watches with an IntersectionObserver; static SVG draws on load.
`"scroll"`	Follows the scroll position: the drawn end keeps pace with the bottom of the window as the element passes through it. Uses CSS scroll-driven animations; where they aren't supported, the line draws on load instead.

Flow

Dashes march along the line at speed px per second. Needs a dash.

{ ..., dash: [26, 14], animate: { flow: { speed: 80 } } }

Undulate

Patterns travel along the line at speed px per second, looping seamlessly. Undulating doesn't apply to tapered lines, along paint or off-centre bands.

{ ..., patterns: [{ type: "wave", amplitude: 26, wavelength: 220 }], animate: { undulate: { speed: 60 } } }

Reduced motion

With prefers-reduced-motion: reduce, drawing and flowing switch off and lines show in their final state. Undulating uses SMIL, which CSS can't switch off: <Linescape> leaves it out for reduced motion; static SVG from toSvg() can leave it out with { motion: false }.

Resizing

<Linescape> redraws lines when the element changes size without restarting animations that are running or have finished.