JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<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"
	 width="160px" height="30px" viewBox="0 0 160 30" enable-background="new 0 0 160 30" xml:space="preserve">

<path id="mypath" fill="none" stroke="#20181E" stroke-width="2.67" stroke-miterlimit="10" d="M155.8783,12.6029c-6.1826,0-6.1826,6-12.3652,6c-6.1826,0-6.1826-6-12.3653-6c-6.1784,0-6.1784,6-12.3568,6c-6.1803,0-6.1803-6-12.3607-6c-6.1782,0-6.1782,6-12.3564,6c-8.8511,0-8.8511-6-17.7022-6s-8.8511,6-17.7023,6c-8.8499,0-8.8499-6-17.6998-6c-8.8495,0-8.8495,6-17.6989,6c-8.8464,0-8.8464-6-17.6928-6"/>
    
<animate xlink:href="#mypath" attributeName="d" from="M155.8783,12.6029c-6.1826,0-6.1826,6-12.3652,6c-6.1826,0-6.1826-6-12.3653-6c-6.1784,0-6.1784,6-12.3568,6c-6.1803,0-6.1803-6-12.3607-6c-6.1782,0-6.1782,6-12.3564,6c-8.8511,0-8.8511-6-17.7022-6s-8.8511,6-17.7023,6c-8.8499,0-8.8499-6-17.6998-6c-8.8495,0-8.8495,6-17.6989,6c-8.8464,0-8.8464-6-17.6928-6" to="M5.5779,27.5865
    c6.1826,0,6.1826-23.14,12.3652-23.14s6.1826,23.14,12.3653,23.14c6.1784,0,6.1784-23.14,12.3568-23.14c6.1803,0,6.1803,23.14,12.3607,23.14c6.1782,0,6.1782-23.14,12.3564-23.14c8.8511,0,8.8511,23.14,17.7023,23.14c8.8511,0,8.8511-23.14,17.7022-23.14c8.8499,0,8.8499,23.14,17.6998,23.14c8.8495,0,8.8495-23.14,17.6989-23.14c8.8464,0,8.8464,23.14,17.6928,23.14" dur="2s" fill="freeze" keySplines="
                0.1 0.8 0.2 1;
                0.1 0.8 0.2 1;
                0.1 0.8 0.2 1;
                0.1 0.8 0.2 1;
                0.1 0.8 0.2 1;
                0.1 0.8 0.2 1"
            keyTimes="
                0;0.22;0.33;0.55;0.66;0.88;1"
            calcMode="spline" repeatCount="indefinite" />
    
</svg>