Mouse follower, a circle
✓ Published0🌍 Public
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 descriptionTrying 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