JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewBox="-1.1 -1.1 2.2 2.2">
  <g>
    <path d="M 1 0 A 1 1 0 0 1 -0.8085734960732691 0.5883951915573843 L 0 0" fill="#ACC6D9" stroke="#ACC6D9" stroke-width="0.01"></path>
    <path d="M -0.8085734960732691 0.5883951915573843 A 1 1 0 0 1 -0.8100500340267164 -0.5863607612837983 L 0 0" fill="#93B5D1" stroke="#93B5D1" stroke-width="0"></path>
    <path d="M -0.8100500340267164 -0.5863607612837983 A 1 1 0 0 1 0.3063859980740773 -0.9519073590345604 L 0 0" fill="#81A8C9" stroke="#81A8C9" stroke-width="0"></path>
    <path d="M 0.3063859980740773 -0.9519073590345604 A 1 1 0 0 1 0.999992891049955 -0.0037706563822101314 L 0 0" fill="#6E9CC1" stroke="#6E9CC1" stroke-width="0"></path>
  </g>
  <circle cx="0" cy="0" r="0.5" fill="#393D45"></circle>
</svg>

CSS

path{
  transition: transform 0.2s;
}
path:hover{  
  transform: scale(1.1);
}