JSFiddle - React, Tailwind, and code Playground

by Pavel Volyntsev

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400">
  <path fill="#90ed7d"
        d="M 159.60834442851936 206.8871519782637 A 134 134 0 0 1 221.29102570018546 60.95619594838047 L 221.29102570018546 60.95619594838047 A 134 134 0 0 0 159.60834442851936 206.8871519782637 Z"
        fill-opacity="0.25"></path>
  <path fill="#7cb5ec"
        d="M 289.9727077907049 42.00000277934589 A 134 134 0 0 1 335.4187604538397 302.0679824492988 L 317.2512562723038 251.64078946957932 A 80.4 80.4 0 0 0 289.9836246744229 95.60000166760753 Z"
        stroke="#ffffff" stroke-width="1" stroke-linejoin="round"
        ></path>
  <path fill="#434348"
        d="M 335.2926697830234 302.11333816819695 A 134 134 0 0 1 159.6392967711721 207.01752816852851 L 211.78357806270327 194.6105169011171 A 80.4 80.4 0 0 0 317.17560186981405 251.66800290091817 Z"
        stroke="#ffffff" stroke-width="1" stroke-linejoin="round"
        ></path>
  <path fill="#90ed7d"
        d="M 159.60834442851936 206.8871519782637 A 134 134 0 0 1 221.29102570018546 60.95619594838047 L 248.77461542011127 106.97371756902828 A 80.4 80.4 0 0 0 211.7650066571116 194.53229118695822 Z"
        stroke="#ffffff" stroke-width="1" stroke-linejoin="round"
        ></path>
  <path fill="#f7a35c"
        d="M 221.40610383954746 60.88754450742937 A 134 134 0 0 1 245.0110596582738 49.77799222430107 L 263.00663579496427 100.26679533458064 A 80.4 80.4 0 0 0 248.84366230372848 106.93252670445762 Z"
        stroke="#ffffff" stroke-width="1" stroke-linejoin="round"
        ></path>
  <path fill="#8085e9"
        d="M 245.13730413948082 49.73306640245612 A 134 134 0 0 1 289.8138766882984 42.00012926083531 L 289.88832601297906 95.60007755650119 A 80.4 80.4 0 0 0 263.0823824836885 100.23983984147367 Z"
        stroke="#ffffff" stroke-width="1" stroke-linejoin="round"
        ></path>
</svg>