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.
Animated morph
AnimatedMorph adds a built-in animation loop so you don't need to manage requestAnimationFrame yourself:
import { AnimatedMorph } from "shape-morph";
const morph = new AnimatedMorph("Circle", "Heart", {
duration: 300,
onFrame({ clipPath }) {
div.style.clipPath = clipPath;
},
});
morph.progress = 1; // animates to Heart
morph.progress = 0; // animates back to CircleSet the progress property and it animates smoothly from the current position. Supports custom easing and lerp mode.
For React, use the useMorph hook instead.