title: SVG handwriting animation without using stroke properties
body: <p>I'm trying to work on a SVG handwriting animation. I've already researched some tutorials but all them are using SVG stroke properties and it's not quite working for me, because in my situation the animation should be on the <code>fill</code>, not the <code>stroke</code>.</p>
  
  <p>I've found things like that:</p>
  
  <pre><code>svg path {
    fill: none;
    stroke: #000;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1700;
    stroke-dashoffset: 1700;
    -webkit-animation: dash 5s linear forwards;
    animation: dash 5s linear forwards;
  }
  
  @-webkit-keyframes dash {
    to {
      stroke-dashoffset: 0;
    }
  }
  
  @keyframes dash {
    to {
      stroke-dashoffset: 0;
    }
  }
  </code></pre>
  
  <p>Here's the SVG I'm working on: <a href="http://codepen.io/boyporreta/pen/BNewgG" rel="nofollow">http://codepen.io/boyporreta/pen/BNewgG</a></p>
  
  <p>Is there a way to create this animation using <code>fill</code> instead of <code>stroke</code>?</p>
  
  <p>Thanks in advance.</p>