Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Interaction With React, mouse follower

Public visualization

Viewing a saved revision (read-only)

fd73aca19a7b4edabfe8f15b4d11bfad

Interaction With React, mouse follower

0 stars1🌍 Public
IIceC0ld
Last edited Mar 2, 2021
Created on Mar 2, 2021

A red circle follows the cursor inside an SVG canvas in this React-based interactive visualization. The example demonstrates a mouse-follower interaction using React's `useState` hook to track pointer coordinates and update the circle's `cx` and `cy` attributes in real time. The `App` component renders an SVG element with an `onMouseMove` event handler, which calls `setMousePosition` on each pointer movement. The circle’s position is bound to the stored mouse coordinates, creating a direct visual response. The code uses React 16.9.0, ReactDOM, and the SVG `circle` element, with the canvas sized at 960 by 500 pixels.

AI-generated description

Program that follows mouse with a circle.