JSFiddle - React, Tailwind, and code Playground

HTML

<p> SVG indigo</p>
<div id="html" style="border: 1px solid blue;">
    <svg xmlns="http://www.w3.org/2000/svg">
        <g transform="scale(4 4) translate(30 20)">
        <rect y="-5" x="-10" height="10" width="20" fill="#000"/> 
        <ellipse ry="4.5" rx="4.3" cy="-2.5" cx="" fill="#000"/> 
        <ellipse ry="4.5" rx="4.3" cy="2.5" cx="" fill="#000"/> 
        <rect y="0.6" x="-10" height="10" width="5.6" style="fill:#000;stroke-linejoin:round;stroke-miterlimit:4;stroke-width:1.35;stroke:#00f;stroke-opcacity:0.5;"/> 
        <rect y="7.4" x="5" height="10.1" width="5.5" style="fill:#000;stroke-linejoin:round;stroke-miterlimit:4;stroke-width:1.35;stroke:#000"/> 
        </g>
    </svg>
</div>

CSS

body { background:#eee; margin:0 }
    div { height:200px;}
    svg {top:5%; left:5%; 
      display:block; border:1px solid #ccc;
      background:#fff;
    }
    .face { stroke:#000; stroke-width:20px; stroke-linecap:round }