JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div class="gp-image hello">
  <svg stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" viewBox="0 0 725 858" style="clip-path: url(#mask60976-881); position: relative;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image xlink:href="http://ukg1dev.web.ukg.com/sites/default/files/2022-05/ExpandedNav-PromoBanner-SolutionFinder.jpg"></image>
    <defs>
      <clipPath id="mask60976-881" clipPathUnits="objectBoundingBox">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M168.401 753C122.549 673.23 86.0035 586.078 58.5139 493.293C52.3464 473.841 46.6762 456.275 41.3997 439.928C31.2576 408.508 22.5698 381.593 14.5998 354.452C-27.3102 210.756 25.1151 66.9221 137.32 15.9633C245.494 -33.1457 361.882 35.5957 406.199 175.37C412.077 193.801 417.809 212.315 423.541 230.83C435.901 270.754 448.262 310.681 462.091 349.786C506.03 473.993 569.451 576.973 662 638.949V753H168.401Z" fill="#30CEBB"></path>
      </clipPath>
    </defs>
  </svg>
</div>

<img class="svg-clipped" src="http://ukg1dev.web.ukg.com/sites/default/files/2022-05/ExpandedNav-PromoBanner-SolutionFinder.jpg" />


<svg height="0" width="0">
  <defs>
    <clipPath id="svgPath">
      <path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="M215,100.3c97.8-32.6,90.5-71.9,336-77.6
        c92.4-2.1,98.1,81.6,121.8,116.4c101.7,149.9,53.5,155.9,14.7,178c-96.4,54.9,5.4,269-257,115.1c-57-33.5-203,46.3-263.7,20.1
        c-33.5-14.5-132.5-45.5-95-111.1C125.9,246.6,98.6,139.1,215,100.3z" />
    </clipPath>
  </defs>
</svg>

<div class="gp-image hello">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <clipPath id="mask" clipPathUnits="objectBoundingBox">
        <path d="M168.401 753C122.549 673.23 86.0035 586.078 58.5139 493.293C52.3464 473.841 46.6762 456.275 41.3997 439.928C31.2576 408.508 22.5698 381.593 14.5998 354.452C-27.3102 210.756 25.1151 66.9221 137.32 15.9633C245.494...

CSS

.svg-clipped {
 -webkit-clip-path: url(#mask);
 clip-path: url(#mask);
 border: 1px solid;
 width: 200px;
}

.gp-image {
  width: 200px;
}

svg {
  width:  auto;
      height: auto;
}