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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 126 472"  xml:space="preserve">
<g data-number="1">
	<path style="stroke:#61C3A9; " d="M17.7,10.1c0,5-4.2,9.1-9.3,9c-4.8-0.1-8.7-4.2-8.7-9c0-5,4.2-9.1,9.3-9
		C13.8,1.2,17.7,5.3,17.7,10.1z"/>
</g>
<g data-number="2">
	<path style="stroke:#94D3C0;" d="M33.3,39c2.1,0.1,3.4,1.2,3.4,3.4c0,2.4-1.2,3.7-3.6,3.7c-2.2,0-3.4-1.2-3.4-3.4
		C29.6,40.3,30.9,39.1,33.3,39z"/>
</g>
<g data-number="3">
	<path style="stroke:#61C3A9; " d="M73.7,61.3c-0.1,5-4.4,9-9.5,8.8c-4.8-0.2-8.6-4.4-8.5-9.2c0.1-5,4.4-9,9.5-8.8
		C70,52.3,73.8,56.5,73.7,61.3z"/>
</g>
<g data-number="4">
	<path style="stroke:#7ACAB4;" d="M71.9,96.1c-0.5,3.7-2.2,6-5.8,5.9c-3.3-0.1-5.3-2.1-5.4-5.4c0-3.5,2.1-5.6,5.6-5.6
		C69.7,91.1,71.2,93.4,71.9,96.1z"/>
</g>
<g data-number="5">
	<path style="stroke:#61C3A9;" d="M88.7,148.1c5,0,9.1,4.2,9,9.2c-0.1,4.8-4.1,8.8-9,8.8c-5,0-9.2-4.2-9-9.2
		C79.8,152,83.8,148.1,88.7,148.1z"/>
</g>
<g data-number="6">
	<path style="stroke:#5DC2A7; " d="M97.7,203.8c-0.1,8.1-6.7,14.5-14.8,14.3c-8.1-0.2-14.4-6.8-14.2-14.9c0.2-7.9,6.7-14.1,14.6-14.1
		C91.3,189.1,97.8,195.7,97.7,203.8z"/>
</g>
<g data-number="7">
	<path style="stroke:#7ACAB4;" d="M78.9,248.1c-0.5,3.7-2.2,6-5.8,5.9c-3.3-0.1-5.3-2.1-5.4-5.4c0-3.5,2.1-5.6,5.6-5.6
		C76.7,243.1,78.2,245.4,78.9,248.1z"/>
</g>
<g data-number="8">
	<path style="stroke:#61C3A9; " d="M42.6,276.1c-5,0-9.1-4.3-9-9.3c0.2-4.8,4.2-8.7,9.1-8.7c5,0,9.1,4.3,9,9.3
		C51.5,272.2,47.5,276.1,42.6,276.1z"/>
</g>
<g data-number="9">
	<path style="stroke:#7ACAB4;" d="M28.8,311.7c-0.5,3.1-2.1,5.3-5.4,5.4c-3.5,0.1-5.7-2-5.6-5.6c0.1-3.5,2.2-5.6,5.8-5.4
		C26.8,306.3,28.4,308.5,28.8,311.7z"/>
</g>
<g data-number="10">
	<path style="stroke:#7ACAB4;"...

CSS

svg{
	  disply:block;
    width:150px;
	}
  path{
		fill:transparent;
	}
  svg path{
    opacity:0;
    transform:translate3d(0,0,0);
    transition:all .55s;
  }
  svg.show path{
    opacity:1;
    stroke-dashoffset:0 !important;
    transform:translate3d(0,0,0);
  }

JavaScript

var circles = document.querySelectorAll("g[data-number] path");
for(var i = 0, l = circles.length; i < l; i++){
	circles[i].style.transitionDelay = i*(0.05) + 's';
  circles[i].style.strokeDashoffset = circles[i].style.strokeDasharray = circles[i].getTotalLength();

}
setTimeout(function(){
	document.querySelector("svg").classList.add("show");
}, 2000);