RE: Animate signing a signature...

Hi Lisa,
 

 If you don’t see your paths it’s probably because they may be out of view. Before you save them, make sure the values of the first “M” are relatively close to those in the demo: “M51.494,355.859”.
 

 > Is it possible to 'fill' a path in a linear fashion? Where it fills from point a to point b over a period of time? And the stroke would be 0. Does that make sense?
 

 If by that you mean in calligrapher’s style, it does make sense but it’s a different scenario (currently there’s no command for doing what you describe), similar to when drawing calligraphic or brush strokes in Inkscape. If that’s what you’re trying to do, you need to: 
 

 1) draw (or import) your signature and then break it in small chunks (like those you can see while drawing)
 2) put them in an array
 3) call a function that builds the path elements at a set interval
 

 I had decided that in no way I would spend any amount of time on this, but somehow I found the patience to do one letter for a demo because it's always been an interesting issue:
 

 In your svg: 
 <g id="signature" fill="#200040" stroke="none"/>
  
 Script:
 

 var
   i = 0,
   timer,
   path,
   signature = document.getElementById("signature");
   calligraphy = [
     "m 147,72 c -3,1 -6,2 -9,3 l 12,-9 c 3,-1 6,-2 9,-3",
     "m 157,70 c -4,1 -7,1 -10,2 l 12,-9 c 3,-1 7,-2 10,-2",
     "m 167,70 c -3,0 -6,-1 -10,0 l 12,-9 c 3,0 7,1 10,1",
     "m 176,73 c -3,-1 -5,-2 -9,-3 l 12,-8 c 3,1 6,2 9,3",
     "m 185,78 c -3,-2 -6,-4 -9,-5 l 12,-8 c 3,1 6,3 9,5",
     "m 192,85 c -2,-3 -5,-5 -7,-7 l 12,-8 c 3,2 6,4 8,7",
     "m 197,93 c -1,-3 -3,-6 -5,-8 l 13,-8 c 2,3 4,6 5,9",
     "m 199,103 c 0,-3 -1,-7 -2,-10 l 13,-7 c 1,3 2,7 2,10",
     "m 197,113 c 1,-4 2,-6 2,-10 l 13,-7 c 0,4 -1,8 -2,11",
     "m 191,124 c 2,-3 4,-7 6,-11 l 13,-6 c -2,4 -3,8 -5,11",
     "m 183,134 c 4,-3 6,-6 8,-10 l 14,-6 c -3,4 -5,7 -8,10",
     "m 174,140 c 3,-2 6,-4 9,-6 l 14,-6 c -3,3 -6,6 -10,8",
     "m 161,143 c 5,0 9,-1 13,-3 l 13,-4 c -8,5 -16,10 -25,13",
     "m 148,142 c 5,1 9,1 13,1 l 1,6 c -4,1 -8,3 -13,3",
     "m 136,138 c 4,2 8,3 12,4 l 1,10 c -4,0 -8,0 -13,-1",
     "m 124,131 c 4,3 8,5 12,7 l 0,13 c -4,-1 -8,-3 -13,-5",
     "m 116,121 c 2,4 5,7 8,10 l -1,15 c -4,-2 -8,-5 -11,-7",
     "m 113,111 c 0,4 1,7 3,10 l -4,18 c -4,-3 -7,-7 -9,-10",
     "m 114,99 c -1,4 -1,8 -1,12 l -10,18 c -2,-4 -3,-8 -3,-12",
     "m 119,87 c -2,4 -4,8 -5,12 l -14,18 c 0,-4 0,-8 1,-12",
     "m 124,82 c -2,2 -3,3 -5,5 l -18,18 c 1,-4 5,-11 7,-15",
     "m 130,76 c -3,3 -4,4 -6,6 l -16,8 c 2,-3 4,-6 7,-9",
     "m 133,74 c -1,1 -2,1 -3,2 l -15,5 c 5,-5 9,-7 15,-11",
     "m 130,70 c 7,-4 13,-6 20,-8 l -12,9 c -2,1 -3,2 -5,3 z"
   ];
 

 timer = window.setInterval(write, 20);
 

 function write () {
   path = document.createElementNS("http://www.w3.org/2000/svg", "path");
   path.setAttributeNS(null, "d", calligraphy[i++]);
   signature.appendChild(path);
   if (i == calligraphy.length) window.clearTimeout(timer);
 }
 

  
 Alternatively, you can leave the paths in the svg (as saved by Illustrator or Inkscape), set their visibility to "none" (individually), and then use the script for setting their visibility to "block" (the array would then contain the IDs). You can also do that with SMIL instead of the script.
 

 Domenico