title: SVG draw one letter at a time
body: <p>I am trying to recreate the following behavior, specifically I want the letters to come in one letter at a time, from left to right as if someone was actually writing it on the screen.  </p>
  
  <p><a href="http://codepen.io/itsnorbat/pen/vNEEYZ" rel="nofollow">http://codepen.io/itsnorbat/pen/vNEEYZ</a></p>
  
  <p>I know that this part of svg code is the word hello:</p>
  
  <pre><code>&lt;path id="fontshape" d="m 250 252 c 0 0 25.833 -21.854 33 -6.59 c 2.244 4.778 -43.583 107.903 -43.583 107.903 s 20.416 -48.943 27.583 -51.667 c 5.042 -1.916 42.333 2.175 53 -3.079 s 31.667 -58.746 31.667 -58.746 s -49.991 106.985 -38.334 113.492 c 14.228 7.941 77.913 -39.622 64.667 -50.334 c -8.667 -7.009 -17.608 4.216 -21 8.334 c -1.747 2.121 -21.333 44.027 2.667 42.014 s 91.817 -93.427 96.306 -103.723 c 4.669 -10.712 1.947 -11.996 -0.639 -12.291 c -11.721 -1.335 -37.539 40.442 -53 103.333 c -3.426 13.935 6.667 17.333 15.333 9.333 s 76.855 -91.35 79 -100.226 c 2.393 -9.902 -7.731 -15.378 -17 0.226 c -11.271 18.976 -36.465 82.571 -36 92.667 c 0.263 5.689 2.403 18.828 15.333 6.667 c 19.894 -18.71 42.666 -47.667 42.666 -47.667 s -21.522 22.389 -22 45 c -0.245 11.592 16.631 5.965 23.274 0.667 c 5.081 -4.052 17.727 -21.334 15.06 -36.667 s -13.334 -10.001 -16.667 1.333 s 5 10 17 8 s 17 -13.666 17 -14.333" fill="none" stroke="none" /&gt;
  </code></pre>
  
  <p>and this is the animation:</p>
  
  <pre><code>.animatedfont {
  fill:none;
  stroke:#fff;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:100;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  -webkit-animation: dash 4.9s linear forwards;
  -o-animation: dash 4.9s linear forwards;
  -moz-animation: dash 4.9s linear forwards;
  animation: dash 4.9s linear forwards;
  -webkit-animation-play-state: running;
  }
  @-webkit-keyframes dash {
  from {
          stroke-dashoffset: 2000;
  }
  to {
          stroke-dashoffset: 0;
  }
  </code></pre>
  
  <p>Here is my effort: 
  <a href="https://jsbin.com/qelonotoxu/1/edit?html,js,output" rel="nofollow">https://jsbin.com/qelonotoxu/1/edit?html,js,output</a></p>
  
  <p>and my animate code:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .st0{
  
      fill:none;
      stroke:#000000;
      stroke-dasharray: 2000;
      stroke-dashoffset: 2000;
      -webkit-animation: dash 10s linear forwards;
      -o-animation: dash 10s linear forwards;
      -moz-animation: dash 10s linear forwards;
      animation: dash 10s linear forwards;
  
  }
  
  @-webkit-keyframes dash {
      to {
  stroke-dashoffset: 2000;
      }
  }
  
  @keyframes dash {
    to {
      stroke-dashoffset: 0;
    }
  }
  
   &lt;/style&gt;
  </code></pre>
  
  <p>As you can see all of the letters are animated at the same time and if I change my stroke-dashoffset = 0, it does not animate at all.  Any suggestions are much appreciated. Thanks.  </p>