https://github.com/Minibrams/svg-path-morph

Smoothly interpolate between variations of SVG paths.
https://github.com/Minibrams/svg-path-morph

interpolation javascript morph path svg typescript

Last synced: about 2 months ago
JSON representation

Smoothly interpolate between variations of SVG paths.

• Host: GitHub
• URL: https://github.com/Minibrams/svg-path-morph
• Owner: Minibrams
• License: mit
• Created: 2022-06-03T19:12:14.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-06-02T23:25:15.000Z (over 1 year ago)
• Last Synced: 2024-07-23T08:42:21.315Z (2 months ago)
• Topics: interpolation, javascript, morph, path, svg, typescript
• Language: TypeScript
• Homepage:
• Size: 190 KB
• Stars: 726
• Watchers: 12
• Forks: 18
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: license

Awesome Lists containing this project

README

        
# `svg-path-morph`

![ci](https://github.com/Minibrams/svg-path-morph/workflows/ci/badge.svg)

![coverage](https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/Minibrams/52a42b0e3eb35095e2f81e12d63dc374/raw/svg-path-morph__master.json)

[![size](https://packagephobia.now.sh/badge?p=svg-path-morph)](https://packagephobia.now.sh/result?p=svg-path-morph)

[![version](http://img.shields.io/npm/v/svg-path-morph.svg?style=flat)](https://www.npmjs.org/package/svg-path-morph)

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](https://abrams.dk).

https://user-images.githubusercontent.com/8108085/172227481-1e1e1e9b-6868-41f9-81e0-dfb52ec32e3d.mp4

> See [demo.html](./demo.html) and [src/demo.js](./src/demo.js) for the implementation of the above demonstration

# Usage

```typescript

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

// Get the d attributes of the  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  element

document.getElementById('the-face').setAttribute('d', slightlyAngry)

```