HTMLで四角形をくりぬく方法

Question

下記の画像のようなデザインをHTML＆CSSで実現するにはどうすればよいでしょうか？

背景グラデーションを使って透明な円を作ったりしてみたのですが、それだと結局は穴の部分とそうでない部分も一つのblock要素となってしまうため、部分的にbackdrop-fillterの適用を変えたりするのは難しいようです。
まだ試していないですがcanvasやsvgでも同様の問題に直面しそうな気がしています。
また円の中心地点はpx単位で自由に指定できる必要があります。

Answer 1

ぼかした画像の上にぼかしていない画像を円形に切り抜いたものを乗せるのはどうでしょう。

Answer 2

https://codepen.io/arcxor/pen/bGKrepL

SVG の mask 要素を使えばそれっぽいことができるかもしれません。

【追記】と思ってコードを書きましたが、これ Firefox 以外ではダメですね…。

<div class="container">
  <svg id="svg" width="320" height="240">
    <mask id="mask">
      <rect width="320" height="240" fill="white" />
      <circle r="80" cx="160" cy="60" fill="black" />
    </mask>
  </svg>
</div>

.container {
  position: relative;
  width: 640px;
  height: 480px;
  margin: auto;
  border: 10px solid red;
  background: url("https://placeimg.com/640/480/animals");
}
#svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.7;
  backdrop-filter: blur(100px);
  mask: url(#mask);
}