Is there any way to achieve fence view in word files which are in read only mode

basically fence view means, the document gets blurred but the small area near the mouse gets cleared, as the mouse moves that specific area is visible and rest document is blurred.

I have done it before using backdrop-filter , but now as i am implementing it on word file in the code i am using an iFrame for document to get load. As backdrop filter works on parent div and iFrame doesn’t have parent div so its not working.

I tried using filter: blur() but using this the word file gets blurred but the circle with clear view is not able to achieve.

here is the image reference that i want to achieve-
[1]: https://i.sstatic.net/OUEMuR18.png

the jsp code that i have in frontend –

<div style="margin-bottom: -36px; z-index: -1;" id="iframeDiv" name="iframeDiv">
  <div style="display: flex; background-color: #fff; width: 100%; marin-top: 79px; height: 70px; z-index: 0; position: relative">
     <iframe ng-src="{{getIframeDocSrc(this)}}" height="640px" width="100%" id="iframeDoc" name="iframeDoc" style="border: 0px;">
     </iframe>
   </div>
 </div>

js code that i use earlier to get that effect –

 element.css({ "backdrop-filter": "blur(8px)", "transition": "backdrop-filter 0.5s ease", "display": "block" });
element.mousemove(function (event) {
        let x = event.pageX - $(this).offset().left;
        let y = event.pageY - $(this).offset().top;
        let px = (x / $(this).width()) * 100;
        let py = (y / $(this).height()) * 100;
        this.style.webkitMaskImage = `-webkit-gradient(radial, ${px}% ${py}%, 0, ${px}% ${py}%, 150px, from(transparent), to(black))`;
        this.style.maskImage = `radial-gradient(circle 150px at ${px}% ${py}%, transparent, black)`;
      });