Centring Shape on Cursor

Custom code
1

Hi Guys,

Please can you assist me, I want to have a shape that follows my cursor. I have created this successfully in code numerous times, it works perfectly in the online HTML testers I have been using. I have used 4 different sites and it works perfectly every time.

This is the expected result:

image.png

However no matter how I adapt the code in Readymag I always get this error:

image.png

It never centers, it only begins to if I take my cursor to the top left of the page:

image.png

Here is my code:

Cursor-Following Box Stroke body { margin: 0; overflow: hidden; }

#box-stroke {
position: fixed;
border: 2px solid #000;
pointer-events: none;
transform-origin: top left;
}

This website here is created in Readymag and they have been able to do it: Illuminating Radioactivity (illuminating-radioactivity.com)

Please can you advise on what I need to do to remedy this?