<section class="examples">
  <figure>
    <div class="original-image"></div>
    <figcaption>
      <p>Original Image</p>
    </figcaption>
  </figure>
  <figure>
    <div class="original-image cropped"></div>
    <figcaption>
      <p>Image Cropped Using the Inline SVG via the <code>clip-path: url(#cropped)</code> CSS Property</p>
    </figcaption>
  </figure>
</section>
<svg height="0" width="0">
  <defs>
    <clipPath id="cropped">
      <path d="
        M 10 300
        L 30 200
        L 25 170
        L 35 160
        L 40 110
        L 25 60
        L 50 10
        H 345
        L 380 55
        L 385 65
        L 370 100
        L 380 160
        L 390 170
        L 380 185
        L 400 300
        H 240
        L 235 215
        C 235,170 172,170 172,215
        L 165 300
        Z
      " />
    </clipPath>
  </defs>
</svg>

:root {
  font-family: sans-serif;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.examples {
  display: flex;
}

figure {
  width: min-content;
}

.original-image {
  width: 400px;
  height: 300px;

  background-image: url(https://ucarecdn.com/0788ee97-3911-45eb-a55c-f05d32231571/-/crop/100px50p/bottom/-/preview/400x300/);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.cropped {
  clip-path: url(#cropped);
}