JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foo">
<!--<img src="//lorempixel.com/300/300/sports/" alt="">-->
as
das
das
da
sd
as
da
sd
</div>
<img src="//lorempixel.com/600/600/cats/" alt="">
<svg>
  <clipPath id="myPath" clipPathUnits="objectBoundingBox">
    <path d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z" />
  </clipPath>
</svg>

CSS

.foo {
  Width: 500px;
  height: 300px;
  position: absolute;
  background: url(//lorempixel.com/300/300/sports/) no-repeat center center;
  background-size: cover;
  //background: white;
  color: red;
  //box-shadow: 0 0 10px 1px black;
  clip-path: url(#myPath)
}