A simple library for morphing between variations of SVG paths. Use svg-path-morph to smoothly morph between X variations of the same SVG path (i.e. same commands, different values).

Installation

npm install svg-path-morph

Demo

A live demo is also available on my website.

its-morpin-time-2.mp4

See demo.html and src/demo.js for the implementation of the above demonstration

Usage

import { compile, morph } from 'svg-path-morph'
// Get the d attributes of the <path> elements you want to morph between
const happy = document.getElemenyById('happy').getAttribute('d')
const angry = document.getElemenyById('angry').getAttribute('d')
// Compile the morph base (average path embedding)
const compiled = compile([
  happy,
  angry
])
// Morph between the happy/angry faces
const slightlyAngry = morph(
  compiled,
  [
    0.80,  // 80% happy
    0.20   // 20% angry
  ]
)
// Use the face is the d attribute of a <path> element
document.getElementById('the-face').setAttribute('d', slightlyAngry)