Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Mouse Follower

Public visualization

Viewing a saved revision (read-only)

1ec42527105e4655a4cd97b6704bbb6c

Mouse Follower

0 stars1🌍 Public
Llefat92
Last edited Aug 13, 2023
Created on Aug 12, 2023

This example demonstrates how React state can drive an interactive SVG visualization: a single circle follows the mouse cursor across a 960x500 viewport. On every mousemove event on the SVG, the `handleMouseMove` callback updates the `mousePosition` state with the cursor’s client coordinates, and React re-renders the circle’s `cx` and `cy` attributes accordingly. It uses React 16.9 with hooks (`useState`, `useCallback`) and renders directly to SVG via `ReactDOM.render`.

AI-generated description

A program that follows your mouse with a circle.