Skip to main content
SimilarExport ZIP
100%

Mouse Follower & Path Drawer

✓ Published3🌍 Public
TTom-S82
Last edited Jul 9, 2020
Created on Jul 8, 2020
Forked from Smiley Face Part 1

This example demonstrates a reactive mouse-follower interaction in a React-powered SVG visualization. A gradient-filled circle tracks the cursor's movement, while a d3 path element dynamically appends line segments to record the cursor’s trajectory. The path uses an SVG linear gradient, and the circle uses a radial gradient, both defined in defs. Clicking the SVG triggers a state reset via a callback, clearing the drawn path and allowing a new trace to begin. The visualization leverages React’s `useState` and `useCallback` hooks for efficient state management and rendering updates.

AI-generated description

A program that follows your mouse with a circle & draws it's path.

(click the SVG to remove the path trace)

Tutorials:

Extras:

  • As the circle is moved around the SVG, a Path is drawn that traces it's route (Thanks to Curran for the live help with this!)
  • An onClick function has been added to the SVG. This removes the trace path and allows the user to re-draw it.
  • Styling has been added to the circle and the path.

Uni-directional Data Flow Process:

  • -> RENDER
  • -> Perception & Cognition - User processes & understands what they see
  • -> Volition & Action - User wants to do something to change what they see
  • -> INTERACTION
  • -> Event Listener(s) are triggered for the particular event the user wants to change
  • -> Change State
  • -> RE-RENDER - VirtualDOM reconciliation - only updates what changed

Notes:

  1. initialMousePosition = object that puts the circle in the centre of the SVG (passed in below) (render).
  2. Create useState variable and function (mousePosition & setMousePosition). On the initial render, mousePosition = initialMousePosition.
  3. Mouse position initialises x and y co-ordinates.
  4. onMouseMove = interaction, initialised on first render, triggers function on state change (enables interaction).
  5. Changes the state of the circle based on the interaction (X & Y position). It extracts clientX & clientY from onMouseMove (many more look to be available) (interaction).
  6. Destructure to get each new coordinate.
  7. New state object defined and assigned to setMousePosition (see 9). for a better way).
  8. setMousePosition makes App re-render with the new object values as mousePosition.
  9. useCallback hook wrapped into handleMouseMove with a second argument as an array of the most recent dependencies. This means it doesn't reset the handleMouseMove as a new function each render. Only the first time it's rendered, so it's more efficient.
  1. initialMousePath sets the initial co-ordinates of the path as M x y.
  2. Create useState variable and function (mousePath & setMousePath). Same logic as (2).
  3. Current co-ordinates are grabbed and appended to the path as L x y (e.g. M x y L x y L x y)
  4. Button calls ResetPath callback
  5. Mouse path is reset to M x y. This clears the old path.
MIT Licensed

Similar vizzes

Loading thumbnail…

Mouse Follower

A circular marker follows the mouse cursor across an SVG canvas, while a path traces the complete route of its movement. The visualization demonstrates unidirectional data flow in React with D3.js v5, using React state and Hooks (`useState`, `useCallback`) to handle mouse events and trigger re-renders. The path is built by collecting `clientX` and `clientY` coordinates on each `onMouseMove` event, and a reset button clears the trace back to the current cursor position. The SVG is rendered directly via React, with D3 providing the `path` utility for constructing the line string.

IIan Johnson
88% match
Loading thumbnail…

Mouse Follower

A black circle follows the mouse cursor across a green SVG canvas, responding instantly to pointer movement. The visualization uses React’s `useState` and `useCallback` hooks to track the mouse position and update the circle’s `cx` and `cy` attributes. The SVG element’s `onMouseMove` event handler captures the cursor coordinates, while D3’s `arc` module is imported but unused. The example demonstrates a simple interactive pattern combining React state management with SVG rendering.

TTyler Durham
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

An interactive SVG visualization renders a single circle that follows the mouse cursor across a 960-by-500 canvas. The React component tracks pointer movement via the `onMouseMove` event and updates the circle’s `cx` and `cy` attributes through `useState` and `useCallback`. Initially positioned at the canvas center, the circle moves smoothly with the cursor. The example demonstrates state-driven rendering in React 17 with D3 v7, using plain SVG elements rather than data joins or scales. No external data source is involved; the visualization purely reacts to user input.

LLove Wessman
87% match
Loading thumbnail…

Mouse Follower

A mouse follower example renders a single SVG circle that tracks the cursor's position within a 960 by 500 viewport. Using React state hooks (`useState` and `useCallback`), the component updates the circle's `cx` and `cy` coordinates on every `mousemove` event. D3 version 7 is loaded for potential utilities, though the interaction relies solely on React's event handling and SVG rendering. The circle starts centered and moves fluidly, demonstrating simple interaction between DOM events and React's declarative UI updates.

TTatyana Milanova
87% match
Loading thumbnail…

Mouse Follower

A single black circle follows the mouse cursor across an SVG canvas. The example demonstrates how React manages dynamic state alongside D3’s rendering environment. Using React’s `useState` and `useCallback` hooks, the component tracks mouse coordinates from the SVG’s `onMouseMove` event and updates the circle’s `cx` and `cy` attributes. The circle is rendered via React’s JSX, while D3 v5 is loaded but not directly used for interaction; the visualization relies entirely on React’s state updates to redraw the SVG element in real time.

Rrstrauss127
87% match
Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, centering itself on the pointer’s coordinates. The example demonstrates React state management to track mouse movement, updating the circle’s position on every move event. It uses React’s `useState` and `useCallback` hooks alongside D3 v6 for the SVG rendering, with an initial circle centered at 480, 250. The visualization responds interactively in real time, showcasing a minimal integration of React and D3 for dynamic graphics.

WWolfgang
87% match
Loading thumbnail…

Mouse Follower

A single dark circle follows the mouse cursor across an SVG canvas in a React-based visualization. The circle’s position updates live via React’s `useState` hook, driven by the SVG `onMouseMove` event, which captures the cursor’s client coordinates. Rendering uses plain SVG elements, with D3 v5 loaded but not actively used in the logic. The example demonstrates reactive state-driven updates in React for interactive graphics, with the circle centered on the pointer’s exact location.

AAnmol Gupta
87% match