<img src="https://picsum.photos/id/1069/200/200">
<div></div>
img {
  -webkit-mask:
    radial-gradient(circle 40px,#0000 98%,#000) top/100% 60%,
    linear-gradient(90deg,#000 20%,#0000 0) bottom/100% 40%;
         mask:
    radial-gradient(circle 40px,#0000 98%,#000) top/100% 60%,
    linear-gradient(90deg,#000 20%,#0000 0) bottom/100% 40%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}

img + div {
  width: 200px;
  display: inline-block;
  aspect-ratio: 1;
  background:
    radial-gradient(circle 40px,red 98%,green) top/100% 60%,
    linear-gradient(90deg,blue 20%,purple 0) bottom/100% 40%;
  background-repeat: no-repeat;
}

body {
  background: linear-gradient(90deg,#ddd,#fff);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.