JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<svg version="1.1" id="rooster" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="45 -45 144 320"  xml:space="preserve" >
<g>
	<polygon fill="#AE2322" id="part15" class="part" points="132.995,105.44 129.41,81.412 174.583,45.666 	"/>
	<polygon fill="#AE2322" id="part14" class="part" points="120.479,106.067 104.833,80.133 139.685,17.341 	"/>
	<polygon fill="#AE2322" id="part13" class="part" points="103.068,105.195 85.363,88.307 99.183,29.596 	"/>
	<polygon fill="#AE2322" id="part12" class="part" points="86.738,113.037 68.798,100.064 74.289,47.859 	"/>
	<polygon fill="#AE2322" id="part11" class="part" points="74.726,122.548 57.851,115.042 52.368,68.577 	"/>
	<polygon fill="#AE2322" id="part10" class="part" points="66.88,132.845 51.096,129.842 38.876,94.283 	"/>
	<polygon fill="#AE2322" id="part9" class="part" points="66.391,142.27 55.833,144.725 38.592,126.121 	"/>
	<polygon fill="#AE2322" id="part8" class="part" points="109.687,155.8 109.687,194.804 41.731,234.004 	"/>
		<g>
		<path opacity="1" fill="#e70" id="part7" class="part" d="M124.75,176.173c13.998,0.248,24.22-1.403,27.259-7.066c7.042-13.127-2.394-25.345-2.394-25.345
			c-8.14-12.896-22.905-12.044-22.905-12.044s20.188-10.569,39.789,18.316c0,0,5.443,7.747,9.965,22.409
			c3.94,12.774,6.918,34.487,18.842,44.72L124.75,176.173z"/>
	</g>
	<g>
		<path opacity="1" fill="#f81" id="part6" class="part" d="M115.04,126.62c4.715-0.582,14.914,1.438,20.93,5.208c0,0,13.795,6.927,13.132,21.809
			c-0.286,6.421-12.157,15.057-24.403,18.291l81.46,14.397c-15.179-4.06-24.486-30.461-33.569-40.271
			c-10.425-11.258-18.686-15.885-18.686-15.885C134.086,118.645,121.408,122.569,115.04,126.62L115.04,126.62z"/>
	</g>
	<g>
		<path opacity="1" fill="#f93" id="part5" class="part"...

CSS

html,body {background: #fff; padding: 0; }
svg { position: fixed; height: 100%; width: 100% }
#rooster .part { animation-name: spinner_lm; animation-duration: 4s; animation-timing-function: linear; animation-iteration-count: infinite;  }
#rooster #part1 { animation-delay: 0.000s } 
#rooster #part2 { animation-delay: 0.050s }
#rooster #part3 { animation-delay: 0.100s }
#rooster #part4 { animation-delay: 0.150s }
#rooster #part5 { animation-delay: 0.200s }
#rooster #part6 { animation-delay: 0.250s }
#rooster #part7 { animation-delay: 0.300s }
#rooster #part8 { animation-delay: 0.350s }
#rooster #part9 { animation-delay: 0.400s }
#rooster #part10 { animation-delay: 0.450s }
#rooster #part11 { animation-delay: 0.500s }
#rooster #part12 { animation-delay: 0.550s }
#rooster #part13 { animation-delay: 0.600s }
#rooster #part14 { animation-delay: 0.650s }
#rooster #part15 { animation-delay: 0.700s }

@keyframes spinner_lm {
    0% {      opacity: 0;
    		  transform: translate3d(-7px, 0px, 0px);
    		  animation-timing-function: ease-in-out; }
    5% {      opacity: 1;
    		  transform: translate3d(7px, -7px, 0px);
    		  animation-timing-function: ease-in-out; }
    50% {     opacity: 1;
    		  transform: translate3d(0px, 0px, 0px);
    		  animation-timing-function: ease-in-out; }
    95% {     opacity: 1;
    		  transform: translate3d(0px, 0px, 0px);
    		  animation-timing-function: ease-in-out; }
    100% {    opacity: 0;
    		  transform: translate3d(0px, 0px, 0px);
    		  animation-timing-function: ease-in-out; }
}

#rooster .part { -webkit-animation-name: spinner_lm; -webkit-animation-duration: 4s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite;  }
#rooster #part1 { -webkit-animation-delay: 0.000s } 
#rooster #part2 { -webkit-animation-delay: 0.050s }
#rooster #part3 { -webkit-animation-delay: 0.100s }
#rooster #part4 { -webkit-animation-delay: 0.150s }
#rooster #part5 { -webkit-animation-delay: 0.200s }
#rooster...