JSFiddle - React, Tailwind, and code Playground

by Nikhil

HTML

<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="398.0506822612086" viewBox="0, 0, 400,398.0506822612086"><g id="svgg"><path id="path0" d="M185.575 0.256 C 184.825 0.328,182.193 0.573,179.727 0.800 C 47.796 12.929,-35.950 153.284,14.693 277.388 C 16.093 280.819,17.263 283.889,17.294 284.211 C 17.368 284.994,20.974 291.607,21.867 292.598 C 22.256 293.030,22.866 294.082,23.221 294.937 C 24.806 298.752,32.341 311.752,35.283 315.749 L 37.049 318.147 106.146 318.029 C 170.547 317.919,175.521 317.863,179.330 317.210 C 227.637 308.927,260.109 265.940,261.832 207.992 L 262.099 199.025 264.341 195.906 C 269.573 188.629,271.372 182.848,270.520 176.044 C 267.784 154.191,241.504 145.033,225.207 160.253 C 214.106 170.620,213.706 184.458,224.111 198.190 L 225.842 200.474 225.615 209.107 C 224.579 248.468,204.636 277.730,175.033 283.319 C 171.596 283.968,167.400 284.016,113.450 284.016 L 55.556 284.016 52.178 277.296 C 12.245 197.848,38.479 104.352,113.450 58.931 C 166.967 26.509,235.677 27.443,285.850 61.274 L 288.074 62.773 314.505 62.673 L 340.936 62.573 336.257 57.891 C 302.965 24.575,259.599 4.135,214.306 0.410 C 209.815 0.041,188.970 -0.071,185.575 0.256 " stroke="none" fill-rule="evenodd"></path><path id="path1" d="M226.316 86.035 C 178.592 88.435,137.429 118.313,125.971 158.869 C 123.266 168.443,123.105 170.154,122.917 191.216 L 122.748 210.307 120.769 212.269 C 102.143 230.731,119.271 262.672,145.043 257.537 C 165.631 253.434,173.432 225.830,157.767 212.513 L 156.665 211.576 156.829 193.605 C 157.007 174.205,157.133 172.888,159.485 165.779 C 166.227 145.410,186.863 129.378,213.255 124.006 C 222.978 122.027,222.975 122.027,285.068 122.027 L 343.046 122.027 344.577 124.659 C 364.481 158.870,369.980 199.073,360.248 239.214 C 344.863 302.667,293.672 351.385,229.630 363.521 C 191.093 370.823,147.116 363.818,114.948 345.253 L 111.183 343.080 84.604 343.080 C 69.985 343.080,58.083 343.228,58.155...

CSS

html,body{
  width:100%;
  height:100%;
}
body {
  display:flex;
  justify-content:center;
  align-items:center;
}
#svg{
  width:50%;
  height:50%;
}

#path0 {
  width: 0;
  height: 0;  
  animation: path_one_anim 1.3s infinite ease-in-out;
  transform-origin: center center;
  overflow: hidden;
  fill: #fcb43b;
}

#path1 {
  width: 0;
  height: 0;  
  animation: path_two_anim 1.3s infinite ease-in-out;
  transform-origin: center center;
  overflow: hidden;
  fill: #b4b4b4; 
}


@keyframes path_one_anim {
 0%{
   /* opacity:0; */
   transform:rotateZ(180deg) scale(.8);
 } 
 25% {
    transform:rotateZ(5deg);
 }
 85%{
   opacity:1;  
 }
 90%{
   fill: #fcb43b;
 }
 100%{
   /* opacity:0; */
   transform:scale(.8);
   fill: #b4b4b4;
 }
}
@keyframes path_two_anim {
 0%{
   /* opacity:0; */
   transform:rotateZ(180deg) scale(.8);
 } 
 25% {
    transform:rotateZ(0deg);
 }
 85%{
   opacity:1;
 }
 90%{
   fill: #b4b4b4;
 }
 100%{
   /* opacity:0; */
   transform:scale(.8);
   fill: #fcb43b;
 }
}

JavaScript

gi