JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 662 753" xml:space="preserve">
  <image clip-path="url(#a)" class="image" width="100%" height="100%" xlink:href="http://ukg1dev.web.ukg.com/sites/default/files/2022-05/ExpandedNav-PromoBanner-SolutionFinder.jpg"></image>

    <clipPath id="a" >
      <path d="M661.4,639.1v113.3H168.6c-45.8-79.7-82.2-166.7-109.7-259.3l0,0c-6.2-19.5-11.8-37-17.1-53.4
	c-10.1-31.4-18.8-58.3-26.8-85.5C-26.9,210.7,25.5,67.2,137.4,16.3c53.9-24.5,109.9-19.6,157.9,8.8c48,28.4,88.1,80.5,110.3,150.3
	l0,0c5.9,18.4,11.6,36.9,17.3,55.4l0,0l0,0c12.4,39.9,24.7,79.9,38.6,119C505.4,474,568.8,577.1,661.4,639.1z" />
    </clipPath>

</svg>

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

<section class="default-example">
        <img class="example-element" src="http://ukg1dev.web.ukg.com/sites/default/files/2022-05/ExpandedNav-PromoBanner-SolutionFinder.jpg" class="transition-all" style="">
    </section>
    
    
    
    
    <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 662 753" xml:space="preserve">
<defs>
  <pattern width="100%" height="100%" id="img1" patternUnits="userSpaceOnUse" >
  <image x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMinYMin" xlink:href="http://ukg1dev.web.ukg.com/sites/default/files/2022-05/ExpandedNav-PromoBanner-SolutionFinder.jpg"></image>
    </pattern>
</defs>

      <path fill="url(#img1)"...

CSS

.svg-clipped {
  -webkit-clip-path: url(#a);
  clip-path: url(#a);
  border: 1px solid;
  object-fit: cover;
  object-position: left;
  aspect-ratio: 1;
    width: 200px;
  height: 200px;
}

.image {
  object-fit: cover;
  object-position: left;
  border: 1px solid;
  width: 100%;
}

.example-element {
  width: 100%;
  aspect-ratio: auto 662 / 753; 
    -webkit-clip-path: url(#a);
  clip-path: url(#a);
}

.default-example {
  
}