Track cursor

100%

✓ Published0🌍 Public

Last edited Oct 26, 2022

Created on Oct 26, 2022

A circle tracks the cursor inside an SVG canvas, updating its position in real time as the mouse moves. The visualization uses React’s `useState` hook to store the cursor coordinates and an `onMouseMove` event handler to update them. The circle’s `cx` and `cy` attributes are bound to the state, causing the element to re-render with the new position. The example relies solely on React and SVG, with no external data or animation libraries.

AI-generated description

A program that follows your mouse with a circle.

MIT Licensed

Similar vizzes

Loading thumbnail…

Mouse Tracking

A single circle tracks the mouse cursor in real time across a full-screen SVG canvas. Built with React 18, the app uses the `useState` hook to store cursor coordinates from the `onMouseMove` event on a div catcher, then passes those coordinates to an SVG circle’s `cx` and `cy` attributes for immediate repositioning. The `useCallback` hook memoizes the event handler for efficiency. ReactDOM renders the component into the page’s root element.

GGabriel

88% match

Loading thumbnail…

Tracking the Mouse

A black circle on a white SVG canvas follows the mouse cursor in real time. The React component uses the `useState` hook to track the mouse position, updating it via the `onMouseMove` event handler on the SVG element. The circle’s `cx` and `cy` attributes are bound to the current `clientX` and `clientY` coordinates, and both React and ReactDOM are loaded from CDN. The visualization demonstrates simple interactive state management and SVG rendering within a React application.

Ffixh9879

87% match

Loading thumbnail…

Circle Following your Cursor

A circle tracks the user’s cursor across a full-screen SVG canvas, updating its center position in real time. Built with React 16.9 and SVG, the component uses the `useState` hook to store mouse coordinates and `useCallback` with an `onMouseMove` handler to capture `clientX` and `clientY` events. The circle’s `cx` and `cy` attributes are bound to this state, causing a smooth, reactive movement that mirrors the pointer exactly.

MManbirJudge

87% match

Loading thumbnail…

follow the cursor

A single circle follows the cursor within an SVG canvas, its position updating in real time. The visualization uses React’s `useState` and `useCallback` to manage mouse-move events, while D3.v7 supplies the SVG rendering via `d3.min.js`. The circle’s center coordinates (`cx`, `cy`) are set from the pointer’s `clientX` and `clientY` values, producing a direct, interactive response.

Llucaly74@gmail.com

87% match

Loading thumbnail…

Cursor Follower

A dark red circle tracks the mouse cursor across a full-screen SVG canvas, updating its position in real time. React hooks (`useState` and `useCallback`) manage the cursor coordinates and handle mouse-move events. The circle’s center is offset upward by its radius, and the viewport size is derived from `window.innerWidth` and `window.innerHeight`. The example renders a single SVG circle with JavaScript and React.

MMauricio García Benítez

86% match

Loading thumbnail…

Mouse follower

A circle tracks the mouse cursor across an SVG canvas, reacting instantly to movement. The visualization demonstrates state management in React, using the `useState` hook to store cursor coordinates and `useCallback` to optimize the mouse-move handler. The SVG circle updates its `cx` and `cy` attributes based on those coordinates, rendered via ReactDOM. The example uses D3.js v7 only for its bundled build, while the core interaction is purely React-driven.

NNordes Ménard-Lamarre

85% match

Loading thumbnail…

Mouse Events

A circle tracks the cursor across a full-screen SVG canvas, updating its position in real time as the mouse moves. Built with React and ReactDOM, the component uses the `useState` and `useCallback` hooks to manage and update the mouse coordinates, while the SVG `onMouseMove` event handler triggers each repositioning of the circle.

Wwobling1

85% match

Loading thumbnail…

Mouse follow

A circle follows the mouse cursor across an SVG canvas. The visualization demonstrates real-time interaction tracking, with the circle's position updating instantly on every mouse movement. Built with React, the app uses the `useState` hook to store cursor coordinates and the `useCallback` hook to handle the `onMouseMove` event, then renders the circle as an SVG `<circle>` element with dynamically updated `cx` and `cy` attributes.

KKirsten Lund

85% match