aniamtion of hands or letters svg path

by Nick Hulea

HTML

<canvas width="500" height="400"></canvas>
<?xml version="1.0" encoding="utf-8" ?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1088.5 1411.4" enable-background="new 0 0 1088.5 1411.4" xml:space="preserve">
    <g>
        <path id="p" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10"...

JavaScript

var p = document.getElementById('p');

function pathToPolygon(path,samples){
  if (!samples) samples = 0;
  var doc = path.ownerDocument;
  var poly = doc.createElementNS('http://www.w3.org/2000/svg','polygon');
 
  // Put all path segments in a queue
  for (var segs=[],s=path.pathSegList,i=s.numberOfItems-1;i>=0;--i) segs[i] = s.getItem(i);
  var segments = segs.concat();
 
  var seg,lastSeg,points=[],x,y;
  var addSegmentPoint = function(s){
    if (s.pathSegType == SVGPathSeg.PATHSEG_CLOSEPATH){
      
    }else{
      if (s.pathSegType%2==1 && s.pathSegType>1){
        // All odd-numbered path types are relative, except PATHSEG_CLOSEPATH (1)
        x+=s.x; y+=s.y;
      }else{
        x=s.x; y=s.y;
      }         
      var lastPoint = points[points.length-1];
      if (!lastPoint || x!=lastPoint[0] || y!=lastPoint[1]) points.push([x,y]);
    }
  };
  for (var d=0,len=path.getTotalLength(),step=len/samples;d<=len;d+=step){
    var seg = segments[path.getPathSegAtLength(d)];
    var pt  = path.getPointAtLength(d);
    if (seg != lastSeg){
      lastSeg = seg;
      while (segs.length && segs[0]!=seg) addSegmentPoint( segs.shift() );
    }
    var lastPoint = points[points.length-1];
    if (!lastPoint || pt.x!=lastPoint[0] || pt.y!=lastPoint[1]) points.push([pt.x,pt.y]);
  }
  for (var i=0,len=segs.length;i<len;++i) addSegmentPoint(segs[i]);
  for (var i=0,len=points.length;i<len;++i) points[i] = points[i].join(',');
  poly.setAttribute('points',points.join(' '));
  console.log(poly.points.numberOfItenms);
  $('#htmltext').html('<p>'+poly.points+'</p>');
  return poly;
}

pathToPolygon(p,75);


function CurveAnimator(from, to, c1, c2) {
    this.path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    if (!c1) c1 = from;
    if (!c2) c2 = to;
    this.path.setAttribute('d', 'M' + from.join(',') + 'C' + c1.join(',') + ' ' + c2.join(',') + ' ' + to.join(','));
    this.updatePath();
    CurveAnimator.lastCreated =...