JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <!-- <circle cx="32" cy="32" r="30" fill="none" stroke-width="4" /> -->
  <path d="M2,32a30,30 0 1,0 60,0a30,30 0 1,0 -60,0" stroke-width="4" stroke-linecap="round" fill="none" />
  <path d="M32,17L32,47" stroke-width="4" stroke-linecap="round" />
  <path d="M17,32L47,32" stroke-width="4" stroke-linecap="round" />
  <path d="M80,80L54.213,54.213" stroke-width="6" stroke-linecap="round" />
</svg>

CSS

path{
  stroke: currentColor;
}

svg{
  max-width: 100px;
}

Babel + JSX

/**
 * SVG Zoom Icon
 */
Array.prototype.forEach.call(document.querySelectorAll('path'), (path) => {
	let _timing = 2000;
	let _length = path.getTotalLength();
  let _width  = path.style.strokeWidth || path.getAttribute('stroke-width');
	
  path.style.transition       = '';
  path.style.strokeWidth      = 0;
  path.style.strokeDasharray  = `0 ${_length * 10}`;
  path.style.strokeDashoffset = 0 - (_length / 2);
	
  requestAnimationFrame(() => {
	  path.style.transition         = `stroke-width ${_timing * 0.66}ms, stroke-dashoffset ${_timing}ms, stroke-dasharray ${_timing}ms`;
    path.style.strokeWidth        = _width;
    path.style.strokeDasharray    = `${_length} 0`;
  	path.style.strokeDashoffset   = 0;
  });
});