javascript - svg text animation with delay -

i want implement http://24ways.org/2013/animating-vectors-with-svg/ want each letter start draw after finish of previous. dont know how implement delay.

here code :

var init = function() {  path = new array(); length = new array();  for(var i=1; i<3; i++){        path[i] = document.getelementbyid('path'+i);        length = path[i].gettotallength();        path[i].style.transition = path[i].style.webkittransition = 'none';         length[i] = length;        path[i].style.strokedasharray = length + ' ' + length;        path[i].style.strokedashoffset = length;         path[i].getboundingclientrect();        path[i].style.transition = path[i].style.webkittransition = 'stroke-dashoffset 2s ease-in-out';         path[i].style.strokedashoffset = '0';     } };  init(); 

in example have 2 letters 'sp' , want 's' draw first , when finish start 'p' letter. in example 2 letters draw simultaneously. if me appreciate it.

here example http://jsfiddle.net/thlvlkq0/

how making animation start after delay?

i forked fiddle make work that.

http://jsfiddle.net/pz19fl7h/

for(var i=1; i<3; i++) {     init(i);     (function(i) {         window.settimeout(function() { start(i, duration); }, (i-1)*duration);     })(i); } 

so basically, behavior is:

1. initialize (hide) paths
2. set them start after duration*i delay

if duration of path drawing known, should easy do.