Stroke & paint

Stroke

Option	Default	Meaning
`width`	`40`	px. Very thick lines (hundreds of px) are a first-class use.
`cap`	`"round"`	`"round"`, `"butt"` or `"square"`.
`join`	`"round"`	`"round"`, `"miter"` or `"bevel"`. Miters spike on thick zigzags.
`dash`		`[dash, gap, …]` in px, or `{ dots: spacing }` for round dots.
`taper`		`{ start, end }`: px over which the line narrows to a point at each end.
`opacity`	`1`	0–1. A line that crosses itself stays one even colour.
`blend`		A CSS `mix-blend-mode`, such as `"multiply"`.

{ ..., width: 12, dash: [36, 18], cap: "butt" }
{ ..., width: 12, dash: { dots: 26 } }
{ ..., width: 70, taper: { start: 180, end: 360 } }

Paint

paint is any CSS colour (default currentColor, so lines take the text colour), or a gradient.

paint: { linear: { angle: 90, stops: [{ offset: 0, color: "#ffd6c2" }, { offset: 1, color: "#ffeab8" }] } }
paint: { radial: { stops: [...] } }
paint: { linear: { ... }, box: "element" }   // span the element instead of the line
paint: { along: [{ offset: 0, color: "#ef476f" }, { offset: 1, color: "#06d6a0" }] }

Linear angles follow CSS: 0° points up, 90° right. A gradient spans the line's own box by default; with box: "element", several lines can share one gradient across the element. along changes colour from one end of the line to the other, following every curve and loop. Its stops must be colours linescape can blend: hex, rgb(), hsl() or named colours.

Bands

bands draws stripes along the line, each with its own width and paint, in order. Without an offset they share the centerline (draw the widest first); with offset (px, positive to the left of travel) they sit side by side, which makes parallel lines.

bands: [{ width: 90, paint: "#1d3557" }, { width: 56, paint: "#f1faee" }, { width: 22, paint: "#e63946" }]
bands: [{ width: 8, paint: "#7c5cff", offset: 20 }, { width: 8, paint: "#f4a261" }, { width: 8, paint: "#2a9d8f", offset: -20 }]

Hollow lines

outline: { width } paints only the edges, the given width each side; the middle is truly transparent.

{ ..., width: 80, outline: { width: 8 } }