JSFiddle - React, Tailwind, and code Playground

by nsjithin

HTML

<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<svg version="1.1" id="quintet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="500px" height="300px" viewBox="0 0 494 127" enable-background="new 0 0 494 127" xml:space="preserve"></svg>

JavaScript

var s = Snap("#quintet");

var letters = [
    "M88.9,110.3c-7.9,4.4-16.4,6.5-25.5,6.5c-14.7,0-27.3-5.2-37.8-15.7C15.2,90.7,10,78.1,10,63.4c0-14.8,5.2-27.4,15.6-37.8C36.1,15.2,48.7,10,63.4,10c14.7,0,27.3,5.2,37.8,15.6c10.4,10.4,15.6,23,15.6,37.8c0,14.7-5.2,27.3-15.6,37.7c4.9,4.9,10.1,10.1,15.7,15.7h-15.5l-20.1-20c6-3.3,10.8-7.8,14.4-13.7c3.7-6,5.5-12.6,5.5-19.7c0-10.5-3.7-19.4-11.1-26.8c-7.4-7.4-16.3-11.1-26.8-11.1C53,25.5,44,29.2,36.6,36.6C29.3,44,25.6,53,25.6,63.4c0,10.5,3.7,19.4,11.1,26.8c7.4,7.4,16.3,11.1,26.8,11.1c4.8,0,9.4-0.9,13.8-2.6L88.9,110.3z",
    "M177.008,41.025c0,0,0,38.234,0,39.067c0,13.333-10.808,24.141-24.14,24.141s-24.139-10.808-24.139-24.141 c0-0.824,0-39.051,0-39.051l-14.921,0.005c0,0,0,37.492,0,39.046c0,21.573,17.488,39.063,39.061,39.063 c21.573,0,39.061-17.488,39.061-39.063c0-1.433,0-39.072,0-39.072L177.008,41.025z"
    
];


var mypath = s.path("M88.9,110.3c-7.9,4.4-16.4,6.5-25.5,6.5c-14.7,0-27.3-5.2-37.8-15.7C15.2,90.7,10,78.1,10,63.4c0-14.8,5.2-27.4,15.6-37.8C36.1,15.2,48.7,10,63.4,10c14.7,0,27.3,5.2,37.8,15.6c10.4,10.4,15.6,23,15.6,37.8c0,14.7-5.2,27.3-15.6,37.7c4.9,4.9,10.1,10.1,15.7,15.7h-15.5l-20.1-20c6-3.3,10.8-7.8,14.4-13.7c3.7-6,5.5-12.6,5.5-19.7c0-10.5-3.7-19.4-11.1-26.8c-7.4-7.4-16.3-11.1-26.8-11.1C53,25.5,44,29.2,36.6,36.6C29.3,44,25.6,53,25.6,63.4c0,10.5,3.7,19.4,11.1,26.8c7.4,7.4,16.3,11.1,26.8,11.1c4.8,0,9.4-0.9,13.8-2.6L88.9,110.3z");

var len = mypath.getTotalLength();
console.log(len);

mypath.attr({
	  stroke: '#fc0',
	  strokeWidth: 1,
    fill: 'none',
    // Draw Path
    "stroke-dasharray": len + " " + len,
    "stroke-dashoffset": len
  }).animate({"stroke-dashoffset": 10}, 2500,mina.easeinout);