Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Mouse Follower

Public visualization

Viewing a saved revision (read-only)

a50e904b1f194ef7ba5ef81b7089d68c

Mouse Follower

0 stars1🌍 Public
GGang Chen
Last edited Oct 22, 2021
Created on Oct 22, 2021

This example demonstrates a simple interactive visualization inside an SVG canvas: a circle continuously follows the mouse cursor across the screen. It serves as a basic demonstration of handling mouse events and updating React state in response to user input. Built with React and ReactDOM, the application uses the `useState` hook to track the cursor's `clientX` and `clientY` coordinates, updating them via the `handleMouseMove` callback attached to the SVG element's `onMouseMove` event. The rendered SVG circle’s `cx` and `cy` attributes are bound directly to the mouse position state, causing the circle to track the pointer in real time.

AI-generated description

A program that follows your mouse with a circle.