Author: | Minibrams |
---|---|
Views Total: | 803 views |
Official Page: | Go to website |
Last Update: | June 8, 2022 |
License: | MIT |
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, ]))