svg stroke animation

stroke dasharray, stroke-dashoffset, animattion alternate infinite

by Seetpal Singh

HTML

<pre id="out"></pre>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="340px" height="333px">
  <path id="path" class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
    s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
    C46.039,146.545,53.039,128.545,66.039,133.545z" />

</svg>

CSS

#path {
      stroke-dasharray: 821;
      stroke-dashoffset: 821;
      animation: dash 2s cubic-bezier(0.65, 0.05, 0.36, 1) alternate infinite;
    }
    
    @keyframes dash {
      100% {
        stroke-dashoffset: 0;
      }
    }

JavaScript

try {
  out.textContent += 'Total path length: ' + path.getTotalLength() + '\n';
  out.textContent += 'This test passes.\n';
} catch (error) {
  out.textContent += error;
}