JSFiddle - React, Tailwind, and code Playground

by amenadiel

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use -->

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
 <defs>
 <circle id="myCircle" cx="5" cy="5" r="4"/>
 <path id="mypath" d="M 1,3
           A 2,2 0,0,1 5,3
           A 2,2 0,0,1 9,3
           Q 9,6 5,9
           Q 1,6 1,3 z"/>
 </defs>
 <g id="clipping_front2">
<use href="#mypath" x="0" fill="blue"/>
  
<use href="#myCircle" x="10" fill="blue"/>
  <use href="#myCircle" x="20" fill="white" stroke="blue"/>
  </g>
</svg>