linescape

Designed background lines for the web: bands, sweeps, wiggles, loops and swirls behind your content, placed on purpose and rebuilt for every size.

npm install linescape

Open the playground →Read the docs

Placed on purpose

Centred, corner to corner, through a point at an angle: positions read like CSS background-position.

Right at any size

Positions are relative, thickness and wave sizes stay in pixels, so lines keep their character from phone to wide screen.

Wiggles, loops and swirls

Seven patterns, cursive loops, spirals and kinks, on straight lines, curves, arcs and rings.

Thick, if you like

Hundreds of pixels wide is a first-class use: bands, hollow lines, tapers, parallel stripes.

Gradients and colour along the line

Solid, linear and radial paint, or colour that shifts from one end of the line to the other.

Animated, gently

Draw on load, when scrolled into view or with the scroll; flowing dashes; waves that travel. Reduced motion respected.

Presets

Starting points: spread one and change what you like. Each opens in the playground.

In React

import { linescapeParentStyle } from "linescape";
import { Linescape } from "linescape/react";

export function Hero({ children }) {
  return (
    <section style={linescapeParentStyle}>
      <Linescape line={{
        path: { from: "left 80%", to: "right 30%", bend: 0.08 },
        features: [{ type: "loop", at: 0.55, radius: 50 }],
        width: 48,
        paint: "#7c5cff",
        animate: { draw: true },
      }} />
      {children}
    </section>
  );
}

The line is redrawn for the section's real size whenever it changes. See getting started for Next.js, several lines, SVG output and the full spec.