title: Fill SVG shape from one point to another point
body: <p>I want to fill SVG shape from top left to end point with animation. I have tried css and also fill using tweenmax but cannot fill shape from top left end to next end point.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.fadeIn {
    animation-name: fade;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    max-width: 0;
    float: left;
  }
  
  @keyframes fade {
    0% {
      max-width: 0;
    }
  
    100% {
      max-width: 112px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg class="fadeIn"   x="0px" y="0px"
                width="112px" height="60.775px" viewBox="0 0 112 60.775" enable-background="new 0 0 112 60.775" xml:space="preserve" &gt;
   &lt;path   fill="blue" d="M103.371,0.899L112,4.315c0,0-5.034,55.018-63.82,56.457             c0,0-28.584,0.898-48.18-24.273c0,0,8.629-13.305,11.505-13.665c0,0,9.528,20.137,38.652,20.497c0,0,39.551,1.258,44.405-43.331
               L103.371,0.899z"/&gt;
              &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>