Skip to content

Minibrams/svg-path-morph

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

svg-path-morph

ci coverage size version

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)

About

Smoothly interpolate between variations of SVG paths.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published