Skip to main content
SimilarExport ZIP
100%

Follow mouse with circle.

✓ Published1🌍 Public
IIlia Katkovnik
Last edited Mar 13, 2021
Created on Mar 10, 2021

A circle follows the mouse as it moves across an SVG canvas. The demonstration uses React state to track cursor coordinates on mouse move and updates the circle’s position accordingly. Built with React 17 and D3 v6, the visualization relies on React’s `useState` and `useCallback` hooks, while the SVG circle’s `cx` and `cy` attributes are bound to the current mouse position.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Follow mouse with circle

A circle follows the mouse cursor across an SVG canvas as the pointer moves. The visualization uses React state management with `useState` and `useCallback` to track the cursor's `clientX` and `clientY` coordinates, updating the circle's `cx` and `cy` attributes on every mouse move event. Rendering is handled declaratively with React's JSX, creating a single SVG circle element that responds to pointer interaction. The example demonstrates basic event handling and state-driven updates in a React-based SVG visualization.

SShane Carey
93% match
Loading thumbnail…

Follow Mouse

A circle follows the mouse cursor across an SVG canvas, centered on the pointer's current position. The visualization uses React's `useState` and `useCallback` hooks to track mouse coordinates from the `onMouseMove` event, updating the circle's `cx` and `cy` attributes accordingly. Rendered with React and D3 v6 in an SVG element, the example demonstrates simple interactive state management without any data source or external datasets.

CCarlos Caballero
93% match
Loading thumbnail…

Circle follow mouse

A single circle follows the mouse cursor within an SVG canvas. The visualization demonstrates pointer tracking in React, using state to store the current mouse coordinates and updating the circle's `cx` and `cy` attributes on every mousemove. The code uses React’s `useState` and `useCallback` hooks, with the SVG rendered directly via ReactDOM. D3 v7 is loaded but not actively used, as the rendering relies purely on React’s declarative SVG elements. The mouse position defaults to the canvas center before any movement.

SShashwat Kumar
92% match
Loading thumbnail…

Circle following Mouse

A circle follows the cursor’s position across a 960x500 SVG canvas. Built with React and D3 v7, the example uses an `onMouseMove` event handler on the `<svg>` element to capture mouse coordinates and update React state. The circle’s `cx` and `cy` attributes are bound to this state, causing the circle to continuously reposition as the mouse moves. The SVG is rendered via React’s `ReactDOM.render`, with the circle radius fixed at 30 pixels.

MMarcoAR1
92% match
Loading thumbnail…

Follow Mouse

A circle follows the mouse cursor within an SVG canvas as the user moves over it. The example uses React state (`useState`) to track cursor position and a `useCallback` handler with `onMouseMove`. Position is derived from the `clientX` and `clientY` event properties. The visualization renders with SVG, using d3.v5 for the drawing context and React 17 for component logic.

Jjunxiangyao
91% match
Loading thumbnail…

Mouse Follow Circle

A circle follows the mouse cursor across a fixed-size SVG viewport, updating its position in real time. The example uses React state to track the cursor’s client coordinates via an `onMouseMove` handler, then renders the circle’s `cx` and `cy` attributes. It demonstrates a minimal integration of SVG with React hooks, without using D3’s data-joining or animation APIs.

AAlexClaz
91% 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
91% 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
91% match