Mouse Follower with Colorful Circles

100%

Mouse Follower with Colorful Circles

✓ Published0🌍 Public

Last edited Oct 20, 2020

Created on Sep 27, 2020

A mouse follower creates an expanding circle at the cursor position, with each circle fading out and disappearing after 2 seconds. The circles use the `d3.schemePaired` color scale to generate varied stroke colors. Built with React and D3 v5, the app tracks mouse movement via React’s `onMouseMove` event and appends SVG circles using `d3.select` with a `transition()` duration of 2000ms that animates the radius and stroke opacity.

AI-generated description

This is a mouse follower with colorful circles.

Modified by Enze Liu from Mouse Follower

Each circle would last for 2 seconds to fade away.

Use the color set d3.schemePaired to generate different colors of the circle.

MIT Licensed

Similar vizzes

Loading thumbnail…

Mouse follower

A colored circle follows the mouse across the screen, leaving a trail of fixed-size blobs whenever the left mouse button is held down. The interface includes a color picker and numeric size input to adjust the drawing properties, while a text readout shows raw or aspect-ratio–corrected coordinates. Built with React and rendered as SVG circles, the app uses `useState`, `useCallback`, `React.memo`, and window mouse event listeners to manage state and redraw efficiently.

NNick Pearson

89% match

Loading thumbnail…

Mouse Follower

A circle inside an SVG follows the mouse cursor in real time. The visualization tracks pointer coordinates and updates the circle's position instantly. Built with React and D3 v7, the app uses the `onMouseMove` event and the `useState` hook to store and render the cursor's `clientX` and `clientY` values. The circle's radius is fixed at 30 pixels.

Ddmagarian

88% match

Loading thumbnail…

Mouse Follower

A single SVG circle follows the mouse as it moves across the browser window, cycling through a rainbow of colors every second. Built with React hooks (useState, useCallback, useEffect), the component tracks mouse coordinates via onMouseMove and updates the circle's cx, cy, and fill attributes. The color changes through a 13-color array on a one-second interval, with a CSS transition smoothing the fill change. The example demonstrates interactive SVG rendering within a React application without additional data sources.

RRyan Murry

88% match

Loading thumbnail…

Mouse Follower

A single SVG circle follows the mouse cursor across a 960 by 500 viewport. The React component uses the `useState` and `useCallback` hooks to track pointer coordinates from the `onMouseMove` event, updating the circle’s `cx` and `cy` attributes with each move. The circle renders with a fixed radius but no fill color, appearing as a black outline on a white background. D3 is loaded but not used in the rendering logic.

BbeauMarko

88% match

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor within an SVG canvas, updating its position in real time as the pointer moves. Built with React, the application tracks mouse coordinates using an `onMouseMove` event handler and stores them in state via `useState`. The circle’s `cx` and `cy` attributes are bound to this state, and the SVG is rendered through ReactDOM. D3.js is included but not used for drawing; the interaction relies solely on React’s event system.

MMd. Jakir Hosen

88% match

Loading thumbnail…

Mouse Follower

A red circle follows the mouse cursor across an SVG canvas, updating its position in real time as the user moves. Built with React and D3 v5, the app uses React’s `useState` and `useCallback` hooks to track mouse coordinates via the SVG `onMouseMove` event, then re-renders the circle’s `cx` and `cy` attributes accordingly. No data source is involved; the visualization simply demonstrates interactive event handling and state-driven rendering with SVG.

EErik

88% match

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor as it moves across an SVG canvas, creating a simple interactive pointer-tracking effect. The visualization uses React state to store the cursor's coordinates and updates the circle's position through an `onMouseMove` event handler. Rendered with D3 v7 and React 18, the SVG circle has an aquamarine fill with a green stroke. The code relies on React's `useState` and `useCallback` hooks to manage and update the mouse position efficiently.

Aawidjaja777

88% match

Loading thumbnail…

Mouse Follower

The Mouse Follower example demonstrates real-time interactive feedback by rendering a single circle that tracks the cursor’s position across an SVG canvas. Built with React hooks (`useState`, `useCallback`), it updates the circle’s `cx` and `cy` attributes on every `mousemove` event, using D3 v7 for SVG manipulation. The visualization overlays a large yellow circle with black stroke as a static background, while the moving circle responds dynamically to pointer coordinates, highlighting coordination between React state management and D3’s SVG rendering.

Ppfennig

88% match