Skip to content

Geometry Helpers

Utility functions for working with geometry operations.

FunctionDescription
applyToPointTransforms a point by a matrix.
applyToRectTransforms a rectangle by a matrix and returns its bounding box: the smallest axis-aligned rectangle that contains it.
containsWhether a point or a rectangle is inside a rectangle.
ellipsePathThe path of the ellipse that fills a box, as SVG path data: two half-turn arcs.
fitPlaces content in a box like CSS `object-fit` and `object-position`, e.g.
fitContainPlaces content in a box, as large as possible while staying entirely inside the box (CSS `object-fit: contain`).
fitCoverPlaces content in a box, as small as possible while covering the whole box (CSS `object-fit: cover`).
fitFillPlaces content in a box, stretched to the box on each axis, without keeping its proportions (CSS `object-fit: fill`).
fitNonePlaces content in a box, at its own size, only positioned (CSS `object-fit: none`).
fitScaleDownPlaces content in a box, like fitContain, but never enlarged (CSS `object-fit: scale-down`).
formatPathWrites path commands back as SVG path data: letters and numbers separated by single spaces, numbers rounded to `precisi…
identityThe matrix that changes nothing.
intersectionThe area two rectangles have in common.
intersectsWhether two rectangles have an area in common, exactly when intersection returns a rectangle: rectangles that only touc…
invertThe matrix that undoes `m`, e.g.
matrixToCssWrites a matrix as a CSS `transform` or SVG `transform` value.
multiplyMultiplies matrices, in the mathematical order: the last one applies first.
parsePathParses SVG path data (the `d` attribute) into commands, as written: the letters keep their case (absolute or relative),…
rectToRectThe translation and scale that put one rectangle exactly on another, for animating or fitting between two boxes.
rotateA matrix that rotates points around the origin.
roundedRectPathThe path of a rectangle with a radius per corner, as SVG path data.
scaleA matrix that scales points from the origin.
simplifyPolylineRemoves the points of a polyline that change its shape by less than `tolerance`, with the Ramer–Douglas–Peucker algorit…
transformPathTransforms SVG path data by a matrix.
translateA matrix that moves points by `(tx, ty)`.
unionThe smallest rectangle that contains all the given rectangles, e.g.