How can I cut a hole through multiple divs to the background?

Question

How can I cut a hole in multiple divs to the body background?

Using clip paths ( Clip path inset circle? ) you can cut a hole in a div, potentially animated.

But is there a way to cut through multiple divs, to either the body background, or a nominated parent div?

It would be theoretically possible to use javascript, to copy a clip-path to the parent, however it would need to be adjusted, and I could see animation being a potential issue.

Answer 1

If you are using the radial-gradient trick, you can just stack the holes on top of each other.

Fiddle: https://jsfiddle.net/nh3reLg1/2/