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="550px" height="300px"  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.6L91.0,113.7z",
"M208.2,34.3v41.3c0,11.4-4,21.1-12.1,29.2c-8.1,8.1-17.8,12.1-29.1,12.1c-11.4,0-21.1-4-29.2-12.1c-8.1-8.1-12.1-17.8-12.1-29.2V34.3h15.8v41.2c0,7.1,2.5,13.1,7.5,18.1c5,5,11,7.5,18.1,7.5c7,0,13-2.5,18-7.5c5-5,7.5-11,7.5-18.1V34.3H213.2z",
"M233.5,26.6c-1.9,1.9-4.2,2.9-6.9,2.9c-2.7,0-4.9-1-6.8-2.9c-1.9-1.9-2.9-4.2-2.9-6.9c0-2.7,1-4.9,2.9-6.8c1.9-1.9,4.2-2.9,6.8-2.9c2.7,0,5,1,6.9,2.9c1.9,1.9,2.9,4.2,2.9,6.8C236.4,22.4,235.5,24.7,233.5,26.6z M218.8,116.8h15.7V34.3h-15.7V116.8z",
"M311.9,116.8V75.6c0-7-2.5-13-7.5-18c-5-5-11-7.5-18-7.5c-7.1,0-13.1,2.5-18.1,7.5c-5,5-7.5,11-7.5,18v41.3h-15.8V75.6c0-11.4,4-21.1,12.1-29.2c8.1-8.1,17.8-12.1,29.2-12.1c11.4,0,21.1,4,29.1,12.1c8.1,8.1,12.1,17.8,12.1,29.2v42.3H306.9z",
"M351.9,10.2v65.9c0,6.9,2.4,12.9,7.3,17.8c4.9,4.9,10.9,7.3,17.8,7.3v15.6c-11.2,0-20.8-4-28.8-12c-8-7.9-12-17.5-12-28.8V10.2H351.9z...