Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

React Draw with Mouse

Public visualization

Viewing a saved revision (read-only)

c0318db770384b5b96d66583d16bd868

React Draw with Mouse

0 stars1🌍 Public
Eekorre1001
Last edited Mar 18, 2021
Created on Mar 18, 2021

A React component renders an SVG circle that follows the mouse pointer across a 960×500 canvas. The SVG’s `onMouseMove` event updates React state via `useState`, and `useCallback` memoizes the handler to prevent unnecessary re-renders. The circle’s `cx` and `cy` coordinates are bound to the current mouse position, demonstrating a reactive, declarative drawing interaction. Unlike D3, this example relies solely on React’s state management and SVG’s native event handling to create a live, mouse-driven visualization.

AI-generated description

A program that follow your mouse and draws