Paths, patterns & features
A line is a path (where it goes), patterns (what it does along the way) and features (what happens at a point).
Positions
Points use CSS background-position syntax, or [x, y] pairs of px and percentages. Percentages are of the element's width (x) and height (y).
"center" "left 30%" "top right" "75% 20%" "right 40px top 10%" [120, "50%"]Points outside the element are fine: lines often start off-screen. An end that sits on or beyond an edge is extended outward along its direction, far enough that its cap never shows, however thick the line.
Paths
| Path | Meaning |
|---|---|
{ through, angle } | A straight line through a point, edge to edge. 0° is horizontal; positive angles turn clockwise. |
{ from, to, bend? } | Straight, or one smooth curve. bend is the sideways bulge as a fraction of the length; positive bulges left of the direction of travel. |
{ points, smooth? } | A smooth curve through points. smooth: 0 gives straight segments with corners. |
{ arc: { center, radius, start, end } } | Part of a circle. Angles in degrees, 0° pointing right, clockwise. radius takes px or a percentage of the width. |
{ ring: { center, radius } } | A closed circle, or an ellipse with radius: [x, y]. |
{ d, viewBox? } | Your own SVG path data, one subpath. With a viewBox it's stretched to the element; without, coordinates are px. |
{ path: { through: "center", angle: -12 }, width: 90 }
{ path: { points: ["left 80%", "35% 30%", "65% 70%", "right 20%"] }, width: 10 }
{ path: { ring: { center: "center", radius: ["44%", "40%"] } }, width: 4, dash: { dots: 14 } }Patterns
Patterns displace the line sideways as it travels, following it however it curves. Sizes are px, so a wave keeps its shape when the element changes size; only the number of repeats changes. A whole number of repeats always fits the range (the wavelength is adjusted slightly), so a pattern ends back on the line instead of breaking off.
wave · ridges · steps · sawtooth · scallop · bumps · coil| Option | Default | Meaning |
|---|---|---|
type | required | One of the seven above. |
amplitude | per type (24; coil 40) | Sideways size in px. For coil, the loop radius. |
wavelength | per type | Length of one repeat along the line, in px. |
range | [0, 1] | The part of the line it covers, as fractions of the path. |
ease | 0 | px over which the amplitude ramps in and out at the ends of the range. |
phase | 0 | Offset along the pattern, 0–1 of a wavelength. |
side | "left" | Which side one-sided patterns (scallop, bumps, coil) sit on; flips the others. |
Patterns can be stacked (a long wave plus a tight wiggle) or put on different ranges:
patterns: [
{ type: "wave", amplitude: 50, wavelength: 600 },
{ type: "ridges", amplitude: 8, wavelength: 30, range: [0.3, 0.7], ease: 60 },
]Features
| Feature | Meaning |
|---|---|
{ type: "loop", at, radius?, roundness?, turns?, side? } | A loop at at (0–1 along the line). radius (default 50) is half its height. roundness runs from a cursive teardrop (0) to nearly a circle (1), default 0.4. turns repeats it. |
{ type: "spiral", at, radius?, turns?, inner?, side? } | At "start" or "end", the line curls into a spiral, tightening to inner × radius. |
{ type: "kink", at, length?, angle?, side? } | A sharp spike, angle degrees wide at its tip. |
features: [
{ type: "loop", at: 0.25, radius: 45 },
{ type: "kink", at: 0.55, length: 70, angle: 30 },
{ type: "spiral", at: "end", radius: 70, turns: 2.5 },
]Patterns fade out around loops and kinks, so a feature always starts from the plain path. A spiral at an end switches off that end's edge extension.