SVG Path Strok animation

by Dhruvang Gajjar

HTML

<svg viewBox="0 0 340 333">

  <linearGradient id="linear-gradient" x1="-100%" y1="0" x2="200%" y2="0">
    <stop offset="0" stop-color="red">
      <animate attributeName="offset" values="0;0.2;0.5" dur="2s" repeatCount="indefinite" />
    </stop>
    <stop offset="0.5" stop-color="yellow">
      <animate attributeName="offset" values="0.5;0.7;0.8;1" dur="2s" repeatCount="indefinite" />
    </stop>
  </linearGradient>

  <path class="path" fill="white" stroke="url(#linear-gradient)" stroke-width="4" 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{
  transition: all ease 2000s;
}