<div class="first">First element</div>

<div class="second">Second element</div>

<div class="overlay">
  <svg class="overlay__background">
    <path class="overlay__background-path"/>
  </svg>
</div>

.first {
  width: 100px;
  height: 20px;
  text-align: center;
  background-color: blue;
  color: #fff;
  margin-left: 300px;
}

.second {
  width: 60px;
  height: 100px;
  text-align: center;
  background-color: red;
  display: inline-flex;
  align-items: center;
  color: #fff;
  margin-top: 100px;
  margin-left: 20px;
}

.overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
}

.overlay__background {
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 9997;
    height: 100vh;
    opacity: .8;
    fill: #000;
}

function makeOverlayPath(options) {
    const {innerWidth: w, innerHeight: h} = window;
    let d = `M${w},${h} H0 V0 H${w} V${h} Z`;
  
    options.forEach(({width, height, x = 0, y = 0, r = 0}) => {
      d += `M${x + r},${y}
        a${r},${r},0,0,0-${r},${r}
        V${height + y - r}
        a${r},${r},0,0,0,${r},${r}
        H${width + x - r}
        a${r},${r},0,0,0,${r}-${r}
        V${y + r}
        a${r},${r},0,0,0-${r}-${r}
        Z`;
    });

    return d;
};

const path = document.querySelector('.overlay__background-path');

const firstElement = document.querySelector('.first');
const firstElementRect = firstElement.getBoundingClientRect();

const secondElement = document.querySelector('.second');
const secondElementRect = secondElement.getBoundingClientRect();

const options1 = {
  width: firstElementRect.width,
  height: firstElementRect.height,
  x: firstElementRect.x,
  y: firstElementRect.y,
}

const options2 = {
  width: secondElementRect.width,
  height: secondElementRect.height,
  x: secondElementRect.x,
  y: secondElementRect.y,
  r: 10,
}

path.setAttribute('d', makeOverlayPath([options1, options2]));