JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" style="background:#f33" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 600 600"  xml:space="preserve">
<g>
	<path  d="M74.2,236.4c-2.5,0-4.9-0.5-6.8-1.6c-1.8-1.1-2.8-2.5-2.8-4c0-1.5,1-2.9,2.8-4c0.1,0,0.2,0,0.2,0.1
		c0,0.1,0,0.2-0.1,0.2c-1.7,1-2.7,2.3-2.7,3.7c0,1.4,1,2.7,2.7,3.7c3.6,2.1,9.6,2.1,13.2,0c1.7-1,2.7-2.3,2.7-3.7
		c0-1.4-1-2.7-2.7-3.7c-0.1,0-0.1-0.1-0.1-0.2c0-0.1,0.1-0.1,0.2-0.1c1.8,1.1,2.8,2.5,2.8,4c0,1.5-1,2.9-2.8,4
		C79.1,235.9,76.6,236.4,74.2,236.4"/>
</g>
<g>
	<path  d="M74.2,241.7c-2.5,0-4.9-0.5-6.8-1.6c-1.8-1.1-2.8-2.5-2.8-4c0-1.5,1-2.9,2.8-4c0.1,0,0.2,0,0.2,0.1
		c0,0.1,0,0.2-0.1,0.2c-1.7,1-2.7,2.3-2.7,3.7s1,2.7,2.7,3.7c3.6,2.1,9.6,2.1,13.2,0c1.7-1,2.7-2.3,2.7-3.7s-1-2.7-2.7-3.7
		c-0.1,0-0.1-0.1-0.1-0.2c0-0.1,0.1-0.1,0.2-0.1c1.8,1.1,2.8,2.5,2.8,4c0,1.5-1,2.9-2.8,4C79.1,241.2,76.6,241.7,74.2,241.7"/>
</g>
<g>
	<path style="fill:#FFFFFF; " d="M74.2,247c-2.5,0-4.9-0.5-6.8-1.6c-1.8-1.1-2.8-2.5-2.8-4c0-1.5,1-2.9,2.8-4c0.1,0,0.2,0,0.2,0.1
		c0,0.1,0,0.2-0.1,0.2c-1.7,1-2.7,2.3-2.7,3.7c0,1.4,1,2.7,2.7,3.7c3.6,2.1,9.6,2.1,13.2,0c1.7-1,2.7-2.3,2.7-3.7
		c0-1.4-1-2.7-2.7-3.7c-0.1,0-0.1-0.1-0.1-0.2c0-0.1,0.1-0.1,0.2-0.1c1.8,1.1,2.8,2.5,2.8,4c0,1.5-1,2.9-2.8,4
		C79.1,246.5,76.6,247,74.2,247"/>
</g>
<g>
	<path  d="M74.2,252.3c-2.5,0-4.9-0.5-6.8-1.6c-1.8-1.1-2.8-2.5-2.8-4c0-1.5,1-2.9,2.8-4c0.1,0,0.2,0,0.2,0.1
		c0,0.1,0,0.2-0.1,0.2c-1.7,1-2.7,2.3-2.7,3.7c0,1.4,1,2.7,2.7,3.7c3.6,2.1,9.6,2.1,13.2,0c1.7-1,2.7-2.3,2.7-3.7
		c0-1.4-1-2.7-2.7-3.7c-0.1,0-0.1-0.1-0.1-0.2c0-0.1,0.1-0.1,0.2-0.1c1.8,1.1,2.8,2.5,2.8,4c0,1.5-1,2.9-2.8,4
		C79.1,251.7,76.6,252.3,74.2,252.3"/>
</g>
<g>
	<path ...

CSS

path{
  stroke-width:1px;
  stroke:#fff;
  fill:transparent;
}
circle{
  opacity:0;
  transition:opacity 2s;
  fill:#fff;
}

JavaScript

var path = document.querySelectorAll("path");
for(var i = 0, l = path.length; i < l; i++){
	var length = path[i].getTotalLength();
  console.info(length);
  path[i].style.strokeDasharray = length;
  path[i].style.strokeDashoffset = length;
  // Trigger a layout so styles are calculated & the browser
  // picks up the starting position before animating
  path[i].getBoundingClientRect();
  // Define our transition
  path[i].style.transition = 'stroke-dashoffset 2s 2s ease-in-out';
  // Go!
  path[i].style.strokeDashoffset = '0';
}
var circle = document.querySelectorAll("circle");
for(var i = 0, l = circle.length; i < l; i++){
	circle[i].style.opacity = "1";
}