svg.pathmorphing.js

A plugin for svg.js to enable path morphing / animation.

It synchronizes two paths with different commands or command counts (e.g. H/V shorthand, quadratic curves or elliptical arcs) and interpolates between them.

Requires svg.js >= v3.2.0.

Install

$ npm install @svgdotjs/svg.js @svgdotjs/svg.pathmorphing.js

Load

As a module (ESM):

import { SVG, Spring } from '@svgdotjs/svg.js'
import '@svgdotjs/svg.pathmorphing.js'

// ... your SVG script

Or as a classic script (global build), directly in a web page after the SVG.js library:

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js/dist/svg.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.pathmorphing.js/dist/svg.pathmorphing.js"></script>

A bundle is also attached to every release.

Use

The use is similar to all other animation explained in the svg.js docs:

var draw = SVG('drawing').viewbox(0, 0, 300, 300)

// create path
var path = draw.path('M150 0 L75 200 L225 200 Z')

// animate path
path.animate(500).ease('<>').plot('M100 0 H190 V90 H100 Z')

Because the plugin registers a custom morph on PathArray, it also works with controllers for continuous morphing:

path.animate(new Spring(700)).plot('M100 0 L100 200 L200 200 Z')

Development

$ pnpm install
$ pnpm test              # run the test suite (node:test + svgdom)
$ pnpm lint              # check formatting + lint
$ pnpm fix               # auto-fix both
$ pnpm build             # build dist/
$ pnpm demo              # vite dev server for the demo