@svg-fns/math

High-quality, fully-typed SVG math utilities for 2D transformations, geometry calculations, and path generation.
Part of the @svg-fns ecosystem, designed for production-grade projects.

Features

Transforms

• Identity, translation, scale, rotation, skewX, skewY
• Compose multiple matrices: composeMatrices(...)
• Apply matrices to points: applyMatrixToPoint(point, matrix)
• Decompose matrices into { translate, rotate, scale, skewX }
• Parse SVG transform strings: parseTransform("translate(10,20) rotate(30)")

Geometry

• distance(pointA, pointB) — Euclidean distance
• midpoint(pointA, pointB) — midpoint of two points
• slope(pointA, pointB) — slope (handles vertical lines)
• rotatePoint(point, angle, pivot) — rotate around origin or pivot
• almostEqual(pointA, pointB) — check approximate equality

Path Helpers

• polarToCartesian(cx, cy, radius, angle)
• cartesianToPolar(cx, cy, point)
• arcPath(cx, cy, radius, startAngle, endAngle) — generates SVG arc path

Installation

pnpm add @svg-fns/math

or

npm install @svg-fns/math

Usage

import {
  translationMatrix,
  scaleMatrix,
  composeMatrices,
  applyMatrixToPoint,
  distance,
  arcPath,
} from "@svg-fns/math";

// Compose transforms
const m = composeMatrices(scaleMatrix(2), translationMatrix(5, 0));
const p = applyMatrixToPoint({ x: 1, y: 1 }, m);
console.log(p); // { x: 12, y: 2 }

// Geometry
console.log(distance({ x: 0, y: 0 }, { x: 3, y: 4 })); // 5

// Path
const d = arcPath(0, 0, 50, 0, Math.PI / 2);
console.log(d); // "M ... A ..."

Tests

pnpm test

Fully covered with Vitest.

License

This library is licensed under the MPL-2.0 open-source license.

Please enroll in our courses or sponsor our work.