Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Mouse Follower

Public visualization

Mouse Follower

0 stars1🌍 Public
PPinzhi
Last edited Dec 25, 2021
Created on Dec 25, 2021

A circle follows the mouse cursor across an SVG canvas, updating its position in real time to mirror the pointer’s location. The visualization demonstrates React’s `useState` and `useCallback` hooks to manage mouse coordinates and re-render the circle on every move event. Built with React 16.9 and rendered as SVG, the component listens for `onMouseMove` on the `<svg>` element, extracting `clientX` and `clientY` to set the circle’s `cx` and `cy` attributes. The example uses no external data source, relying solely on user interaction.

AI-generated description

Program follows mouse with circle

Comments

Sign in to join the discussion.

MIT Licensed