Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

MouseFollower

Public visualization

Viewing a saved revision (read-only)

f38fa04c857e47a9882d69dbc8b146c0

MouseFollower

0 stars1🌍 Public
NNoelle Huchette
Last edited Jan 13, 2023
Created on Jan 13, 2023

A black circle follows the mouse cursor across a full-screen SVG canvas. The visualization uses React with the `useState` and `useCallback` hooks to track the cursor's `clientX` and `clientY` coordinates on every `mousemove` event. The current mouse position is stored in state and then passed as the circle's `cx` and `cy` attributes, causing the shape to render at the cursor's location at all times. The code relies on ReactDOM to mount the component, while the initial position is set to the center of the window.

AI-generated description

Follows your mouse with a circle