JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

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"
	 viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<style type="text/css">
.path1 {
  animation: dash1 15s linear infinite alternate;
	}
  
  .path2 {
  animation: dash2 15s linear infinite alternate;
	}
  
  /*.path3 {
  animation: dash3 25s linear infinite alternate;
	} */

	@keyframes dash1 {
  from {
    stroke-dashoffset: 2500;
    stroke-dasharray: 360 80;
  }
  to {
    stroke-dashoffset: 0;
    stroke-dasharray: 360 80;
  }
	}
  
	@keyframes dash2 {
  from {
        stroke-dashoffset: 0;
    stroke-dasharray: 320 40;

  }
  to {
    stroke-dashoffset: 2500;
    stroke-dasharray: 320 40;
  }
	}

	/*@keyframes dash3 {
  from {
        stroke-dashoffset: 0;
    stroke-dasharray: 270 10;

  }
  to {
    stroke-dashoffset: 2500;
    stroke-dasharray: 270 10;
  }
	}*/

	.st4{fill:#FFFFFF;stroke:#EFEFEF;stroke-width:3;stroke-miterlimit:10;}
	.st1{fill:#FFFFFF;stroke:#1B7899;stroke-width:3;stroke-miterlimit:10;}
	.st2{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
	.st3{fill:#1B7899;}
</style>

<g>
	<rect x="8.9" y="9.3" class="st2 path1" width="108.9" height="108.9"/>
  <rect x="18.9" y="19.3" class="st1 path2" width="88.9" height="88.9"/>
  <!-- <rect x="28.9" y="29.3" class="st2 path3" width="68.9" height="68.9"/> -->
</g>

<!-- <g transform="scale(0.7) translate(25 25)"> -->
<g>
<path d="M69.8,29.2c-4.9,0-8.4,2.8-8.4,6.7V92c0,3.7,3.8,6.7,8.4,6.7c4.8,0,8.5-3,8.5-6.7V63.7h-8.7v3.4H74V91
	c0,2.2-1.7,3.6-4.2,3.6c-2.4,0-4.1-1.5-4.1-3.6V37c0-2.3,2.1-3.6,4.1-3.6c2.1,0,4.2,1.2,4.2,3.6v12.6h4.3V35.9
	C78.3,32,74.8,29.2,69.8,29.2"/>
<g>
	<rect x="50.6" y="50.6" class="st3" width="4.2" height="47.6"/>
	<path class="st3" d="M52.6,37.4c-1.6,0-2.9,1.3-2.9,2.9c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9
		C55.4,38.6,54.1,37.4,52.6,37.4"/>
</g>
</g>

</svg>