SVG Path Morph Animation Library – svg-path-morph

Category: Animation , Javascript | June 8, 2022
Author:Minibrams
Views Total:803 views
Official Page:Go to website
Last Update:June 8, 2022
License:MIT

Preview:

SVG Path Morph Animation Library – svg-path-morph

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,
]))

You Might Be Interested In:


Leave a Reply