I have this feature on a webapp where I place an overlay over an entire page. In this overlay is a hole, revealing the underlying page.

Wireframe:

[![quick wireframe](https://i.stack.imgur.com/BnAJi.png)](https://i.stack.imgur.com/BnAJi.png)

Originally the hole was a square so no problem there for the resize handlers. Now the hole has to be a circle...

I want to avoid using the 'circle in rectangle' approach (like its used en PS, Affinity,...)

Any suggestions on how/where to place the resize handlers?