SVG Path Morph Animation Library – svg-path-morph

Preview:

Description:

svg-path-morph is a tiny JavaScript library that provides a simple API for smoothly morphing between various different variations of a given SVG path.

How to use it:

1. Install and import the svg-path-morph.

# NPM
$ npm i svg-path-morph

import { compile, morph } from 'svg-path-morph'

2. Set the SVG paths you want to morph between.

<svg ...>
  <path id="svg1" ... />
</svg>
<svg ...>
  <path id="svg2" ... />
</svg>

const paths = {
  svg1: document.getElementById('svg1').getAttribute('d'),
  svg2: document.getElementById('svg2').getAttribute('d'),
  // ..
}

const compiled = compile([
  paths.svg1,
  paths.svg2,
])

3. Morph between the paths.

const demo = morph(
  compiled,
  [
    0.80,  // 80% SVG 1
    0.20   // 20% SVG 2
  ]
)

4. Apply the morph animation to the SVG.

<svg ...>
  <path id="morphed" ... />
</svg>

const morphed = document.getElementById('morphed')
morphed.setAttribute('d', morph(compiled, [
  svg1,
  svg2,
]))