Skip to main content
SimilarExport ZIP
100%

19kmunz Mouse Follower

✓ Published0🌍 Public
KK Munz
Last edited Feb 13, 2023
Created on Jan 11, 2023
Forked from Hello VizHub

A mouse follower shows a spinning star that tracks the cursor across an SVG canvas, changing opacity based on horizontal position. The star rotates via the Web Animations API, while d3.js appends white circles at intervals to create a disappearing trail. The star’s SVG path is imported from a separate JavaScript file, and styling is handled through CSS.

AI-generated description

Following along with the 2023 WPI Data Viz Week 1 Videos and having fun! Based on the simple mouse follower.

  • Adds fun spin when moving along the x coordinate. I wanted to play with css animation for the first time!
  • Adds a star svg! I stored the svg path info in seperate javascript file
  • Adds a disappearing trail!
  • Spruces up some colors
  • Changes opacity of the star based on the x coordinate!
MIT Licensed

Similar vizzes

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
82% match
Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time. The visualization uses React state to track mouse coordinates via the `onMouseMove` event listener, then renders the circle’s `cx` and `cy` attributes accordingly. It relies on React 16.9, ReactDOM, and the SVG renderer within a fixed 960×500 viewport, with no external data source.

Ssucotton9
82% match
Loading thumbnail…

Mouse Follower

A React SVG visualization renders a single black circle that tracks the mouse cursor across a 960 by 500 pixel canvas. The circle’s position updates via React state and the `useState` and `useCallback` hooks, responding to `onMouseMove` events on the SVG element. The code uses `ReactDOM.render` to mount the app and has no external data source, simply displaying interactive mouse-following behavior.

Iivipaneva2002@gmail.com
81% match
Loading thumbnail…

Mouse Follower

A mouse follower renders a single black circle on an SVG canvas that tracks the pointer’s position in real time. It visually demonstrates interactive coordinate tracking, updating the circle’s center to match the cursor’s clientX and clientY location. The React component uses the useState hook to store the mouse position and a useCallback handler on the SVG’s onMouseMove event to update state on every movement. Rendered via ReactDOM, the SVG circle’s cx and cy attributes are set from this state, with d3.v5 loaded for potential utility but not directly used in this logic.

Yyanaltingliu
81% match
Loading thumbnail…

Mouse Follower

A glowing circle follows the mouse cursor across a full-screen SVG canvas. The visualization uses React’s `useState` and `useCallback` to track the pointer’s `clientX` and `clientY` coordinates, updating the circle’s `cx` and `cy` attributes in real time. The rendering is done via ReactDOM, with the SVG element’s `onMouseMove` event triggering state updates, while D3.js is loaded but not directly utilized in the interaction logic.

SSapna Nagwanshi
81% match
Loading thumbnail…

Mouse Follower

A black circle follows the mouse cursor as it moves across a full-screen SVG canvas. The visualization updates the circle's position in real time using React's `useState` and `useCallback` hooks with an `onMouseMove` event handler. The code combines React 16.9 with D3.js v7, rendering solely through SVG elements without any data source, demonstrating interactive state-driven graphics.

AAustinSkrobar
81% match
Loading thumbnail…

Mouse Follower

A black circle follows the mouse cursor across a fixed 960x500 SVG canvas, remaining centered on the pointer’s exact position. Built with React’s `useState` and `useCallback`, the app listens to the SVG’s `onMouseMove` event, updates the circle’s `cx` and `cy` coordinates, and re-renders accordingly. D3 v5 is loaded but not directly used in the visible logic, while React produces the SVG elements and manages state updates.

Ttorstenaan
81% 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
81% match