Is it possible using css to have an element that inverts everything behind it such that anything that passes below the element will be inverted?

In the example I would like to the circle to be white while passing through the black square, but black otherwise.

.container {
  height: 500px;
  width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.invert {
  height: 300px;
  width: 300px;
  background-color: black;
}

.move {
  height: 50px;
  width: 50px;
  background-color: black;
  border-radius: 1000px;
  position: absolute;
  top: 0;
  left: 0;
  animation: move linear 5s infinite;
}

@keyframes move {
  0% {
transform: translate(0,0);
  }
  100% {
transform: translate(500px, 500px);
  }
}

<div class="container">
  <div class="invert">

  </div>
  <div class="move">

  </div>
</div>

This needs to be structure agnostic, as in my actual implementation I am using a large number of randomly moving circles as a fixed background, I will not know when they will enter or exit a square, and the relation between circle and square will be different between pages

I've tried filter: invert(1), but it doesn't do what I need it to, I am also curious whether it could be done using svg filters.

Thanks a lot!