@logomarks/logo3d 0.0.0-stage → 0.1.0

package/src/scene/view.js

@@ -0,0 +1,273 @@
+/**
+ * @module @logomarks/logo3d/scene/view
+ *
+ * The live view: one WebGL renderer on the page's canvas, the logo's mesh in its materials, lit only by the
+ * environment it reflects, on its backdrop, seen from a named view, moved by its motion. It draws on demand (a change,
+ * a drag) and runs frames only while it moves, is on screen and the page is shown; with reduced motion it holds still
+ * (a drag still turns it). Stills, GLBs and video frames are drawn off screen from the same scene.
+ */
+
+import * as THREE from 'three';
+import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
+import { toBufferGeometry } from '../three/geometry.js';
+import { logoMaterials } from '../materials/factory.js';
+import { materialById, DEFAULT_MATERIAL } from '../materials/presets.js';
+import { environmentById, environmentCache, DEFAULT_ENVIRONMENT } from './environments.js';
+import { makeBackdrop } from './backdrop.js';
+import { viewPosition, DEFAULT_VIEW } from './camera.js';
+import { poseAt, PERIODS } from '../motion/index.js';
+import { stillRenderer, pngOf } from '../export/still.js';
+import { glbOf } from '../export/glb.js';
+
+/** The look a view starts with. */
+export const DEFAULT_LOOK = Object.freeze({
+	material: DEFAULT_MATERIAL,
+	side: /** @type {string | null} */ (null),
+	color: '#c8ff00',
+	environment: DEFAULT_ENVIRONMENT,
+	background: 'transparent',
+	backgroundColor: '#f1efea',
+	view: DEFAULT_VIEW,
+	motion: 'turntable',
+});
+
+/** The lens's vertical field of view, degrees: long enough to keep a logo's faces flat. */
+const FOV = 26;
+
+/**
+ * Each layer's colour: a one-colour logo takes the look's colour; a logo of several keeps its own, its ink layers
+ * taking the look's.
+ *
+ * @param {(string | null)[]} layerColors The layers' own colours (null for the ink).
+ * @param {string} color The look's colour.
+ * @returns {string[]} The colours.
+ */
+export const colorsFor = (layerColors, color) => (layerColors.length <= 1 ? [color] : layerColors.map((c) => c ?? color));
+
+/**
+ * A live view on a canvas.
+ *
+ * @param {HTMLCanvasElement} canvas The canvas (sized by CSS; the view follows it).
+ * @param {import('./view.js').ViewOptions} [o] The HDRIs' URLs, the pixel ratio, and whether a drag turns the logo.
+ * @returns {import('./view.js').LogoView} The view.
+ */
+export function createView(canvas, o = {}) {
+	const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true, powerPreference: 'high-performance' });
+	renderer.setPixelRatio(o.pixelRatio ?? Math.min(globalThis.devicePixelRatio || 1, 2));
+	renderer.outputColorSpace = THREE.SRGBColorSpace;
+	renderer.toneMapping = THREE.NeutralToneMapping;
+	renderer.setClearColor(0x000000, 0);
+
+	const scene = new THREE.Scene();
+	const camera = new THREE.PerspectiveCamera(FOV, 1, 0.01, 200);
+	const pivot = new THREE.Group();
+	scene.add(pivot);
+	const mesh = new THREE.Mesh(new THREE.BufferGeometry(), []);
+	mesh.castShadow = true;
+	pivot.add(mesh);
+
+	const envs = environmentCache(THREE, renderer, o.hdri ?? {});
+	const stills = stillRenderer(THREE, OutputPass, renderer);
+	/** @type {import('./view.js').Look} */
+	let look = { ...DEFAULT_LOOK };
+	/** @type {(string | null)[]} */
+	let layerColors = [null];
+	let depth = 0.14;
+	let radius = 0.75;
+	let height = 1;
+	/** @type {import('./backdrop.js').Backdrop | null} */
+	let backdrop = null;
+	let envId = '';
+	const drag = { yaw: 0, pitch: 0 };
+
+	// ---- what the scene is made of ----
+	function rebuildMaterials() {
+		const old = /** @type {import('three').Material[]} */ (mesh.material);
+		mesh.material = logoMaterials(THREE, { face: look.material, side: look.side ?? undefined, colors: colorsFor(layerColors, look.color), depth });
+		new Set(old).forEach((m) => m.dispose());
+		renderer.toneMapping = materialById(look.material).kind === 'flat' && (!look.side || materialById(look.side).kind === 'flat') ? THREE.NoToneMapping : THREE.NeutralToneMapping;
+	}
+	function rebuildBackdrop() {
+		if (backdrop) {
+			scene.remove(backdrop.group);
+			backdrop.dispose();
+		}
+		backdrop = makeBackdrop(THREE, { kind: look.background, color: look.backgroundColor, size: radius });
+		scene.add(backdrop.group);
+		backdrop.apply(scene, renderer);
+		place();
+	}
+	/** The camera for the view and the frame's aspect; the logo standing on the floor when there is one. */
+	function place(aspect = camera.aspect) {
+		const standing = backdrop?.standing ?? false;
+		const target = /** @type {[number, number, number]} */ ([0, standing ? height / 2 : 0, 0]);
+		const name = standing && look.view === 'front' ? 'angle' : look.view;
+		camera.position.set(...viewPosition(name, { radius, aspect, fov: FOV, target }));
+		camera.lookAt(...target);
+		camera.updateProjectionMatrix();
+	}
+	async function applyEnvironment() {
+		const e = environmentById(look.environment);
+		if (envId === e.id) return;
+		envId = e.id;
+		const tex = await envs.get(e.id);
+		if (envId !== e.id) return;
+		scene.environment = tex;
+		scene.environmentIntensity = e.intensity;
+		draw();
+	}
+
+	// ---- drawing ----
+	let start = performance.now();
+	let time = 0;
+	/** The scene posed at `t` seconds into the motion. */
+	function pose(t) {
+		const p = poseAt(look.motion, t);
+		const base = backdrop?.standing ? height / 2 : 0;
+		pivot.position.y = base + p.lift;
+		pivot.rotation.set(p.tilt + drag.pitch, p.turn + drag.yaw, 0, 'YXZ');
+		scene.environmentRotation.set(0, environmentById(look.environment).rotation + p.light, 0);
+	}
+	function draw() {
+		pose(time);
+		renderer.render(scene, camera);
+	}
+
+	// ---- the loop: frames only while it moves, is seen, and the page is shown ----
+	const still = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+	let frame = 0;
+	let seen = true;
+	const moving = () => look.motion !== 'none' && !still && seen && !document.hidden;
+	function tick() {
+		frame = 0;
+		if (!moving()) return;
+		time = (performance.now() - start) / 1000;
+		draw();
+		frame = requestAnimationFrame(tick);
+	}
+	function run() {
+		if (!frame && moving()) frame = requestAnimationFrame(tick);
+	}
+	const io = typeof IntersectionObserver === 'function' ? new IntersectionObserver(([e]) => ((seen = e.isIntersecting), run())) : null;
+	io?.observe(canvas);
+	const onVisibility = () => run();
+	document.addEventListener('visibilitychange', onVisibility);
+
+	// ---- size ----
+	function resize() {
+		const w = canvas.clientWidth, h = canvas.clientHeight;
+		if (!w || !h) return;
+		renderer.setSize(w, h, false);
+		camera.aspect = w / h;
+		place();
+		draw();
+	}
+	const ro = typeof ResizeObserver === 'function' ? new ResizeObserver(resize) : null;
+	ro?.observe(canvas);
+
+	// ---- a drag turns the logo ----
+	if (o.drag !== false) {
+		/** @type {[number, number] | null} */
+		let last = null;
+		canvas.addEventListener('pointerdown', (e) => {
+			last = [e.clientX, e.clientY];
+			canvas.setPointerCapture(e.pointerId);
+		});
+		canvas.addEventListener('pointermove', (e) => {
+			if (!last) return;
+			drag.yaw += (e.clientX - last[0]) * 0.008;
+			drag.pitch = Math.max(-0.7, Math.min(0.7, drag.pitch + (e.clientY - last[1]) * 0.006));
+			last = [e.clientX, e.clientY];
+			if (!frame) draw();
+		});
+		const up = () => (last = null);
+		canvas.addEventListener('pointerup', up);
+		canvas.addEventListener('pointercancel', up);
+	}
+
+	return {
+		canvas,
+		renderer,
+		scene,
+		camera,
+		mesh,
+		get look() {
+			return { ...look };
+		},
+		setGeometry(g, colors = [null]) {
+			const old = mesh.geometry;
+			mesh.geometry = toBufferGeometry(THREE, g);
+			old.dispose();
+			layerColors = colors.length ? colors : [null];
+			depth = g.depth;
+			height = g.bounds.max[1] - g.bounds.min[1];
+			radius = /** @type {import('three').Sphere} */ (mesh.geometry.boundingSphere).radius;
+			rebuildMaterials();
+			rebuildBackdrop();
+			draw();
+		},
+		async setLook(next) {
+			const before = look;
+			look = { ...look, ...next };
+			if (before.material !== look.material || before.side !== look.side || before.color !== look.color) rebuildMaterials();
+			if (before.background !== look.background || before.backgroundColor !== look.backgroundColor || !backdrop) rebuildBackdrop();
+			if (before.view !== look.view) place();
+			if (before.motion !== look.motion) {
+				start = performance.now();
+				time = 0;
+			}
+			draw();
+			run();
+			await applyEnvironment();
+		},
+		resetDrag() {
+			drag.yaw = drag.pitch = 0;
+			draw();
+		},
+		render(t) {
+			if (t !== undefined) time = t;
+			draw();
+		},
+		period: () => PERIODS[/** @type {keyof typeof PERIODS} */ (look.motion)] ?? 6,
+		still({ width, height: h, transparent = false, t = 0 }) {
+			const keep = time;
+			time = t;
+			pose(t);
+			const prev = camera.aspect;
+			place(width / h);
+			const px = stills.render(scene, camera, { width, height: h, transparent: transparent && look.background === 'transparent' });
+			camera.aspect = prev;
+			place();
+			time = keep;
+			draw();
+			return px;
+		},
+		async png(opts) {
+			return pngOf(this.still(opts));
+		},
+		async glb() {
+			const { GLTFExporter } = await import('three/addons/exporters/GLTFExporter.js');
+			return glbOf(THREE, GLTFExporter, mesh);
+		},
+		frames({ width, height: h }) {
+			return (t, target) => {
+				const px = this.still({ width, height: h, t, transparent: false });
+				if (target.width !== width) target.width = width;
+				if (target.height !== h) target.height = h;
+				/** @type {CanvasRenderingContext2D} */ (target.getContext('2d')).putImageData(new ImageData(px.data, width, h), 0, 0);
+			};
+		},
+		dispose() {
+			cancelAnimationFrame(frame);
+			io?.disconnect();
+			ro?.disconnect();
+			document.removeEventListener('visibilitychange', onVisibility);
+			mesh.geometry.dispose();
+			new Set(/** @type {import('three').Material[]} */ (mesh.material)).forEach((m) => m.dispose());
+			backdrop?.dispose();
+			envs.dispose();
+			stills.dispose();
+			renderer.dispose();
+		},
+	};
+}

package/src/shape/index.d.ts

@@ -0,0 +1,80 @@
+import type { Ring, Shape } from '@logomarks/core/geometry';
+import type { Bitmap } from '@logomarks/core/raster';
+
+/** A ring of points, open (the last point is not the first). */
+export type Ring2 = [number, number][];
+/** An outline (anticlockwise, y up), then its holes (clockwise). */
+export type Polygon2 = Ring2[];
+
+/** One colour of a logo, normalised. */
+export interface NormalLayer {
+	/** Its colour (`#rrggbb`), or null for the ink (unset, `currentColor`, a gradient). */
+	color: string | null;
+	polygons: Polygon2[];
+}
+
+/** A logo ready to extrude: y up, centred on the origin, its longest side 1. */
+export interface LogoShape {
+	/** Its colour layers, in the order their colours first appear; they never overlap. */
+	layers: NormalLayer[];
+	width: number;
+	height: number;
+	/** Half its thinnest stroke: the bevel's cap. */
+	halfStroke: number;
+}
+
+/** One filled element of a file, in its user space. */
+export interface SvgElement {
+	rings: Ring[];
+	evenodd: boolean;
+	/** Its fill as written, or undefined (black). */
+	fill: string | undefined;
+	first: boolean;
+}
+
+/** One colour of a file, in its user space (y down). */
+export interface Layer {
+	color: string | null;
+	shape: Shape;
+}
+
+/** A logo's shape from its SVG text. Pure; runs in Node, a worker or a page. */
+export function readLogo(svg: string, o?: { seed?: string; tolerance?: number }): LogoShape;
+/** Every filled element of a file, in paint order (transforms applied, curves sampled every `step` of its size). */
+export function readElements(svg: string, o?: { step?: number }): { elements: SvgElement[]; box: [number, number, number, number] | undefined };
+/** A tag's attributes by lower-case name. */
+export function attributes(text: string): Record<string, string>;
+/** CSS declarations as properties. */
+export function declarations(text: string | undefined): Record<string, string>;
+/** The `.class` rules of a file's `<style>` elements. */
+export function classRules(svg: string): Map<string, Record<string, string>>;
+/** A filled element's outline as path data. */
+export function outline(name: string, a: Record<string, string>): string | undefined;
+/** Elements painted in order into colour layers (a full-viewBox background dropped). */
+export function paintLayers(elements: SvgElement[], box: [number, number, number, number] | undefined, o?: { seed?: string }): Layer[];
+/** A fill as `#rrggbb`, or null for the ink. */
+export function colorOf(fill: string | undefined): string | null;
+/** Layers normalised: y up, centred, the longest side 1, rings wound and simplified. */
+export function normalise(layers: Layer[], o?: { tolerance?: number }): { layers: NormalLayer[]; width: number; height: number; scale: number };
+/** The box round every point of every layer, `[x0, y0, x1, y1]`. */
+export function boundsOf(layers: { shape: Shape }[]): [number, number, number, number];
+/** About half the thinnest stroke of normalised layers: the deepest inset that keeps every layer's pieces and holes. */
+export function halfThinnest(layers: NormalLayer[], o?: { resolution?: number }): number;
+/** The deepest inset, in pixels, that keeps a raster's pieces and holes (a binary search over its distance field). */
+export function deepestInset(bm: Bitmap, o?: { steps?: number }): number;
+/** A raster's ink pieces and empty regions, counted: `"<ink>/<empty>"`. */
+export function topology(bm: Bitmap): string;
+/** A ring's signed area, positive anticlockwise with y up. */
+export function signedArea(r: readonly (readonly number[])[]): number;
+/** A closed ring simplified (Douglas–Peucker), repeated points dropped. */
+export function simplifyRing(ring: [number, number][], tol: number): [number, number][];
+/** A `transform` attribute as a matrix `[a, b, c, d, e, f]`. */
+export function parseTransform(text: string | undefined): number[];
+/** The product of two matrices (`n` applied first). */
+export function multiply(m: readonly number[], n: readonly number[]): number[];
+/** A point through a matrix. */
+export function apply(m: readonly number[], p: readonly [number, number]): [number, number];
+/** The identity matrix. */
+export const IDENTITY: readonly number[];
+/** Rings as polygons by nesting alone (no booleans): the fallback when the booleans can't take a file. */
+export function nestRings(rings: Ring[]): Shape;

package/src/shape/index.js

@@ -0,0 +1,32 @@
+/**
+ * @module @logomarks/logo3d/shape
+ *
+ * A logo's SVG as the shape the geometry extrudes: its filled elements read (transforms, fills and fill rules kept),
+ * painted into colour layers, and normalised (y up, centred, the longest side 1), with half its thinnest stroke
+ * measured for the bevel's cap. Pure: it runs in Node, a worker or a page.
+ */
+
+import { readElements } from './svg.js';
+import { paintLayers } from './layers.js';
+import { normalise } from './normalise.js';
+import { halfThinnest } from './thinnest.js';
+
+export { readElements, attributes, declarations, classRules, outline } from './svg.js';
+export { paintLayers, colorOf, nestRings } from './layers.js';
+export { normalise, boundsOf } from './normalise.js';
+export { halfThinnest, deepestInset, topology } from './thinnest.js';
+export { signedArea, simplifyRing } from './simplify.js';
+export { parseTransform, multiply, apply, IDENTITY } from './matrix.js';
+
+/**
+ * A logo's shape from its SVG.
+ *
+ * @param {string} svg The file's text (a mark's file, or any SVG with filled shapes).
+ * @param {{ seed?: string, tolerance?: number }} [o] `seed`: the booleans' retry jitter; `tolerance`: the simplification.
+ * @returns {import('./index.js').LogoShape} The shape. It has no layers when the file draws nothing filled.
+ */
+export function readLogo(svg, o = {}) {
+	const { elements, box } = readElements(svg);
+	const n = normalise(paintLayers(elements, box, o), o);
+	return { layers: n.layers, width: n.width, height: n.height, halfStroke: halfThinnest(n.layers) };
+}

package/src/shape/layers.js

@@ -0,0 +1,142 @@
+/**
+ * @module @logomarks/logo3d/shape/layers
+ *
+ * A file's filled elements as colour layers: each element filled by its own rule, then painted in order, so a later
+ * element covers what is under it (it is cut out of every other colour). A first element that fills the whole
+ * viewBox is a background, and is dropped.
+ */
+
+import { nonzeroFill } from '@logomarks/core/svg';
+import { robustOps, seeded, area } from '@logomarks/core/geometry';
+
+/** CSS colour names an exported SVG commonly uses. */
+const NAMED = /** @type {Record<string, string>} */ ({ black: '#000000', white: '#ffffff', red: '#ff0000', lime: '#00ff00', green: '#008000', blue: '#0000ff', yellow: '#ffff00', orange: '#ffa500', gray: '#808080', grey: '#808080', silver: '#c0c0c0', navy: '#000080', purple: '#800080', teal: '#008080', maroon: '#800000' });
+
+/**
+ * A fill as a layer's colour: `#rrggbb`, or null for the ink (unset, `currentColor`, a gradient or pattern).
+ *
+ * @param {string | undefined} fill The fill as written.
+ * @returns {string | null} The colour.
+ */
+export function colorOf(fill) {
+	if (!fill) return null;
+	const f = fill.trim().toLowerCase();
+	if (f === 'currentcolor' || f.startsWith('url(') || f === 'inherit') return null;
+	if (NAMED[f]) return NAMED[f];
+	let m = /^#([0-9a-f]{3,4})$/.exec(f);
+	if (m) return `#${[...m[1].slice(0, 3)].map((c) => c + c).join('')}`;
+	m = /^#([0-9a-f]{6})(?:[0-9a-f]{2})?$/.exec(f);
+	if (m) return `#${m[1]}`;
+	m = /^rgba?\(\s*([\d.]+%?)[\s,]+([\d.]+%?)[\s,]+([\d.]+%?)/.exec(f);
+	if (m) {
+		const ch = (/** @type {string} */ v) => Math.round(Math.min(255, Math.max(0, v.endsWith('%') ? (parseFloat(v) * 255) / 100 : parseFloat(v))));
+		return `#${[m[1], m[2], m[3]].map((v) => ch(v).toString(16).padStart(2, '0')).join('')}`;
+	}
+	return null;
+}
+
+/**
+ * Whether an element is a background: a box over at least 97% of the viewBox.
+ *
+ * @param {import('./svg.js').Element} el The element.
+ * @param {[number, number, number, number] | undefined} box The viewBox.
+ * @returns {boolean} True for a background.
+ */
+function isBackground(el, box) {
+	if (!box || el.rings.length !== 1) return false;
+	const covered = area(el.rings[0]);
+	return covered >= 0.97 * box[2] * box[3];
+}
+
+/**
+ * Rings as polygons by nesting alone (no booleans): a ring inside an even number of others is an outline, inside an
+ * odd number a hole of the smallest ring round it. The fallback when the booleans can't take a file's geometry.
+ *
+ * @param {import('@logomarks/core/geometry').Ring[]} rings The rings.
+ * @returns {import('@logomarks/core/geometry').Shape} The polygons.
+ */
+export function nestRings(rings) {
+	const rs = rings.filter((r) => r.length > 2 && area(r) > 0).sort((a, b) => area(b) - area(a));
+	const inside = (/** @type {import('@logomarks/core/geometry').Point} */ q, /** @type {import('@logomarks/core/geometry').Ring} */ r) => {
+		let c = false;
+		for (let i = 0, j = r.length - 1; i < r.length; j = i++) if (r[i][1] > q[1] !== r[j][1] > q[1] && q[0] < ((r[j][0] - r[i][0]) * (q[1] - r[i][1])) / (r[j][1] - r[i][1]) + r[i][0]) c = !c;
+		return c;
+	};
+	/** @type {import('@logomarks/core/geometry').Shape} */
+	const out = [];
+	/** @type {Map<import('@logomarks/core/geometry').Ring, import('@logomarks/core/geometry').Polygon>} */
+	const polyOf = new Map();
+	rs.forEach((r, i) => {
+		const parents = rs.slice(0, i).filter((o) => inside(r[0], o));
+		if (parents.length % 2 === 0) {
+			const pg = [r];
+			out.push(pg);
+			polyOf.set(r, pg);
+		} else polyOf.get(parents[parents.length - 1])?.push(r);
+	});
+	return out;
+}
+
+/**
+ * One element's fill, by its own rule; by nesting when the booleans fail on it.
+ *
+ * @param {import('./svg.js').Element} el The element.
+ * @param {import('@logomarks/core/geometry').BooleanOps} ops The booleans.
+ * @returns {import('@logomarks/core/geometry').Shape} Its shape.
+ */
+function fillOf(el, ops) {
+	try {
+		return el.evenodd ? ops.xor(...el.rings.map((r) => [r])) : nonzeroFill(el.rings, ops);
+	} catch {
+		return nestRings(el.rings);
+	}
+}
+
+/**
+ * A boolean, or a fallback when it fails.
+ *
+ * @template T
+ * @param {() => T} op The boolean.
+ * @param {() => T} fallback What to use instead.
+ * @returns {T} The result.
+ */
+const tryOp = (op, fallback) => {
+	try {
+		return op();
+	} catch {
+		return fallback();
+	}
+};
+
+/**
+ * @typedef {object} Layer
+ * @property {string | null} color Its colour (`#rrggbb`), or null for the ink.
+ * @property {import('@logomarks/core/geometry').Shape} shape What it covers.
+ */
+
+/**
+ * Elements painted in order into colour layers.
+ *
+ * @param {import('./svg.js').Element[]} elements The elements, in paint order.
+ * @param {[number, number, number, number] | undefined} box The viewBox.
+ * @param {{ seed?: string }} [o] `seed`: the booleans' retry jitter, so a file reads the same every time.
+ * @returns {Layer[]} The layers, in the order their colours first appear; empty ones dropped.
+ */
+export function paintLayers(elements, box, { seed = 'logo3d' } = {}) {
+	const ops = robustOps(seeded(seed));
+	const els = elements.length > 1 && isBackground(elements[0], box) ? elements.slice(1) : elements;
+	/** @type {Map<string, import('@logomarks/core/geometry').Shape>} */
+	const byColor = new Map();
+	const keyOf = (/** @type {string | null} */ c) => c ?? 'ink';
+	const colors = new Set(els.map((e) => keyOf(colorOf(e.fill))));
+	for (const el of els) {
+		const shape = fillOf(el, ops);
+		if (!shape.length) continue;
+		const key = keyOf(colorOf(el.fill));
+		if (colors.size > 1)
+			for (const [k, s] of byColor) if (k !== key) byColor.set(k, tryOp(() => /** @type {import('@logomarks/core/geometry').Shape} */ (ops.difference(s, shape)), () => s));
+		const had = byColor.get(key);
+		byColor.set(key, had ? tryOp(() => ops.union(had, shape), () => [...had, ...shape]) : shape);
+	}
+	return [...byColor].filter(([, s]) => s.length).map(([k, shape]) => ({ color: k === 'ink' ? null : k, shape }));
+}

package/src/shape/matrix.js

@@ -0,0 +1,88 @@
+/**
+ * @module @logomarks/logo3d/shape/matrix
+ *
+ * SVG transforms as 2D affine matrices `[a, b, c, d, e, f]` (x' = a·x + c·y + e, y' = b·x + d·y + f): parsed from a
+ * `transform` attribute, multiplied down the element tree, and applied to points.
+ */
+
+/** The identity. */
+export const IDENTITY = Object.freeze([1, 0, 0, 1, 0, 0]);
+
+/**
+ * `m` then `n`: the matrix that applies `n` first and `m` after (a parent's matrix times its child's).
+ *
+ * @param {readonly number[]} m The outer matrix.
+ * @param {readonly number[]} n The inner matrix.
+ * @returns {number[]} Their product.
+ */
+export const multiply = (m, n) => [
+	m[0] * n[0] + m[2] * n[1],
+	m[1] * n[0] + m[3] * n[1],
+	m[0] * n[2] + m[2] * n[3],
+	m[1] * n[2] + m[3] * n[3],
+	m[0] * n[4] + m[2] * n[5] + m[4],
+	m[1] * n[4] + m[3] * n[5] + m[5],
+];
+
+/**
+ * One transform function as a matrix.
+ *
+ * @param {string} name `matrix`, `translate`, `scale`, `rotate`, `skewX` or `skewY`.
+ * @param {number[]} v Its numbers.
+ * @returns {number[]} The matrix (the identity for an unknown name).
+ */
+function one(name, v) {
+	const rad = ((v[0] ?? 0) * Math.PI) / 180;
+	switch (name) {
+		case 'matrix':
+			return v.length === 6 ? v : [...IDENTITY];
+		case 'translate':
+			return [1, 0, 0, 1, v[0] ?? 0, v[1] ?? 0];
+		case 'scale':
+			return [v[0] ?? 1, 0, 0, v[1] ?? v[0] ?? 1, 0, 0];
+		case 'rotate': {
+			const [cx = 0, cy = 0] = v.slice(1);
+			const r = [Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad), 0, 0];
+			return multiply(multiply([1, 0, 0, 1, cx, cy], r), [1, 0, 0, 1, -cx, -cy]);
+		}
+		case 'skewX':
+			return [1, 0, Math.tan(rad), 1, 0, 0];
+		case 'skewY':
+			return [1, Math.tan(rad), 0, 1, 0, 0];
+		default:
+			return [...IDENTITY];
+	}
+}
+
+/**
+ * A `transform` attribute as one matrix (its functions applied right to left, as SVG does).
+ *
+ * @param {string | undefined} text The attribute.
+ * @returns {number[]} The matrix.
+ */
+export function parseTransform(text) {
+	let m = [...IDENTITY];
+	if (!text) return m;
+	for (const [, name, args] of text.matchAll(/([a-zA-Z]+)\s*\(([^)]*)\)/g)) {
+		const v = (args.match(/[-+]?(?:\d*\.\d+|\d+\.?)(?:e[-+]?\d+)?/gi) ?? []).map(Number);
+		m = multiply(m, one(name, v));
+	}
+	return m;
+}
+
+/**
+ * A point through a matrix.
+ *
+ * @param {readonly number[]} m The matrix.
+ * @param {readonly [number, number]} p The point.
+ * @returns {[number, number]} Where it goes.
+ */
+export const apply = (m, p) => [m[0] * p[0] + m[2] * p[1] + m[4], m[1] * p[0] + m[3] * p[1] + m[5]];
+
+/**
+ * How much a matrix scales lengths, on average (the square root of its determinant's size).
+ *
+ * @param {readonly number[]} m The matrix.
+ * @returns {number} The scale.
+ */
+export const scaleOf = (m) => Math.sqrt(Math.abs(m[0] * m[3] - m[1] * m[2])) || 1;