JSFiddle - React, Tailwind, and code Playground
by MaxMarkson
HTML
<svg id="mimic_id" width="750" height="600" viewBox="0 0 750 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path transform="rotate(-20,120,120)" d="M -7,0 c 0 -7 14 -7 14 0 c -2 -2 -10 -2 -180 0" id="ButtonOnHighlight" style="fill:url(#linearOnGradientGlowWhite); stroke:none" />
<linearGradient id="linearGradientWhite">
<stop id="stop3032" style="stop-color:#ffffff;stop-opacity:1" offset="0" />
<stop id="stop3034" style="stop-color:#ffffff;stop-opacity:0" offset="1" />
</linearGradient>
<linearGradient id="linearLedGradientBlack">
<stop id="stop3163" style="stop-color:#000000;stop-opacity:0" offset="0.15" />
<stop id="stop3161" style="stop-color:#000000;stop-opacity:0.33" offset="1" />
</linearGradient>
<linearGradient x1="0" y1="-70" x2="0" y2="0" id="linearLedGradientGlowWhite" xlink:href="#linearGradientWhite" gradientUnits="userSpaceOnUse" />
<radialGradient cx="0" cy="0" r="80" fx="20" fy="20" id="linearLedGradientGlowBlack" xlink:href="#linearLedGradientBlack" gradientUnits="userSpaceOnUse" />
<g id="Led" transform="scale (0.1)">
<circle id="LedBase" cx="0" cy="0" r="70" />
<circle id="LedGlow" cx="0" cy="0" r="70" style="fill:url(#linearLedGradientGlowBlack);stroke:none" />
<path transform="rotate(-60,0,0)" d="M -65,0 c 0,-85 130,-85 130,0 c -20,-20 -110,-20 -130,0" id="fillLedHighlight" style="fill:url(#linearLedGradientGlowWhite); stroke:none" />
</g>
<g id="bottom_piston" style="fill:#aaa; stroke: black; stroke-width:1px;">
<rect x="0" y="0" height="5" width="90" />
<rect x="42" y="5" height="50" width="4" />
</g>
<g id="top_piston" style="fill:#aaa; stroke: black; stroke-width:1px;">
<rect x="42" y="0" height="50" width="4" />
<rect x="0" y="50" height="5" width="90" />
...