shape-morphGetting Started
Install shape-morph and render your first shape.
Installation
npm install shape-morphThe core package has zero dependencies. The shape-morph/react entry point requires React 18+ as a peer dependency.
Your first shape
The fastest way to render a shape is with the React component:
import { Shape } from "shape-morph/react";
<Shape name="Heart" size={32} fill="red" />Or use the core API directly:
import { getShape, toSvgPath } from "shape-morph";
const heart = getShape("Heart");
const d = toSvgPath(heart, 100);
// Use as <path d={d} />Your first morph
import { getShape, Morph, toPathD } from "shape-morph";
const start = getShape("Circle");
const end = getShape("Heart");
const morph = new Morph(start, end);
// progress: 0 = Circle, 1 = Heart, 0.5 = midpoint
const d = toPathD(morph.asCubics(0.5), 100);The Morph class handles feature-matching and subdivision automatically. Call asCubics(progress) at any value between 0 and 1 to get the interpolated shape.