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).
npm install svg-path-morph
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
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)