Animate SVG paths & lines


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
00Oct 28, 2017Mar 2, 2017Minified + gzip package size for animate-svg in KB



NPM version Downloads Dependency status Dev Dependency status

Easily animate an SVG line or path to look like it's animating itself.


npm install --save animate-svg


Basic usage:

import animateSvg from 'animate-svg'

async function foo() {
  // blabla
  const path = document.getElementById('some-svg-path-element')
  // the animateSvg function esentially returns a promise
  // so you can await it if you use it in an async function
  await animateSvg(path, 1, false)
  // blablabla

The function animateSvg accepts 3 parameters:

  • the SVGPathElement or SVGLineElement to animate
  • the speed at which the animation should occur (pixels per millisecond)
  • (optional) direction of the animation: true is for reverse animation, false is for normal

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from