JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150" viewBox="200 150" >
 <defs>
 <g id="switcher.y" cursor="pointer" stroke-width="0.15">
     <g transform="scale(1,1.375)">
         <g transform="scale(1 1)">
             <rect x="-0.5" y="-0.5" width="1" height="1" stroke="white" pointer-events="none"></rect>
             <rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
                 <!--it makes half-visible selecting effect -->
                 <set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"></set>
                 <!-- explicitly reverse the opacity animation on mouseout -->
                 <set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"></set>
             </rect>
             <line x1="0" y1="-0.25" x2="0" y2="0.25" stroke-width="0.17" stroke-linecap="round" pointer-events="none"></line><!-- vertical on -->
             <!--animation-->
             <!--it scales a few times after change committed to this element -->
             <animateTransform attributeType="XML" attributeName="transform" type="scale" dur="0.5s" keyTimes="0;0.5;0.5;1" values="1;1.12;1.12;1" repeatCount="6" fill="freeze"></animateTransform>
             <!--it animates scale up and scale down onclick -->
             <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur="0.2s" fill="freeze"></animateTransform>
             <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur="0.2s" fill="freeze"></animateTransform>
         </g>
     </g>
 </g>
 </defs>
 
 <g id="Фон - Векторная_сажа и Лента">
  <path fill-rule="evenodd" d="M86.4 28.8c.2-1.1-1.6-.9-1 0C85.9 28.8 86 29 86.4 28.8M85.9 36.2c.6.2 1.1.2.8.9.7-.2 1.3.3 1.8.6.9-.2 1.5 0 2.2.3.3-1.1 1.4-1.4...