Css inverting everything below an element

Question

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!

Answer 1

You can use mix-blend-mode: difference with a white background on your .invert class:

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

.invert {
  height: 300px;
  width: 300px;
  background-color: #FFF;
  mix-blend-mode: difference;
  z-index: 1000;
}

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

The one caveat here is it can only invert elements that appear behind it. so if your .move object needs to be in the DOM after the inverter, you have to change the z-index of one or the other to get them to render correctly.