JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <button id="scale">
    scale
  </button>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.96 254.59">
      <defs>
        <filter filterUnits="userSpaceOnUse" id="f1">
          <feDropShadow filterUnits="userSpaceOnUse" dx="1.5" dy="0.8" stdDeviation="1"></feDropShadow>
        </filter>
        <filter filterUnits="userSpaceOnUse" id="f2">
          <feDropShadow filterUnits="userSpaceOnUse" dx="-2" dy="1.8" stdDeviation="1"></feDropShadow>
        </filter>
        <filter filterUnits="userSpaceOnUse" id="f3">
          <feDropShadow flood-opacity="0.1" stdDeviation="10" dy="-4" dx="-2" filterUnits="userSpaceOnUse"></feDropShadow>
        </filter>
      </defs>
      <g style="filter: url(#f2);">
        <g style="filter: url(#f3);">
      <path d="M167.1,52.17S209.77-28.24,301.66,10.6c0,0,59.62,23.52,56.34,96.81,0,0,55.45,16.41,51.79,79.86,0,0-.3,61.95-67.65,67.28H220.75q-72.56,0-145.12,0C29.57,254.66-2.8,215,.19,170.31c0,0,7.74-70,81.58-68.37C81.77,101.94,101.46,42.87,167.1,52.17Z" style="filter: url(#f1);"></path>
        </g>
      </g>
    </svg>                            
  </div>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.96 254.59">
      <defs>
        <filter filterUnits="userSpaceOnUse" id="f1">
          <feDropShadow filterUnits="userSpaceOnUse" dx="1.5" dy="0.8" stdDeviation="1"></feDropShadow>
        </filter>
        <filter filterUnits="userSpaceOnUse" id="f2">
          <feDropShadow filterUnits="userSpaceOnUse" dx="-2" dy="1.8" stdDeviation="1"></feDropShadow>
        </filter>
        <filter filterUnits="userSpaceOnUse" id="f3">
          <feDropShadow flood-opacity="0.1" stdDeviation="10" dy="-4" dx="-2" filterUnits="userSpaceOnUse"></feDropShadow>
        </filter>
      </defs>
      <g style="filter: url(#f2);">
        <g style="filter: url(#f3);">
      <path...

CSS

svg{
  fill: yellow;
  overflow: visible;
  width: 100%;
}
body > div{
  position: absolute;
  left: 50px;
  top: 50px;
}
div > div{
  display: inline-block;
  width: 150px;
  transition: 5s all;
}
div > div:nth-of-type(1){
   padding: 15px;
}
div.scale > div{
  transform: scale(0);
}

JavaScript

scale.addEventListener("mousedown", function(){
	this.parentElement.classList.toggle("scale");
})