Is there a CSS way to display only intersecting elements on the screen?
Take a look at this layout, it has 4 pseudo-elements, white semi-transparent circles located in the top corners of each square. The circle in the center is a brighter color, because there are 2 semi-transparent circles in that place, they overlap each other.
The effect I'm trying to achieve is that the side circles are invisible, and only the ones that overlap each other are displayed. But it turned out to be not easy.
There are mask, mask-composite CSS properties that do something like this, but I can't get them to work.
mix-blend-mode didn't help either.
Does anyone have any ideas how this effect could be achieved?