I have an SVG that creates an "overlay" on top of the entire page, with a "cutout window" at a specific position so the element underneath can show through the overlay. This works as expected when the overlay is just a dark rectangle. However, I need the overlay to also have a blur effect so content behind it is blurred, but the cutout is not.
Here is the code: https://jsfiddle.net/k47ajyr5/4/
The blur is being achieved using the backdrop-filter CSS property.
The button that says "should not be blur" should not be blurred, while the background content (including the button that says "should be blur") should be blurred.
Is there any way I can achieve this blur effect on just dark area and exclude it from the cutout window?
