Icon Animation

inspired by a demo I just saw

by sperske

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 300 300" style="width:100%; height:100px; top:0; left:0;">
  <defs>
    <linearGradient gradientTransform="rotate(272, 0.5, 0.5)" x1="50%" y1="0%" x2="50%" y2="100%" id="ffflux-gradient">
      <stop stop-color="hsl(167, 72%, 60%)" stop-opacity="1" offset="0%"></stop>
      <stop stop-color="hsl(89, 56%, 66%)" stop-opacity="1" offset="100%"></stop>
    </linearGradient>
  </defs>

  <circle cx="-30" cy="-65" r="60" id="green-halo" fill="#fff" stroke="url(#ffflux-gradient)" stroke-width="5" stroke-dasharray="0,20000" transform="rotate(-180, 0, 0)" />
</svg>

JavaScript

const circle = document.getElementById('green-halo');
let angle = 0;

const animation = setInterval(function () {
	circle.setAttribute("stroke-dasharray", angle + ", 20000");
  if (angle >= 380) {
  	clearInterval(animation)
  }
  angle += 6;
}, 1)