<button class="custom-hit-area">
  <img src="https://assets.codepen.io/486/black+cat+bar.gif" alt="Cat Icon">
</button>

body {
  width:100%;
  min-height:100vh;
}


.custom-hit-area {
  
  --width:100%;
  --icon-x:0;
  --icon-y:0;
  
  --original-icon-path:path("M48.18,144.85,52.45,186l-8.58,5.72L27.18,177.85l-12.4-1.43L0,143.05l6.2-20H22.89V96.79L48.64,74.86,30.52,58.65,31,40.05,46.25,0,58.17,14.78v8.11l11-3.34L81.54,0,93.93,44.82,86.78,70.09,105.38,93v33.38l13.35-5.72,11.92,12.87-8.58,34.81-8.59,12.87-11-1.91L84.87,145.43Zm85.49,36.5c4.13-1.91,21.3-22.89,24.48-40.69s-4.77-65.16-7-80.42,14-35.92,7.31-40.37S137.8,35.44,140.34,66s7.41,35.82,7,59.44c-.68,38.59-28.93,53.73-28.93,53.73S129.54,183.26,133.67,181.35Z");
  
  --icon-path:var(--original-icon-path);
  
  --icon-adjust-y:-2%;
  --icon-adjust-x:-1%;
  
  width:var(--width);
  
  //icon positioning
  position:absolute;
  top:var(--icon-y);
  left:var(--icon-x);
  
  pointer-events:none;
  
  border:none;
  background-color:transparent;
  padding:0;
  
  img {
    width:100%;
  }
  
  &::after {
    
    content:"";
    
    width:100%;
    height:100%;
    
    display:block;
    position:absolute;
    top:var(--icon-adjust-y);
    left:var(--icon-adjust-x);
    
    pointer-events:auto;
    clip-path: var(--icon-path);
    
    //want to see the clip-path?
    background-color: rgb( 255 0 0 / .4 );
    
  }
  
  &:hover {
    background-color:green;
    cursor:pointer;
    z-index:2;
  }
  
}

window.addEventListener( "resize", updateHitAreaScales);
setTimeout( updateHitAreaScales, 100 );

function updateHitAreaScales() {
  document.querySelectorAll( ".custom-hit-area" ).forEach( cha => {
    const img = cha.querySelector("img");
    const scale = img.offsetWidth / img.naturalWidth;
    cha.style.setProperty('--icon-path', scalePath( getComputedStyle(cha).getPropertyValue("--original-icon-path"), scale) );
  });
}

function scalePath( path, scale ) {
  const regex = /(?![a-zA-Z-,])(\d*\.?\d*)(?=[a-zA-Z-,])/g;
  return path.replaceAll(regex, (match, p1) => {
    return (parseFloat(p1) * scale).toFixed(2);
  }); 
}