# Help! Circle that follows cursor **URL:** \ **Category:** Custom code\ **Created:** [August 25, 2023, 11:36pm UTC](https://forum.readymag.com/t/help-circle-that-follows-cursor/1908 "2023-08-25T23:36:41Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![nathan](https://avatars.discourse-cdn.com/v4/letter/n/c5a1d2/32.png) [@nathan](https://forum.readymag.com/u/nathan)\ **Post date:** [August 25, 2023, 11:36pm UTC](https://forum.readymag.com/t/help-circle-that-follows-cursor/1908/1 "2023-08-25T23:36:42Z")
Hi! i’m trying to create a circle that follows the cursor maintaining a consistent distance. The issue that i’m having is that the circle gets further when i move the cursor close to the page borders and closer when i move the cursor close to the center. This is the code i’m using on a custom code widget. ```auto Interactive Gradient Background
``` p.s. I took as inso this website : [https://illuminating-radioactivity.com/](https://illuminating-radioactivity.com/) Thank you !! ---
**Author:** ![Dario\_Buzzini](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/dario_buzzini/32/716_2.png) [@Dario\_Buzzini](https://forum.readymag.com/u/Dario_Buzzini)\ **Post date:** [September 15, 2023, 8:37am UTC](https://forum.readymag.com/t/help-circle-that-follows-cursor/1908/2 "2023-09-15T08:37:32Z")
Hello Nathan! I just found your post while looking for similar solutions myself. Thank you for sharing your code. It was helpful for me to understand a few things. Did you solve your issue? unfortunately i am not skilled enough to help you but i was wondering if you could help me with my issue. I currently have this: [Page 4 from ‘Yasha Wallin’ by Dario Buzzini](https://readymag.com/dariobuzzini/YW/4/) but i would like to have a ‘screen’ effect using ``` (mix-blend-mode: screen;) on the circle hand have the circle itself being a gradiend with the idea of resulting in this effect i prototyped in figma: [‘Yasha Wallin’ from ‘Yasha Wallin’ by Dario Buzzini](https://readymag.com/dariobuzzini/YW/proto/) Thank you in advance for your help 🙂 ```auto ``` ---
**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:08am UTC](https://forum.readymag.com/t/help-circle-that-follows-cursor/1908/3 "2023-10-11T10:08:47Z")
Please! has anyone resolved this, it’s so frustrating!? ---
**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\ **Post date:** [October 12, 2023, 12:05pm UTC](https://forum.readymag.com/t/help-circle-that-follows-cursor/1908/4 "2023-10-12T12:05:55Z")
have you tried to check the “use iframe” option at the bottom of the custom code widget? ---
**Author:** ![nathan](https://avatars.discourse-cdn.com/v4/letter/n/c5a1d2/32.png) [@nathan](https://forum.readymag.com/u/nathan)\ **Post date:** [October 13, 2023, 7:41am UTC](https://forum.readymag.com/t/help-circle-that-follows-cursor/1908/5 "2023-10-13T07:41:27Z")
Yes, at the end i had to recode it completely. Here’s the final code: ` body { //cursor: none; min-height: 100%; background: rgb(255, 255, 255); } #myCustomCursor { position: fixed; width: 30px; height: 30px; background: rgb(255, 255, 255); border-radius: 50%; top: var(–y, 0); left: var(–x, 0); transform: translate(-50%, -50%); mix-blend-mode: difference; pointer-events: none; //transition-duration: 300ms; //transition-timing-function: ease-out; z-index: 99999; } #myCustomCursor.myCursorHoverState { width: 160px; height: 160px; background: blue; } Hope it helped! ---
**Author:** ![nathan](https://avatars.discourse-cdn.com/v4/letter/n/c5a1d2/32.png) [@nathan](https://forum.readymag.com/u/nathan)\ **Post date:** [October 13, 2023, 7:42am UTC](https://forum.readymag.com/t/help-circle-that-follows-cursor/1908/6 "2023-10-13T07:42:09Z")
Hi Benjamin, finally I’ve solved this issue!! Here’s the final code: body { //cursor: none; min-height: 100%; background: rgb(255, 255, 255); } #myCustomCursor { position: fixed; width: 30px; height: 30px; background: rgb(255, 255, 255); border-radius: 50%; top: var(–y, 0); left: var(–x, 0); transform: translate(-50%, -50%); mix-blend-mode: difference; pointer-events: none; //transition-duration: 300ms; //transition-timing-function: ease-out; z-index: 99999; } #myCustomCursor.myCursorHoverState { width: 160px; height: 160px; background: blue; } ---
**Author:** ![Emir\_Kreidie](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/emir_kreidie/32/1280_2.png) [@Emir\_Kreidie](https://forum.readymag.com/u/Emir_Kreidie)\ **Post date:** [October 21, 2023, 7:35pm UTC](https://forum.readymag.com/t/help-circle-that-follows-cursor/1908/7 "2023-10-21T19:35:36Z")
mine works fine ![1](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/2X/0/0e58cc82856acdd5ff1ba5ce5428f5296fc0bec2.jpeg) ![2](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/2X/9/9a40a91b356f493c170a11a63064564d70b8c510.jpeg) ---
**Author:** ![BYLD](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/byld/32/1692_2.png) [@BYLD](https://forum.readymag.com/u/BYLD)\ **Post date:** [February 7, 2024, 3:53pm UTC](https://forum.readymag.com/t/help-circle-that-follows-cursor/1908/8 "2024-02-07T15:53:25Z")
Hi, I have the same problem but I can’t figure out how to solve it. I’m trying to make a custom cursor that follows the cursor and when it hovers over the buttons it increases its size. The problem is as if the cursor originates from the top left vertex and the more I move it to the right or down, the further it moves away. I saw your answers and your advice but I really can’t solve it, please help me I’m going crazy trying to figure out how to solve it!!! This is my code inside the widget code: ```auto
``` ---
**Author:** ![Yen\_Goh](https://avatars.discourse-cdn.com/v4/letter/y/f0a364/32.png) [@Yen\_Goh](https://forum.readymag.com/u/Yen_Goh)\ **Post date:** [October 11, 2024, 8:15am UTC](https://forum.readymag.com/t/help-circle-that-follows-cursor/1908/9 "2024-10-11T08:15:15Z")
Hi there, thanks for sharing! But to create a circle cursor, is the only way out be to code a shape widget? Nothing simpler?