Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Mouse Follower

Public visualization

Viewing a saved revision (read-only)

691c1f0cbfaf49ff9c71c3b3118738a3

Mouse Follower

0 stars1🌍 Public
DDaljeetSingh1320
Last edited Jul 31, 2023
Created on Jul 31, 2023

A black circle follows the mouse as it moves across a blank 960×500 SVG canvas. The example shows how React state updates, triggered by mouse events, can drive SVG attribute changes in real time. The React component `App` uses the `useState` hook to store the pointer’s `clientX` and `clientY` coordinates, updating them via a `handleMouseMove` callback on the `<svg>` element’s `onMouseMove` event. The circle’s `cx` and `cy` properties are bound directly to this state, rendering with d3.v7 and ReactDOM.

AI-generated description

A program that follows your mouse with a circle.