JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="459.183" height="395.301" viewBox="0 0 459.183 395.301">
  <path id="path" data-name="Path 1" d="" transform="translate(0 -4.699)" fill="#60e8b5"/>
</svg>

CSS

body {
  background-color: #022040;
}

#path {
  d: path('M268.629,4.7C379.085,4.7,363.42,153.123,442,265.376S310.457,400,200,400,0,310.457,0,200,158.172,4.7,268.629,4.7Z'); 
  stroke: #1EFE64;
  fill: none;
  animation-name: path;
  animation-duration: 5s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}


@keyframes path {

  0% {
     d: path('M268.629,4.7C379.085,4.7,363.42,153.123,442,265.376S310.457,400,200,400,0,310.457,0,200,158.172,4.7,268.629,4.7Z5');
  }

  25% {
     d: path('M180.073-12.762c110.457,0,214.529,74.836,293.106,187.089s-161.446,179.605-271.9,179.605S17.929,315.965,17.929,205.508,69.616-12.762,180.073-12.762Z');
  }
  
  50% {
     d: path('M268.629,4.7C379.085,4.7,363.42,153.123,442,265.376S310.457,400,200,400,0,310.457,0,200,158.172,4.7,268.629,4.7Z'); 
  }
  
  75% {
     d: path('M180.073-12.762c110.457,0,214.529,74.836,293.106,187.089s-161.446,179.605-271.9,179.605S17.929,315.965,17.929,205.508,69.616-12.762,180.073-12.762Z'); 
  }
  
  100% {
     d: path('M268.629,4.7C379.085,4.7,363.42,153.123,442,265.376S310.457,400,200,400,0,310.457,0,200,158.172,4.7,268.629,4.7Z'); 
  }
}