Skip to main content
SimilarExport ZIP
100%

Mouse Follower

✓ Published1🌍 Public
LLaura Johnson
Last edited Mar 12, 2021
Created on Mar 12, 2021
Forked from Smiley face part 1

A black circle follows the mouse cursor across a blank SVG canvas, centering itself on the pointer's exact coordinates. The visualization demonstrates a simple interactive loop using React's `useState` and `useCallback` hooks to track `clientX` and `clientY` positions from a mouse move event, while D3 v6 handles SVG rendering. The circle has a fixed radius of 30 pixels and starts at the canvas center before responding to user movement.

AI-generated description

A program that follows your mouse with a circle.

MIT Licensed

Similar vizzes

Loading thumbnail…

Mouse Follower

A single black circle follows the mouse cursor across an SVG canvas, with React tracking pointer events to update its position. The example uses React's `useState` and `useCallback` hooks to store the `clientX` and `clientY` coordinates on every `onMouseMove`, re-rendering the circle's `cx` and `cy` attributes. Rendered via ReactDOM into a 960×500 SVG, it demonstrates a minimal interactive data-visualization pattern without any external data source.

Hheiltutanvidare
95% match
Loading thumbnail…

Mouse Follower

A black circle follows the mouse cursor as it moves across a full-screen SVG canvas. The visualization updates the circle's position in real time using React's `useState` and `useCallback` hooks with an `onMouseMove` event handler. The code combines React 16.9 with D3.js v7, rendering solely through SVG elements without any data source, demonstrating interactive state-driven graphics.

AAustinSkrobar
95% match
Loading thumbnail…

Mouse follower

A black circle follows the mouse cursor across an SVG canvas, serving as a playful interactive pointer. The example is built with React and D3 v7, using React state to track mouse coordinates via an `onMouseMove` event handler. The `useState` hook stores the current `clientX` and `clientY` positions, and a `<circle>` element updates its `cx` and `cy` attributes accordingly. The SVG's width and height are fixed, and the circle has a constant radius of 30 pixels.

DDaniel Zsido
95% match
Loading thumbnail…

Mouse Follower

A black circle follows the user's mouse cursor across an SVG canvas. The visualization uses React state to track mouse coordinates via an `onMouseMove` event handler, updating the circle's `cx` and `cy` attributes in real time. D3's `range` function is imported but unused in this example. The rendering relies on React's `useState` and `useCallback` hooks to manage and memoize the position updates, with no external data or complex interaction beyond the positional tracking.

Jjwlam83
94% match
Loading thumbnail…

Mouse Follower

A black circle of radius 30 follows the mouse cursor across a 960-by-500 SVG canvas. React's `useState` and `useCallback` hooks track the cursor’s client coordinates, updating the circle’s `cx` and `cy` attributes on every `mousemove` event. D3 v5 is loaded but not used in the visible logic; rendering is purely React-driven SVG.

Lluispee
94% match
Loading thumbnail…

Mouse Follower

A black circle follows the mouse pointer across a blank SVG canvas. The example demonstrates interactive state management in React, where mouse coordinates update the circle’s position in real time. It uses React’s `useState` and `useCallback` hooks to track and handle mouse movement events, while d3.v5 provides the SVG rendering utilities. The circle’s center is set directly from the `clientX` and `clientY` properties of the browser’s mouse event, with no additional data or animation logic.

AALI Akbar SABZI
94% match
Loading thumbnail…

Mouse Follower

A single black circle follows the mouse cursor across an empty SVG canvas. The circle's position is updated in real time as the cursor moves, using React's `useState` and `useCallback` hooks to track `clientX` and `clientY` coordinates. The example renders with `ReactDOM.render` and imports `arc` from D3 v5, though the visible output is purely a responsive circle.

Aazharahmad0
94% match
Loading thumbnail…

Mouse Follower

A single black circle tracks the mouse in real time within an SVG canvas. The example uses React's `useState` and `useCallback` hooks to capture the mouse position via the SVG `onMouseMove` event, updating the circle's `cx` and `cy` attributes. The visualization demonstrates a minimal interactive pattern, relying on React for state management and D3 v5 only for SVG rendering support, with no data source beyond the live pointer coordinates.

Aabreeson
94% match