# Centring Shape on Cursor

**URL:** <https://forum.readymag.com/t/centring-shape-on-cursor/2064>\
**Category:** Custom code\
**Created:** [October 11, 2023, 10:02am UTC](https://forum.readymag.com/t/centring-shape-on-cursor/2064 "2023-10-11T10:02:59Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Benjamin](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/benjamin/32/1398_2.png) [@Benjamin](https://forum.readymag.com/u/Benjamin)\
**Post date:** [October 11, 2023, 10:02am UTC](https://forum.readymag.com/t/centring-shape-on-cursor/2064/1 "2023-10-11T10:02:59Z")

</div>

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](https://mail.google.com/mail/u/1?ui=2&ik=39263e73e3&attid=0.1&permmsgid=msg-a:r-5261926329959886315&th=18b1e1d1191694cc&view=fimg&fur=ip&sz=s0-l75-ft&attbid=ANGjdJ8KOBGRknY0JD1q0MoDSpDX-ZX5cfEfW0inGqxWi85v5gqsigO11YGRipFxDJmJkfVwNuavORdQ4LtAjguPCUTCFACtjdK9ARIQkJnYckPxlzMLaWP-gAR2pno&disp=emb&realattid=ii_lnlk1wfa0)

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

![image.png](https://mail.google.com/mail/u/1?ui=2&ik=39263e73e3&attid=0.2&permmsgid=msg-a:r-5261926329959886315&th=18b1e1d1191694cc&view=fimg&fur=ip&sz=s0-l75-ft&attbid=ANGjdJ8ZQ8WZHuZigOZMGo5pkH2uAiOioUDuvsfp9wY9tpK1s3fzEfJ4geUm1pD1Q75IOVvyazn_C9Z8iGI0DLDRkju2VVi41w_kuvpP98fCCVs4MCjTfzEbE7EUTQM&disp=emb&realattid=ii_lnlk2oge1)

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

![image.png](https://mail.google.com/mail/u/1?ui=2&ik=39263e73e3&attid=0.3&permmsgid=msg-a:r-5261926329959886315&th=18b1e1d1191694cc&view=fimg&fur=ip&sz=s0-l75-ft&attbid=ANGjdJ8cpClXk1Fj5wD_bVbh9Lhcpr97S7NcylNBdjDctqNUKvGFzmaNfaha4VcnJnzQYBfVoQAGB6xV9gsfrGbTMGaSd_a65GR11HYIyraI3Tgst5LtHLIIcipPGb8&disp=emb&realattid=ii_lnlk3t7d2)

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)](https://illuminating-radioactivity.com/)

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