JSFiddle - React, Tailwind, and code Playground

by alanLiang

HTML

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 145 330" style="enable-background:new 0 0 145 330;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#56889C;stroke-width:0.7496;stroke-linecap:round;stroke-linejoin:round;}
	.st1{fill:#56889C;}
</style>
<g>
	<g>
		<path class="path" stroke="#000000" stroke-width="4" stroke-miterlimit="0" d="M95.5,273.8c-21.1,28.5-55.2,46.7-93.3,46c-62.8-1-112.9-52.8-111.9-115.6c1-62.8,52.8-112.9,115.6-111.9
			c35,0.6,66.1,16.9,86.5,42.2"/>
	</g>
	<path class="path" stroke="#000000" stroke-width="4" stroke-miterlimit="0" d="M97.9,275.8c0,2.3-1.9,4.2-4.2,4.2s-4.2-1.9-4.2-4.2s1.9-4.2,4.2-4.2S97.9,273.5,97.9,275.8z"/>
</g>
</svg>

CSS

.path {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: dash 5s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 500;
  }
  to {
    stroke-dashoffset: 0;
  }
}

JavaScript

var path = document.querySelector('.path');
var length = path.getTotalLength();
console.log(length);