Sketcher - Raphael path animator

Sketch a svg path by providing the number of seconds for animation.

HTML

<input type='button' onclick='p1.sketch(10000);' value='sketch'/>

JavaScript

/*----------------Sketcher JS Code-------------------------------
-------------Code from https://github.com/arpitworld/sketcher----
----------------------------------------------------------------*/
Raphael.el.sketch = function(time,step){
  var el = this;
  if(typeof(step)=='undefined'){step=1;}
  var paper     = el.paper;
  var len       = el.getTotalLength();
  var parts     = Math.ceil(len/step);
  var deltaT    = time/parts; 
  var newel     = paper.path(el.attrs.path).hide();
  var i         = 0;
  el.attr({path:newel.getSubpath(0,0)});
  for(var counter=0; counter<=parts; counter++){
    setTimeout(function(){
      var subpath = newel.getSubpath(0,i*step);
      el.attr({path:subpath});
      i++;
    },counter*deltaT);
  }
  setTimeout(function(){newel.remove()}, Math.ceil(counter*deltaT));
  return el
}
/*----------------------------------------------------------------*/

/*-----------Code to draw Path------------------------------------*/
    var r = Raphael(100,0,'400','100');
    p1 = r.path([
        ['M',20,20],
        ['c',0,0,11,24,34,24],['c',23,0,33,-24,33,-24],
        ['c',0,0,11,24,34,24],['c',23,0,33,-24,33,-24],
        ['c',0,0,11,24,34,24],['c',23,0,33,-24,103,-24],
        ['c',0,0,11,24,34,24],['c',23,0,33,-24,33,-24],
        ['c',0,0,11,24,34,24],['c',23,0,33,-24,33,-24],
    ]).attr({'stroke-width':7,'stroke':'green'})