Skip to main content
SimilarExport ZIP
100%

Mouse Follower

✓ Published1🌍 Public
CChristopher Cleland
Last edited Sep 12, 2021
Created on Sep 12, 2021

This example shows a single circle that follows the mouse cursor across an SVG canvas. Built with React and D3 v5, it uses React’s `useState` hook to track the cursor’s clientX and clientY coordinates on every `mousemove` event, then re-renders the circle’s `cx` and `cy` attributes to match. The `useCallback` hook memoizes the event handler, and the initial mouse position is set to the canvas center. The rendering uses ReactDOM to mount the SVG, with no external data source.

AI-generated description

A program that follows your mouse

MIT Licensed

Similar vizzes

Loading thumbnail…

Mouse Follower

This example displays a single black circle that follows the mouse cursor across an SVG canvas. The circle’s position updates live based on the cursor’s coordinates, which are tracked through React state. The code uses React’s `useState` and `useCallback` hooks, an SVG `<circle>` element, and D3.js version 5 for the underlying library. The rendering relies on ReactDOM to mount the component, with no additional data sources or animations beyond the direct mouse-following interaction.

SSophia Cofone
95% match
Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, with React managing its position in real time. The component uses React’s `useState` and `useCallback` hooks to track pointer coordinates from the `onMouseMove` event, updating the circle’s `cx` and `cy` attributes accordingly. The example demonstrates a minimal integration of D3.js (v5) with React, where D3 provides no visual functions—only the SVG rendering is handled by React, and the circle radius is fixed at 30 pixels. The canvas is 960 by 500 pixels, and the initial cursor position starts at the center.

FFrancisco Ortega
95% match
Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor as it moves across an SVG canvas. The React component tracks pointer coordinates via the `onMouseMove` event and updates the circle’s `cx` and `cy` attributes through `useState` and `useCallback`. Rendered with D3 v5’s SVG helpers within React 16.9, the example demonstrates real-time state-driven positioning without external data.

Bboreilly26
95% match
Loading thumbnail…

Mouse Follower

A plain SVG circle follows the user's mouse cursor across a 960-by-500 canvas. The React component tracks `clientX` and `clientY` from a `mousemove` event handler, updating state to reposition the circle's `cx` and `cy` attributes. The example uses React's `useState` and `useCallback` hooks, with D3 v7 loaded for potential supplementary utilities, though rendering relies solely on SVG elements and React's declarative updates.

JJun Suzuki
95% match
Loading thumbnail…

Mouse Follower

A single circle follows the mouse cursor within an SVG canvas. The example demonstrates the basic concept of tracking pointer movement and updating a visual element's position in response. It is built with React hooks, specifically `useState` to manage the circle's coordinates and `useCallback` to handle the `onMouseMove` event, rendering the circle with SVG attributes `cx` and `cy`. The scene is initialized with the circle centered, and no external data source is used.

RRodrigo Zanco
95% match
Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas. The visualization demonstrates React's state management with D3's event handling, using a `useState` hook to track cursor coordinates and a `useCallback` hook to efficiently update the circle's `cx` and `cy` attributes on every mouse move. The D3 v5 library renders the SVG element.

Nnkohdatavis
95% match
Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas. The visualization demonstrates React's state management with D3's event handling, using a `useState` hook to track cursor coordinates and a `useCallback` hook to efficiently update the circle's `cx` and `cy` attributes on every mouse move. The D3 v5 library renders the SVG element.

Nnkohdatavis
95% match
Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas. The example demonstrates React state management with D3.js in the background, using React `useState` and `useCallback` to track cursor coordinates via the `onMouseMove` event. The circle’s position updates in real time through React’s re-rendering, with its `cx` and `cy` attributes bound to the current mouse position. It renders a single circle with a radius of 30 pixels on a 960 by 500 viewport.

Sstellnew
95% match