Output

Output functions convert cubic curves or polygons into renderable formats.

import { toPathD, toSvgPath, toClipPathPolygon, toClipPathPath, toMorphPair, toPath2D, toCanvasPath } from "shape-morph";

toPathD

toPathD(cubics: Cubic[], size?: number): string

Converts cubic curves (from morph.asCubics()) to an SVG path d attribute string. Optional size scales the output.

toSvgPath

toSvgPath(polygon: RoundedPolygon, size?: number): string

Converts a RoundedPolygon directly to an SVG path d attribute. Shorthand for shapes that don't need morphing.

toClipPathPolygon

toClipPathPolygon(cubics: Cubic[], samples?: number): string

Converts cubics to a CSS clip-path: polygon(...) string. Samples points along each curve to create a polygon with a fixed vertex count.

The fixed vertex count is what makes CSS transitions work - both start and end polygon strings have identical numbers of points, so browsers can interpolate linearly.

toClipPathPath

toClipPathPath(cubics: Cubic[], size?: number): string

Converts cubics to a CSS clip-path: path("...") string. Optional size scales the output (default 100). Preserves exact cubic Bezier curves. CSS cannot transition between two path() values, so use this only for static shapes.

toMorphPair

toMorphPair(start: RoundedPolygon, end: RoundedPolygon, samplesPerCubic?: number): [string, string]

Pre-computes a pair of polygon() strings from two shapes that are guaranteed to have the same vertex count. Returns a [startPolygon, endPolygon] tuple ready for CSS transitions.

import { getShape, toMorphPair } from "shape-morph";

const [from, to] = toMorphPair(getShape("Circle"), getShape("Heart"));
// Use as: style={{ clipPath: from }}
// Hover:  style={{ clipPath: to }}
// With:   transition: clip-path 500ms ease

toPath2D

toPath2D(cubics: Cubic[], size?: number): Path2D

Converts cubic curves (from morph.asCubics()) to a Canvas2D Path2D object. Use with ctx.fill(path) or ctx.stroke(path). Optional size scales the output (default 100).

toCanvasPath

toCanvasPath(polygon: RoundedPolygon, size?: number): Path2D

Converts a RoundedPolygon directly to a Path2D. Shorthand for shapes that don't need morphing.

import { getShape, toCanvasPath } from "shape-morph";

const path = toCanvasPath(getShape("Heart"), 200);
ctx.fill(path);