JSFiddle - React, Tailwind, and code Playground

by Ishank Dubey

HTML

<svg width="140" height="170">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>
<path d=" M45 49
           A 5 5 0 0 1 55 44
           " stroke="orange" fill='none' />
           <path d=" M100 49
           A 5 5 0 0 1 105 55
           " stroke="orange" fill='none' />
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none"/>
<circle cx="85" cy="80" r="5" style="stroke: black;fill: green;"/>
<circle cx="55" cy="80" r="5" style="stroke: black;fill: green;"/>

<g id='cat-w'>
<line x1='75' y1='95' x2='135' y2='85' style="stroke: black;"></line>
<line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>
</g>
<use xlink:href="#cat-w" transform="translate(140 0) scale(-1,1)"/>
<circle cx="70" cy="95" r="5" style="stroke: black; fill: RED"/>
 <path d=" M45 120
           A 30 30 0 0 0 95 120
           " stroke="orange" fill='none' />
<!--<line x1='70' y1='95' x2='70' y2='120' style="stroke: black;"></line>-->
</svg>

CSS

svg {
  background-color: clear;
}