Package Exports

svg-path-morph
svg-path-morph/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svg-path-morph) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`svg-path-morph`

coverage

A simple library for morphing between variations of SVG paths.

Installation

npm install --save svg-path-morph

Demo

Use svg-path-morph to smoothly morph between X variations of the same SVG path (i.e. same commands, different values):

https://user-images.githubusercontent.com/8108085/172174667-2a9db2d4-0360-4270-bf2b-f5e0f10eb42c.mp4

Usage

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

const paths = {
  happyFace: 'M6.5 17.5C12.8333 11.6667 38.5 ...',
  angryFace: 'M7 13.5C13.3333 7.66667 36 -5.5...'
}


const compiled = compile([ 
  paths.happy, 
  paths.angry 
])

const face = morph(
  compiled,  // Morph between the happy/angry faces,
  [
    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', face)