Mouse follower

100%

Mouse follower

✓ Published0🌍 Public

Last edited Apr 29, 2021

Created on Apr 29, 2021

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.

AI-generated description

A program that follows your mouse with a circle.

MIT Licensed

Similar vizzes

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across a 960-by-500 SVG canvas. Built with React and ReactDOM, the app tracks pointer coordinates via an `onMouseMove` handler on the SVG element, storing them in state with `useState` and updating them through `useCallback`. Each move re-renders the circle's `cx` and `cy` attributes, creating a direct, responsive visual link between pointer position and the rendered shape.

Ttotallynormalpeep

89% match

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time as the pointer moves. Built with React, the app uses the `useState` hook to store the mouse coordinates and a `useCallback` handler triggered by the SVG's `onMouseMove` event. The circle is rendered as an SVG `<circle>` element with a fixed radius of 30 pixels. The viewport is set to 960 by 500 pixels, and the initial position is centered before any mouse movement occurs.

DDavid

89% match

Loading thumbnail…

Mouse follower

A filled circle follows the mouse in real time across a full-screen SVG canvas. The application is built with React (using `useState` and `useCallback` for state management and event handling) and renders the circle as an SVG `<circle>` element. The circle's `cx` and `cy` coordinates update directly from the mouse's `clientX` and `clientY` values, with its position reset to the viewport's center on initial load. No external data is involved; the visualization responds solely to user input.

TTaeyoung Ahn

89% match

Loading thumbnail…

Mouse Follower

A React and SVG visualization renders a black circle that follows the mouse cursor across a 960 by 500 canvas. As the pointer moves, the circle’s fill color changes randomly to one of six predefined hex values (e.g., red, green, blue). The application tracks cursor coordinates via the `onMouseMove` event on the `<svg>` element, updating the circle’s `cx` and `cy` attributes through React state. The code uses React’s `useState` and `useCallback` hooks to manage position and color updates efficiently.

NNiku12352

89% 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

89% match

Loading thumbnail…

Mouse Follower

A circular shape tracks the user's cursor in real time, responding to every mouse movement across the full viewport. The visualization reacts immediately to input, with a fixed-radius circle redrawing its position wherever the pointer travels. Built with React, the app uses the `useState` hook to store the mouse coordinates and the `onMouseMove` event handler on the root `<svg>` element to capture position updates. The circle is rendered purely as an SVG element, with ReactDOM managing its placement, all within a full-window canvas that resets with the window size.

CCarlos

89% match

Loading thumbnail…

Mouse Follower with Colorful Circles

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.

Rrioto9858

89% match

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across the full browser window, with its position updating in real time to match the pointer's coordinates. Built with React hooks (useState and useCallback), the app tracks mouse movement via the SVG onMouseMove event and renders the circle using SVG elements. The visualization uses ReactDOM to mount the component and adjusts to the window's inner dimensions, demonstrating a simple interactive pattern with no external charting library.

Ggeorgie-flood

89% match