Skip to main content
100%

Mouse follower, a circle

✓ Published0🌍 Public
WWhitney Hung
Last edited Jul 26, 2020
Created on Jul 25, 2020

A circle follows the mouse cursor across a full-screen SVG canvas, with its position updating live in response to pointer movement. The visualization demonstrates interactive React state management, where the initial mouse position is set to the center of the window. Using React's `useState` hook and an SVG `onMouseMove` event handler, the component captures `clientX` and `clientY` coordinates from the event to update the circle's `cx` and `cy` attributes. The code relies on React 16.9 and ReactDOM to render the circle element.

AI-generated description

Trying out interaction with React

A program that makes a circle to follow your mouse.

Source: Dataviz 2020 episode 14. Tutorial link: https://www.youtube.com/watch?v=9zzIwsASgeo

MIT Licensed

Similar vizzes