如何使用CSS创建可移动的半透明区域并模糊化背景？

.wrap {
  backdrop-filter: blur(5px);
  -webkit-mask: radial-gradient(circle at calc(var(--x, .5) * 100%) calc(var(--y, .5) * 100%), transparent 50px, black 51px); /* 使用黑色填充非透明区域 */
  mask: radial-gradient(circle at calc(var(--x, .5) * 100%) calc(var(--y, .5) * 100%), transparent 50px, black 51px); /* 支持非webkit浏览器 */
}

<div class="wrap">
  <div class="handle"></div>
</div>

:root {
  --x: .5;
  --y: .5;
}

.wrap {
  position: relative;
  width: 300px;
  height: 300px;
  background: #eee;
  backdrop-filter: blur(5px);
  -webkit-mask: radial-gradient(circle at calc(var(--x, .5) * 100%) calc(var(--y, .5) * 100%), transparent 50px, black 51px);
  mask: radial-gradient(circle at calc(var(--x, .5) * 100%) calc(var(--y, .5) * 100%), transparent 50px, black 51px);
}

.handle {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  background: #fff;
  cursor: grab;
}

const handle = document.querySelector('.handle');

handle.addEventListener('mousedown', (e) => {
  document.body.addEventListener('mousemove', move);
  document.body.addEventListener('mouseup', stopMove);
});

function move(e) {
  const wrap = handle.parentElement;
  const rect = wrap.getBoundingClientRect();

  let x = Math.min(Math.max(0, e.clientX - rect.left), rect.width);
  let y = Math.min(Math.max(0, e.clientY - rect.top), rect.height);

  document.documentElement.style.setProperty('--x', x / rect.width);
  document.documentElement.style.setProperty('--y', y / rect.height);
}

function stopMove() {
  document.body.removeEventListener('mousemove', move);
  document.body.removeEventListener('mouseup', stopMove);
}