¿Es posible usar css para tener un elemento que invierta todo detrás de él de modo que todo lo que pase debajo del elemento se invierta?

En el ejemplo, me gustaría que el círculo fuera blanco al pasar por el cuadrado negro, pero negro en caso contrario.

 .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>

Esto debe ser independiente de la estructura, ya que en mi implementación real estoy usando una gran cantidad de círculos que se mueven aleatoriamente como fondo fijo, no sabré cuándo entrarán o saldrán de un cuadrado, y la relación entre círculo y cuadrado será diferente entre paginas

Probé filter: invert(1), pero no hace lo que necesito, también tengo curiosidad por saber si se puede hacer usando filtros svg.

¡Muchas gracias!