Menu

Morph Path

morphPath enables the smooth morphing of one SVG shape into another.
It works with <path> elements or even regular SVG elements like <circle> or <rect>.

Using with Animatry

To animate a shape morph with animatry.to(), register the plugin first:

import { animatry, morphPath } from 'animatry';


animatry.use(morphPath);


animatry.to(morphPath.objectToPath('circle'), { // you have to explicitely convert to path
  morphPath: '#square',
  duration: 2,
  repeat: -1,
  alternate: true,
})

Live Example

This demo uses a real <circle> and <rect>, and the plugin converts them internally to paths for morphing.


Configuration Options

Property
Description
shape
Base element (alias for fromShape or toShape). Can be a <path>, <circle>, <rect>, etc.
fromShape
The starting shape (selector or SVG string).
toShape
The target shape.
map
"evenly" (default) distributes extra points, or "nearest".
index
"auto" (default) shifts the path start point to best match.
origin
Custom origin in CSS position (e.g. "center") or [x1, y1, x2, y2].
align
Align both shapes to a specific position (e.g. "center,center").
compile
If true, logs the precompiled paths to the console.
compiled
Skips internal parsing if paths are already cubic and aligned.
render
Custom callback: ({ progress, result, fromPath, toPath }).
precision
Rounding precision (default: 2).