JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<svg version="1.1" id="animHome" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 118 100" style="enable-background:new 0 0 118 100;" xml:space="preserve">
<path id="aubergine" class="home_st0" d="M37.4-11c0.6,2,2,3.7,3.8,4.7c1.9,1,4.1,1.2,6.3,0.5c2.8-0.9,5.3-3.3,6.5-6.1
	c1.4-3.3,1.7-7.1,1-11.3c-0.4-2.7-1.3-5.6-2.4-8.1c-0.1-0.3-0.3-0.7-0.5-1.1h0.1c0.2,0,0.3-0.1,0.4-0.3c0.1-0.2,0.1-0.4,0-0.5
	c0-0.1-1-2.1-2.6-3.3c-1-0.8-2.3-1.2-3.5-1.3c-0.2-0.7-0.6-3.1-1.9-2.8c-0.2,0.1-0.3,0.1-0.4,0.1c-1.2,0.2-0.8,2.8-0.8,3.2l0,0
	c-1,0.4-1.8,1.2-2.5,2.2c-0.9,1.4-1,3.3-1,3.8c0,0.1,0,0.2,0,0.3c0.1,0.3,0.3,0.5,0.6,0.4c0,0.4,0,0.8,0,1.3c0.2,3.2,0,4.5-1,8
	c-0.3,0.9-0.6,1.8-1,2.7C37.6-16.4,36.6-14,37.4-11z M51-33.7L51-33.7c-1.7,0-2.9-0.7-2.9-0.7c-0.2-0.1-0.3-0.1-0.5-0.1l-0.1,0.1
	c-0.2,0.1-0.3,0.4-0.3,0.6c0,0.1,0.2,1.4-1.4,2.7c-0.4-0.2-1.2-0.8-1.8-2.3c-0.1-0.2-0.2-0.3-0.5-0.4c-0.2,0-0.4,0-0.6,0.2
	c0,0-0.7,0.7-1.7,1.2c0.1-0.7,0.3-1.6,0.8-2.3c0.5-0.8,1.3-1.5,2-1.7c0.3-0.1,0.4-0.3,0.5-0.5c0.1-0.3-0.5-2.5,0.2-2.7
	c0.6-0.1,0.9,2.3,1.1,2.5c0.1,0.1,0.3,0.3,0.6,0.3c1.1,0,2.1,0.4,3,1.1C50-35.1,50.6-34.3,51-33.7z M38.6-11.4
	c-0.7-2.5,0.1-4.7,1.1-6.9c0.4-0.9,0.7-1.8,1-2.8c1-3.6,1.3-5,1.1-8.4c0-0.5-0.1-1.4,0-1.8c0.6-0.3,1-0.6,1.4-0.9
	c1.1,2,2.4,2.4,2.5,2.4s0.2,0,0.3,0s0.1-0.1,0.2-0.1c1.5-1,2-2.2,2.1-3c0.6,0.2,1.4,0.4,2.3,0.5c0.3,0.6,0.6,1.1,0.8,1.6
	c1.1,2.4,1.9,5.2,2.3,7.8c0.7,4,0.4,7.6-0.9,10.6c-1,2.5-3.2,4.6-5.6,5.4c-1.8,0.6-3.7,0.5-5.3-0.4C40.2-8.2,39.1-9.6,38.6-11.4z
	 M47.2-9.2c1.6-0.7,3.1-2.3,3.8-4.3c0.4-1.1,0.7-2.2,0.8-3.5c0-0.3,0.3-0.5,0.5-0.4c0.3,0,0.5,0.3,0.4,0.5c-0.1,1.3-0.4,2.6-0.9,3.7
	c-0.8,2.2-2.5,4-4.3,4.9c0,0,0,0-0.1,0c-0.2,0.1-0.5,0-0.6-0.3C46.9-8.8,47-9.1,47.2-9.2z"/>
<path id="poisson" class="home_st0"...

CSS

#container{position:relative; display:block; width:400px; height:400px; background:lime;}
.home_st0{fill:red;}
.home_st1{fill:#6CC3BD;}
.home_st2{fill:none;stroke:red;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:200;stroke-dashoffset:200;}
.home_st3{fill:none;stroke:red;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:20;stroke-dashoffset:20;}
.home_st4{fill:none;stroke:red;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:50;stroke-dashoffset:50;}

#casserole{stroke-dasharray:200; stroke-dashoffset:200;}
#casserolePL{stroke-dasharray:20; stroke-dashoffset:20; }
#casserolePR{stroke-dasharray:20; stroke-dashoffset:20; }
#casseroleL{stroke-dasharray:50;  stroke-dashoffset:50;}
#casserole{animation: casserole .8s ease-in-out forwards .8s;}
	@keyframes casserole {
	    from{stroke-dashoffset:200; }
	    to {stroke-dashoffset:0;}
	}
#casserolePL{animation: casserolePL .5s ease-in-out forwards 1s;}
	@keyframes casserolePL {
	    from{stroke-dashoffset:20; }
	    to {stroke-dashoffset:40;}
	}
#casserolePR{animation: casserolePR .5s ease-in-out forwards 1.1s;}
	@keyframes casserolePR {
	    from{stroke-dashoffset:20; }
	    to {stroke-dashoffset:0;}
	}
#casseroleL{animation: casseroleL .5s ease-in-out forwards 1.2s;}
	@keyframes casseroleL {
	    from{stroke-dashoffset:50; }
	    to {stroke-dashoffset:100;}
	}

#aubergine{transform: translate(45%, 0%) rotate(0deg); transform-origin:center center;}
#aubergine{animation: aubergine 10s linear infinite 1.5s;}
	@keyframes aubergine {
	    0%{transform: translate(45%, 0%) rotate(0deg);}
	    20%,100% {transform: translate(45%, 400%) rotate(200deg);}
	}
#poisson{transform: translate(45%, 0%) rotate(0deg); transform-origin:center center;}
#poisson{animation: poisson 10s linear infinite 1.5s;}
	@keyframes poisson {
	    9%{transform: translate(45%, 0%) rotate(0deg);}
	    29%,100%...