JSFiddle - React, Tailwind, and code Playground

by Rijo R

HTML

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
              "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<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="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">
	<defs>
    <style type="text/css"><![CDATA[
      .path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

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

    ]]></style>
  </defs>
				<path class="path" fill="#fff" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M55.705,62.945c5.578-2.009,11.42-3.034,16.99-0.439c5.691,2.651,8.957,9.033,9.314,15.052
					c0.183,3.079-0.806,6.059-2.22,8.739c-1.202,2.28-3.54,3.797-4.524,6.2c-2.32,5.665,0.922,11.94-3.213,17.2
					c-4.89,6.22-14.041,3.142-16.471-3.559c-1.748-4.822,0.273-9.766-2.077-14.617c-1.04-2.146-2.935-3.939-4.155-5.99
					c-1.745-2.933-2.238-6.47-1.779-9.808c0.806-5.86,5.025-9.411,8.963-13.261c1.73-1.693-0.923-4.343-2.652-2.651
					c-4.917,4.808-9.118,9.031-10.101,16.174c-0.4,2.913,0.089,5.774,1.011,8.537c1.378,4.124,4.931,6.898,6.324,10.957
					c1.225,3.566-0.035,7.898,0.851,11.656c0.678,2.875,2.764,5.315,5.02,7.084c4.497,3.523,11.489,3.486,15.896-0.184
					c6.677-5.56,3.998-11.873,5.518-19.365c0.338-1.664,2.744-3.792,3.839-5.238c0.947-1.252,1.73-2.832,2.232-4.316
					c1.238-3.656,1.461-7.127,0.94-10.937c-0.854-6.257-5.439-11.904-10.823-14.912c-6.122-3.419-13.625-2.191-19.879,0.061
					C52.451,60.142,53.425,63.767,55.705,62.945z"/>
			
			<path  class="path" fill="#fff" stroke="#000000" stroke-width="4" stroke-miterlimit="10"...