How To Cut Shapes From A Layover (or Any Other Html Element)

First of all I know that this question has been asked before (3 years ago) here, but I couldn't find a proper solution so I'm trying again. I'm trying to implement the following de

Solution 1:

example with mix-blend-mode before it get closed : (answered for the fun to play with mix-blend-mode)

html {
  background: linear-gradient(90deg, rgb(165, 192, 253), rgb(247, 128, 132));
  padding: 2em;
  height: 100%;
}

body {
  width: 900px;
  margin: auto;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 50px, rgba(255, 255, 255, 1) 500px), url(https://www.bing.com/th?id=OIP.VYbZz4O-gR8sw8sRHAvh-gHaEK&pid=Api&rs=1 ) no-repeat white;
  height: 100%;
  min-height: 800px;
  background-size: 100% auto;
  position: relative;
}

body:after,
body:before {
  content: '';
  border-radius: 15%;
  width: 75%;
  padding-top: 75%;
  background: #ccc;
  position: absolute;
  right: 0;
  transform: rotate(45deg) translate(-10%, -50%);
  mix-blend-mode: overlay;
  z-index: -1;
}

body:after {
  z-index: 1;
  background: #000
}