ShibafuAnimation

index.html

<svg
   viewBox="0 0 100 99.999999"
   height="100"
   width="100"
   y="0px"
   x="0px">
  <path
     id="line1"
     d="m 16.65463,7.2500163 7,66.9999997"
     style="fill:none;stroke:#668a33;stroke-width:9;stroke-miterlimit:10" />
  <path
     id="line2"
     d="m 48.65463,6.2500163 0,67.9999997"
     style="fill:none;stroke:#92af60;stroke-width:9;stroke-miterlimit:10" />
  <path
     id="line3"
     d="m 79.65463,7.2500163 -9,66.9999997"
     style="fill:none;stroke:#b0d474;stroke-width:9;stroke-miterlimit:10" />
  <path
     id="line4"
     d="m 0.01275494,91.250016 97.99999506,-0.5 -15,-15.5"
     style="fill:none;stroke:#6b341b;stroke-width:5;stroke-linejoin:bevel;stroke-miterlimit:10" />
</svg>

<br />
<a href="">retry</a>

script.js

var animateTime  = 1500;   // 芝の生える速さ (ms)
var animateDelay = 500;    // 芝の生える間隔 (ms)
var ease         = "easeOutQuad" // easing ↓
// http://semooh.jp/jquery/cont/doc/easing/

$("path").each(function(i){
  var l=this.getTotalLength();
  var t = $(this).css({strokeDasharray: l, strokeDashoffset:l});
    setTimeout(function(){
      t.animate({strokeDashoffset:0}, animateTime, ease)
    }, i*animateDelay)
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

shibafuanimation.markdown

ShibafuAnimation

A Pen by ygkn on CodePen.

License.