SVG Path animation

Usage no npm install needed!

<script type="module">
  import doodleSvg from '';



Downloads Version License

doodleSVG is a javascript tool, its purpose is to create objects that handle normalized path (for path, line, circle, rect, ellipse and polygon) from 0 to 1, to easely handle drawing SVG line animation for anytype of SVG object. It can be use with any tween engine.

Inspired by


  1. Animate with TweenMax


git clone doodleSVG

How to

You can play with origin and end of each return iteration to do your desire doodle.

  • Animate one element
var doodle = new doodleSVG();

var el = document.querySelector("path");
var myDoodle = doodle.normalize(el);

// Default value for end is 0., 5, {end: 1});
  • Animate a list of elements
var doodle = new doodleSVG();

var list = document.querySelectorAll("rect");
var myDoodles = doodle.normalizeGroup(list);

// Default value for end is 0., 5, {end: 1});