@altpsyche/maths 0.2.1 → 0.4.0

package/README.md

@@ -18,6 +18,49 @@ const figure = {
 svgMarkup(at(figure, 0.5), viewMatrix(figure.extent, 'contain', 640, 360), 640, 360);
 ```
 
+## Axes and a plotted function
+
+<img src="docs/tangent.svg" width="720" alt="A parabola on a labelled grid, the region under it shaded to a point on the curve, the tangent at that point drawn, and the slope written as a number.">
+
+```ts
+import { axes, coordsOf, group, interval, numberPlane, plot, scaleOf, shape } from '@altpsyche/maths';
+
+const coords = coordsOf(
+  scaleOf(interval(-1, 4), interval(-4.6, 4.6)),
+  scaleOf(interval(-1, 9), interval(-2.4, 2.4))
+);
+
+group('graph', [
+  numberPlane('grid', coords, { stroke: faint, minors: 4 }),
+  axes('axes', coords, { stroke: pen, fill: ink, size: 0.26, tip: 0.18 }),
+  shape('curve', plot(coords, (x) => x * x), { stroke: drawn }),
+]);
+```
+
+A **scale** is the run of numbers an axis counts through and where that run lands in figure units.
+Two of them are a **coords**, and `pointOf` reads a pair of graph numbers as a point. The steps
+between ticks are one, two or five times a power of ten, because those are the numbers a reader
+adds up in their head.
+
+`plot` samples a function at a fixed count and joins the samples with cubics that leave each one at
+the slope the function has there. It cuts the curve where the curve leaves the graph, so a pole
+breaks in two instead of drawing a line up the picture, and the cut end sits on the edge rather
+than a sample short of it. The curve above is cut at x = 3, where the parabola meets the 9 its y
+axis stops at.
+
+`areaUnder` closes the region between a curve and a level line, `riemannBars` draws the bars the
+region is the limit of at the left edge, the right edge or the middle of each one, and `tangentAt`
+lays the tangent along the curve, cut where it leaves the graph. `slopeOf` reads the slope itself,
+which is what the number in the corner is.
+
+<img src="docs/tangent-strip.svg" width="960" alt="Four frames of the same figure side by side, the point walking up the curve and the shaded region growing behind it.">
+
+Four times of one figure, side by side. A moving picture in a README needs a GIF and this package
+has no encoder, so the strip shows the motion in a still.
+
+Both pictures are written by `svgMarkup`, which needs no browser, so `npm run demos` regenerates
+them and a test compares the bytes against the committed files.
+
 ## What it is built on
 
 **A figure at a time is data.** `at(figure, seconds)` is the whole public surface, and it is a
@@ -42,10 +85,18 @@ marks onto a two-dimensional canvas, which is what a recording needs, because an
 one surface. A test holds the two to emitting the same geometry and the same style for every
 mark.
 
+## The way in
+
+`pathFromData` reads an SVG `d` attribute as a path, which is the inverse of what the SVG painter
+writes. Without it the only shapes that exist are the ones the builders here make, so a glyph from
+a typesetter or an outline from a drawing program could not be trimmed, aligned or walked into
+another shape, and those are the operations this package is for. Every command is read, elliptical
+arcs included, and a command it does not know stops the read rather than being skipped.
+
 ## The line through the package
 
 **Values and timing** are below it: vectors, a transform, the four curves a change can travel
 along, and a value walked between keys. That half changes almost never. **Figures and painters**
 are above it. Nothing below the line imports anything above it, and a test says so.
 
-One door, no runtime dependencies. MIT.
+One door. MIT.

package/dist/figure/axis.d.ts

@@ -0,0 +1,75 @@
+import { type GroupNode } from './node.js';
+import { type Coords, type Scale } from './scale.js';
+import type { Fill, Stroke } from './mark.js';
+export interface NumberLineOptions {
+    /** The line, its ticks and the outline of its tips. */
+    stroke: Stroke;
+    /** The labels and the tips. Nothing is written where this is missing. */
+    fill?: Fill;
+    /** How big the labels are, in figure units. Nothing is written where this is
+     * missing. */
+    size?: number;
+    /** Where the line sits on the other axis, in figure units. */
+    at?: number;
+    direction?: 'across' | 'up';
+    /** About how many ticks are wanted. The step is a round number, so the count
+     * that comes back is near this rather than equal to it. */
+    ticks?: number;
+    /** How far a tick reaches across the line in total, half of it either side. */
+    tickLength?: number;
+    /** From the end of a tick to the label's own anchor. */
+    gap?: number;
+    /** How long the head at each end is. Nothing is drawn where this is zero. */
+    tip?: number;
+    /** How wide a head is across its base, against its length. */
+    spread?: number;
+    family?: string;
+    weight?: number;
+    /** Leaves the label at zero out, which is what a second axis crossing here
+     * wants, since both would otherwise write the same number in the same place. */
+    skipZero?: boolean;
+}
+/**
+ * One axis as a group: the line, the ticks under `ticks`, the labels under
+ * `labels`, and the tips under `tips`.
+ *
+ * Each tick and each label is named after the number it shows rather than by its
+ * position in the list. An animation naming a tick then follows that number when
+ * the axis is rebuilt with a different range, where a position would quietly
+ * follow whichever tick had moved into the slot.
+ */
+export declare function numberLine(name: string, scale: Scale, options: NumberLineOptions): GroupNode;
+/** Everything a pair of axes hands to each of its two lines. A figure wanting
+ * the two to differ builds them as two number lines instead, which is what that
+ * call is exported for. */
+export type AxesOptions = Omit<NumberLineOptions, 'at' | 'direction' | 'skipZero'>;
+/**
+ * Two number lines under one group, named `x` and `y`, each crossing the other
+ * at that other's zero.
+ *
+ * Where zero is outside an interval the line sits at the near edge of it instead.
+ * An axis drawn at a zero the graph never reaches is an axis off the picture, and
+ * a reader is left with labels along an edge that has no line on it.
+ */
+export declare function axes(name: string, coords: Coords, options: AxesOptions): GroupNode;
+export interface NumberPlaneOptions {
+    /** The lines standing on the ticks. */
+    stroke: Stroke;
+    /** How many gaps each step is divided into, so one less than this many lines
+     * sit between one tick and the next. Nothing extra is drawn below two. */
+    minors?: number;
+    /** How much of the stroke a minor line is drawn with, since a grid a reader
+     * notices is a grid competing with the curve on top of it. */
+    minorOpacity?: number;
+    ticks?: number;
+}
+/**
+ * The grid behind a graph: a line standing on each tick of both axes, and
+ * fainter lines dividing the gaps between them.
+ *
+ * The minor lines are drawn first and the major ones over them, so a major line
+ * a minor one lands on is the one a reader sees. The stroke is handed down from
+ * the group rather than set on each line, which is what lets the whole grid fade
+ * as one thing.
+ */
+export declare function numberPlane(name: string, coords: Coords, options: NumberPlaneOptions): GroupNode;

package/dist/figure/axis.js

@@ -0,0 +1,133 @@
+/**
+ * A drawn axis: the line, a tick at each of its numbers, and the numbers
+ * written beside them.
+ *
+ * The line takes a direction rather than being rotated into place. A horizontal
+ * axis turned on its side would turn its labels with it, and a reader cannot
+ * read those, so the two directions place their labels differently and both
+ * write them upright.
+ */
+import { interval } from '../values/interval.js';
+import { vec2 } from '../values/vec2.js';
+import { line, polygon } from './path.js';
+import { group, shape, text } from './node.js';
+import { multiplesOn, tickStep, ticksOn } from './ticks.js';
+import { scaled } from './scale.js';
+/** A head pointing along the line, apex at the end and base back along it. */
+function head(apex, back, spread) {
+    const along = vec2.normalize(vec2.sub(apex, back));
+    const across = vec2.scale(vec2.perpendicular(along), (vec2.distance(apex, back) * spread) / 2);
+    return polygon([apex, vec2.add(back, across), vec2.sub(back, across)]);
+}
+/**
+ * One axis as a group: the line, the ticks under `ticks`, the labels under
+ * `labels`, and the tips under `tips`.
+ *
+ * Each tick and each label is named after the number it shows rather than by its
+ * position in the list. An animation naming a tick then follows that number when
+ * the axis is rebuilt with a different range, where a position would quietly
+ * follow whichever tick had moved into the slot.
+ */
+export function numberLine(name, scale, options) {
+    const across = (options.direction ?? 'across') === 'across';
+    const seat = options.at ?? 0;
+    const tip = options.tip ?? 0;
+    const tickLength = options.tickLength ?? options.stroke.width * 8;
+    const size = options.size ?? 0;
+    const gap = options.gap ?? size * 0.35;
+    const { from: low, to: high } = interval.ordered(scale.units);
+    const at = (along, off) => (across ? vec2(along, seat + off) : vec2(seat + off, along));
+    // The line stops where a head begins rather than running under it, because a
+    // line drawn to the point shows through a head that is not fully opaque.
+    const parts = [shape('line', line(at(low + tip, 0), at(high - tip, 0)), { stroke: options.stroke })];
+    if (tip > 0 && options.fill) {
+        const spread = options.spread ?? 0.6;
+        parts.push(group('tips', [
+            shape('low', head(at(low, 0), at(low + tip, 0), spread), { fill: options.fill }),
+            shape('high', head(at(high, 0), at(high - tip, 0), spread), { fill: options.fill }),
+        ]));
+    }
+    const step = tickStep(scale.graph, options.ticks);
+    const marked = ticksOn(scale.graph, options.ticks);
+    const half = tickLength / 2;
+    parts.push(group('ticks', marked.map((tick) => {
+        const along = interval.remap(tick.value, scale.graph, scale.units);
+        return shape(tick.label, line(at(along, -half), at(along, half)), { stroke: options.stroke });
+    })));
+    if (options.fill && size > 0) {
+        // Placed by an anchor and an alignment and never by how wide the text is,
+        // so a long label moves nothing else in the figure.
+        const align = across ? 'middle' : 'end';
+        const baseline = across ? 'hanging' : 'middle';
+        const written = marked.filter((tick) => !(options.skipZero && tick.value === 0));
+        parts.push(group('labels', written.map((tick) => {
+            const along = interval.remap(tick.value, scale.graph, scale.units);
+            return text(tick.label, at(along, -(half + gap)), tick.label, size, {
+                fill: options.fill,
+                family: options.family,
+                weight: options.weight,
+                align,
+                baseline,
+            });
+        })));
+    }
+    return group(name, parts);
+}
+/**
+ * Two number lines under one group, named `x` and `y`, each crossing the other
+ * at that other's zero.
+ *
+ * Where zero is outside an interval the line sits at the near edge of it instead.
+ * An axis drawn at a zero the graph never reaches is an axis off the picture, and
+ * a reader is left with labels along an edge that has no line on it.
+ */
+export function axes(name, coords, options) {
+    const holdsOrigin = interval.holds(coords.x.graph, 0) && interval.holds(coords.y.graph, 0);
+    const seat = (scale) => scaled(scale, interval.clampTo(scale.graph, 0));
+    return group(name, [
+        numberLine('x', coords.x, { ...options, at: seat(coords.y), direction: 'across' }),
+        numberLine('y', coords.y, { ...options, at: seat(coords.x), direction: 'up', skipZero: holdsOrigin }),
+    ]);
+}
+/** Whether a value is a whole number of steps from zero, which is what tells a
+ * minor line it is standing where a major one already is. */
+function onStep(value, step) {
+    return Math.abs(value / step - Math.round(value / step)) < 1e-9;
+}
+/** Lines of constant x reaching the full height, and of constant y reaching the
+ * full width, at every multiple of the step. */
+function gridLines(coords, step, along, skipping) {
+    const scale = along === 'x' ? coords.x : coords.y;
+    const other = interval.ordered(along === 'x' ? coords.y.units : coords.x.units);
+    const ends = (at) => along === 'x' ? [vec2(at, other.from), vec2(at, other.to)] : [vec2(other.from, at), vec2(other.to, at)];
+    return multiplesOn(scale.graph, step)
+        .filter((value) => !(skipping && onStep(value, skipping)))
+        .map((value) => {
+        const [from, to] = ends(scaled(scale, value));
+        return shape(String(value), line(from, to), {});
+    });
+}
+/**
+ * The grid behind a graph: a line standing on each tick of both axes, and
+ * fainter lines dividing the gaps between them.
+ *
+ * The minor lines are drawn first and the major ones over them, so a major line
+ * a minor one lands on is the one a reader sees. The stroke is handed down from
+ * the group rather than set on each line, which is what lets the whole grid fade
+ * as one thing.
+ */
+export function numberPlane(name, coords, options) {
+    const step = { x: tickStep(coords.x.graph, options.ticks), y: tickStep(coords.y.graph, options.ticks) };
+    const minors = Math.max(1, Math.round(options.minors ?? 1));
+    const parts = [];
+    if (minors > 1 && step.x > 0 && step.y > 0) {
+        parts.push(group('minors', [
+            group('x', gridLines(coords, step.x / minors, 'x', step.x)),
+            group('y', gridLines(coords, step.y / minors, 'y', step.y)),
+        ], { style: { stroke: options.stroke, opacity: options.minorOpacity ?? 0.4 } }));
+    }
+    parts.push(group('majors', [group('x', gridLines(coords, step.x, 'x')), group('y', gridLines(coords, step.y, 'y'))], {
+        style: { stroke: options.stroke },
+    }));
+    return group(name, parts);
+}

package/dist/figure/path-data.d.ts

@@ -0,0 +1,29 @@
+/**
+ * An SVG path string read as geometry, which is the way in to everything above.
+ *
+ * `pathData` writes a path out and this reads one back. Without it the only
+ * paths that exist are the ones the builders beside this file make, so a glyph
+ * from a typesetter, an icon from a designer or anything else a drawing program
+ * exported cannot be trimmed, aligned or walked into another shape, and those
+ * are the operations this package is for.
+ *
+ * Everything becomes a cubic, the way it does everywhere here. A straight run
+ * takes the controls a third and two thirds along, a quadratic elevates exactly,
+ * and an elliptical arc is cut into pieces of at most a quarter turn each. So no
+ * segment read here is an approximation of the one the string described, apart
+ * from the arc, which no Bézier can be exactly.
+ *
+ * A command it does not know stops the read rather than being skipped. Skipping
+ * leaves a shape with a piece missing, and a piece missing from a letter or an
+ * outline reads as a mistake in the drawing rather than in the reading of it.
+ */
+import { type Path } from './path.js';
+/**
+ * The path a `d` attribute describes.
+ *
+ * Both cases of every command are read, so a relative run is resolved against
+ * where the last one ended. A command letter followed by more numbers than it
+ * takes repeats, which is the shorthand the grammar allows and which a moveto
+ * repeats as a lineto.
+ */
+export declare function pathFromData(d: string): Path;

package/dist/figure/path-data.js

@@ -0,0 +1,283 @@
+/**
+ * An SVG path string read as geometry, which is the way in to everything above.
+ *
+ * `pathData` writes a path out and this reads one back. Without it the only
+ * paths that exist are the ones the builders beside this file make, so a glyph
+ * from a typesetter, an icon from a designer or anything else a drawing program
+ * exported cannot be trimmed, aligned or walked into another shape, and those
+ * are the operations this package is for.
+ *
+ * Everything becomes a cubic, the way it does everywhere here. A straight run
+ * takes the controls a third and two thirds along, a quadratic elevates exactly,
+ * and an elliptical arc is cut into pieces of at most a quarter turn each. So no
+ * segment read here is an approximation of the one the string described, apart
+ * from the arc, which no Bézier can be exactly.
+ *
+ * A command it does not know stops the read rather than being skipped. Skipping
+ * leaves a shape with a piece missing, and a piece missing from a letter or an
+ * outline reads as a mistake in the drawing rather than in the reading of it.
+ */
+import { vec2 } from '../values/vec2.js';
+import { mat3 } from '../values/mat3.js';
+import { straight } from './path.js';
+/** Every command in the path grammar. */
+const DRAWN = 'MLHVCSQTAZ';
+/** A letter, a number, a run of separators, or one character that is none of
+ * those. The last group is what turns an unexpected character into a refusal
+ * rather than leaving it in the string unread. */
+const SCANNER = /([A-Za-z])|([+-]?(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?)|([,\s]+)|([\s\S])/g;
+function tokenize(d) {
+    const tokens = [];
+    SCANNER.lastIndex = 0;
+    for (let match = SCANNER.exec(d); match; match = SCANNER.exec(d)) {
+        if (match[1])
+            tokens.push({ command: match[1] });
+        else if (match[2] !== undefined)
+            tokens.push({ number: Number(match[2]) });
+        else if (match[3] === undefined)
+            throw new Error(`path data holds "${match[4]}", which is neither a command nor a number`);
+    }
+    return tokens;
+}
+/** A quadratic written as a cubic, both controls two thirds of the way from an
+ * end towards the single control. The two describe the same curve. */
+const elevate = (from, control, to) => ({
+    control1: vec2.lerp(from, control, 2 / 3),
+    control2: vec2.lerp(to, control, 2 / 3),
+    to,
+});
+/** The control a smooth segment uses, which is the previous one turned through
+ * the point the two segments share. */
+const reflect = (control, about) => vec2.sub(vec2.scale(about, 2), control);
+/** How far a cubic's controls sit from the ends of a piece of a unit arc, along
+ * the tangent. It is the same derivation `arc` uses and it holds for any sweep
+ * short enough, which is why the sweep is cut into quarters first. */
+const reachFor = (sweep) => (4 / 3) * Math.tan(sweep / 4);
+/**
+ * An SVG elliptical arc as cubics, from the endpoint form the string carries.
+ *
+ * SVG gives an arc as where it ends plus two radii, a rotation and two flags,
+ * and every one of the four arcs that fit those endpoints is selected by the
+ * flags. The centre and the two angles are recovered first, which is the
+ * conversion in the SVG specification, and then the sweep is walked in pieces
+ * of at most a quarter turn on a unit circle. The ellipse is an affine map of
+ * that circle, and an affine map takes a cubic to a cubic, so the control
+ * points can be mapped straight through rather than derived again.
+ */
+function arcCurves(from, radii, rotation, largeArc, sweep, to) {
+    // A radius of zero is a straight line by the specification, and so is an arc
+    // whose endpoints are the same point, which the specification drops entirely.
+    if (radii.x === 0 || radii.y === 0)
+        return [straight(from, to)];
+    const angle = (rotation * Math.PI) / 180;
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    const half = vec2.scale(vec2.sub(from, to), 0.5);
+    const turned = vec2(cos * half.x + sin * half.y, -sin * half.x + cos * half.y);
+    // Radii too small to reach both endpoints are scaled up until they just do,
+    // which the specification asks for rather than treating as an error.
+    let rx = Math.abs(radii.x);
+    let ry = Math.abs(radii.y);
+    const short = (turned.x * turned.x) / (rx * rx) + (turned.y * turned.y) / (ry * ry);
+    if (short > 1) {
+        rx *= Math.sqrt(short);
+        ry *= Math.sqrt(short);
+    }
+    const denominator = rx * rx * turned.y * turned.y + ry * ry * turned.x * turned.x;
+    const numerator = Math.max(0, rx * rx * ry * ry - denominator);
+    const spread = (largeArc === sweep ? -1 : 1) * Math.sqrt(numerator / denominator);
+    const centreTurned = vec2((spread * rx * turned.y) / ry, (-spread * ry * turned.x) / rx);
+    const centre = vec2.add(vec2(cos * centreTurned.x - sin * centreTurned.y, sin * centreTurned.x + cos * centreTurned.y), vec2.scale(vec2.add(from, to), 0.5));
+    const at = (point) => vec2((point.x - centreTurned.x) / rx, (point.y - centreTurned.y) / ry);
+    const opening = at(turned);
+    const closing = at(vec2.scale(turned, -1));
+    const first = vec2.angle(opening);
+    let swept = vec2.angle(closing) - first;
+    if (!sweep && swept > 0)
+        swept -= 2 * Math.PI;
+    if (sweep && swept < 0)
+        swept += 2 * Math.PI;
+    // The whole ellipse, placed and turned, as one matrix. Every point of the
+    // unit arc goes through it, controls included.
+    const place = mat3.multiply(mat3.translation(centre), mat3.multiply(mat3.rotation(angle), mat3.scaling(vec2(rx, ry))));
+    const pieces = Math.max(1, Math.ceil(Math.abs(swept) / (Math.PI / 2)));
+    const step = swept / pieces;
+    const reach = reachFor(step);
+    const curves = [];
+    for (let piece = 0; piece < pieces; piece++) {
+        const a0 = first + step * piece;
+        const a1 = a0 + step;
+        const p0 = vec2(Math.cos(a0), Math.sin(a0));
+        const p1 = vec2(Math.cos(a1), Math.sin(a1));
+        const t0 = vec2(-Math.sin(a0), Math.cos(a0));
+        const t1 = vec2(-Math.sin(a1), Math.cos(a1));
+        curves.push({
+            control1: mat3.transformPoint(place, vec2.add(p0, vec2.scale(t0, reach))),
+            control2: mat3.transformPoint(place, vec2.sub(p1, vec2.scale(t1, reach))),
+            // The endpoint the string named rather than the one the angles give back,
+            // so a run of arcs cannot drift away from where it said it ends.
+            to: piece === pieces - 1 ? to : mat3.transformPoint(place, p1),
+        });
+    }
+    return curves;
+}
+/**
+ * The path a `d` attribute describes.
+ *
+ * Both cases of every command are read, so a relative run is resolved against
+ * where the last one ended. A command letter followed by more numbers than it
+ * takes repeats, which is the shorthand the grammar allows and which a moveto
+ * repeats as a lineto.
+ */
+export function pathFromData(d) {
+    const tokens = tokenize(d);
+    const subpaths = [];
+    let curves = [];
+    let start = vec2.ZERO;
+    let at = vec2.ZERO;
+    let open = false;
+    let moved = false;
+    let command = '';
+    let index = 0;
+    // Held per kind because an S reflects a cubic's second control and a T a
+    // quadratic's only one, and either falls back to the current point when the
+    // segment before it was neither.
+    let lastCubic;
+    let lastQuadratic;
+    const take = (count) => {
+        const values = [];
+        while (values.length < count) {
+            const token = tokens[index++];
+            if (!token || !('number' in token))
+                throw new Error(`path command "${command}" wants ${count} numbers and the run ends short`);
+            values.push(token.number);
+        }
+        return values;
+    };
+    const flush = (closed) => {
+        if (open)
+            subpaths.push({ start, curves, closed });
+        open = false;
+    };
+    const segment = (...added) => {
+        if (!moved)
+            throw new Error('path data draws before it moves to a starting point');
+        // A segment after a close begins again where the closed subpath began,
+        // which is the point the close left as the current one.
+        if (!open) {
+            start = at;
+            curves = [];
+            open = true;
+        }
+        curves.push(...added);
+        at = added[added.length - 1]?.to ?? at;
+    };
+    while (index < tokens.length) {
+        const token = tokens[index];
+        if (token && 'command' in token) {
+            command = token.command;
+            index++;
+            if (!DRAWN.includes(command.toUpperCase()))
+                throw new Error(`path data holds command "${command}", which is not one of "${DRAWN}"`);
+        }
+        else if (!command) {
+            throw new Error('path data opens on a number rather than a command');
+        }
+        const relative = command === command.toLowerCase();
+        const absolute = (x, y) => (relative ? vec2(at.x + x, at.y + y) : vec2(x, y));
+        switch (command.toUpperCase()) {
+            case 'M': {
+                const [x = 0, y = 0] = take(2);
+                flush(false);
+                at = absolute(x, y);
+                start = at;
+                curves = [];
+                open = true;
+                moved = true;
+                lastCubic = undefined;
+                lastQuadratic = undefined;
+                // A second pair under one moveto is a line rather than a second move,
+                // and the repetition carries the case the moveto was written in.
+                command = relative ? 'l' : 'L';
+                break;
+            }
+            case 'L': {
+                const [x = 0, y = 0] = take(2);
+                segment(straight(at, absolute(x, y)));
+                lastCubic = undefined;
+                lastQuadratic = undefined;
+                break;
+            }
+            case 'H': {
+                const [x = 0] = take(1);
+                segment(straight(at, relative ? vec2(at.x + x, at.y) : vec2(x, at.y)));
+                lastCubic = undefined;
+                lastQuadratic = undefined;
+                break;
+            }
+            case 'V': {
+                const [y = 0] = take(1);
+                segment(straight(at, relative ? vec2(at.x, at.y + y) : vec2(at.x, y)));
+                lastCubic = undefined;
+                lastQuadratic = undefined;
+                break;
+            }
+            case 'C': {
+                const [x1 = 0, y1 = 0, x2 = 0, y2 = 0, x = 0, y = 0] = take(6);
+                const control2 = absolute(x2, y2);
+                segment({ control1: absolute(x1, y1), control2, to: absolute(x, y) });
+                lastCubic = control2;
+                lastQuadratic = undefined;
+                break;
+            }
+            case 'S': {
+                const [x2 = 0, y2 = 0, x = 0, y = 0] = take(4);
+                const control1 = lastCubic ? reflect(lastCubic, at) : at;
+                const control2 = absolute(x2, y2);
+                segment({ control1, control2, to: absolute(x, y) });
+                lastCubic = control2;
+                lastQuadratic = undefined;
+                break;
+            }
+            case 'Q': {
+                const [qx = 0, qy = 0, x = 0, y = 0] = take(4);
+                const control = absolute(qx, qy);
+                segment(elevate(at, control, absolute(x, y)));
+                lastCubic = undefined;
+                lastQuadratic = control;
+                break;
+            }
+            case 'T': {
+                const [x = 0, y = 0] = take(2);
+                const control = lastQuadratic ? reflect(lastQuadratic, at) : at;
+                segment(elevate(at, control, absolute(x, y)));
+                lastCubic = undefined;
+                lastQuadratic = control;
+                break;
+            }
+            case 'A': {
+                const [rx = 0, ry = 0, turn = 0, large = 0, sweep = 0, x = 0, y = 0] = take(7);
+                const to = absolute(x, y);
+                // An arc that ends where it began is dropped rather than drawn, which
+                // is the specification's own wording: there is no such ellipse to pick.
+                if (to.x !== at.x || to.y !== at.y)
+                    segment(...arcCurves(at, vec2(rx, ry), turn, large !== 0, sweep !== 0, to));
+                lastCubic = undefined;
+                lastQuadratic = undefined;
+                break;
+            }
+            case 'Z': {
+                flush(true);
+                at = start;
+                lastCubic = undefined;
+                lastQuadratic = undefined;
+                // A close ends the run of one command, so a number after it has nothing
+                // to repeat and is refused rather than read as a line.
+                command = '';
+                break;
+            }
+        }
+    }
+    flush(false);
+    return subpaths;
+}