How to fill background with everything but SVG & itself?

Question

css

The bottom line is this, there is a block joxi.ru/zANeGRMtg4Qw29 against which there is a picture below, SVG in the form of a lightning lies on top, everything around is filled with color, SVG itself is transparent - this whole block is the active state of the element. You also need to take into account that there is a default state of the joxi.ru/EA4Kj8dh9gLl2b block when just SVG lies on top without the necessary fill. How to implement such an active state, I don’t understand how to fill it. The only thing that comes into my head is creating 2x SVG for the default state and for the active one with a fill already

Answer 1

In theory, one SVG element is enough.
Take a look here