Backdrop-filter blur on two overlapping, partially opaque elements

I want to have 2 overlapping, partially opaque circles, which smoothly apply backdrop-filter: blur to the elements behind them. Consider the following code:

Code Sandbox here

.background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://images.unsplash.com/photo-1553356084-58ef4a67b2a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80");
  background-size: cover;
}

.left {
  left: 0px;
}

.right {
  right: 0px;
}

.container {
  position: absolute;
  left: 100px;
  width: 150px;
  height: 100px;
}

.box {
  position: absolute;
  top: 0px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.container1 {
  top: 100px;
}

.box1 {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.container2 {
  top: 230px;
  /* opacity: 0.3; */
  filter: opacity(0.3);
}

.box2 {
  background: black;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

<div className="background">
  <div className="container container1">
    <div className="box box1 left" />
    <div className="box box1 right" />
  </div>
  <div className="container container2">
    <div className="box box2 left" />
    <div className="box box2 right" />
  </div>
</div>

This produces the following:

As you can see, the top 2 circles correctly blur their background, but since each individually has its own opacity, there's an unwanted discoloration/outline where they overlap.

The bottom 2 circles are correctly colored, but the backdrop-filter: blur doesn't take effect. It appears not to work correctly with the parent's opacity. A partial workaround can be found by changing .container2 to have:

filter: opacity(0.3);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);

This produces the following:

This is much closer, but produces an unwanted blur at the edges of the containing block. Is there any way to cleanly blur just the two circles?

Code Sandbox here

It's also worth noting that for my application, these two circle elements will be animated and moved around relative to one another, so solutions involving images will not work. Solutions involving canvas or svg are totally acceptable. Unfortunately, it seems that svg visual elements (like paths) do not support backdrop-filter.