Skip to main content
SimilarExport ZIP
100%

Mouse Follower

✓ Published0🌍 Public
IIshaChid76
Last edited Jan 17, 2023
Created on Jan 16, 2023
Forked from D3 Starter

A violet square with a dashed magenta border follows the mouse cursor across a full-screen SVG canvas. The visualization responds to every mouse movement event, continuously updating the square’s x and y coordinates to center it on the pointer. Built with D3 v7, it uses the `d3.select` and `svg.append` APIs to create and manipulate the rectangle, while the `svg.on('mousemove', ...)` handler updates the rect’s position attributes. The square measures 50 by 50 pixels and is positioned relative to the viewport dimensions set from `window.innerWidth` and `window.innerHeight`.

AI-generated description

A square that followes the mouse.

Source:

MIT Licensed

Similar vizzes

Loading thumbnail…

Mouse Follower

A red square tracks the mouse across a full-screen SVG canvas. The visualization demonstrates unidirectional data flow using D3 v7's `select` and `join` pattern. A `mousemove` event on the SVG invokes a `setState` callback, which updates the state object with cursor coordinates and triggers a re-render, repositioning the 25×25-pixel rectangle. The `viz` function binds the state to the square's `x` and `y` attributes.

Kkratikashetty1102@gmail.com
88% match
Loading thumbnail…

Mouse Follower (Make Something)

A rectangle moves in opposition to the mouse's cursor, its position derived from the inverted coordinates of the pointer within the viewport. Clicking resets the rectangle to the mouse's location by swapping the axes. Built with D3 v7 and the `select` API, the visualization uses `svg.on('mousemove')` and `svg.on('click')` handlers to update state, which then drives the rectangle's `x` and `y` attributes, styled with an orange fill and purple stroke.

MMatthew Dzwil
86% match
Loading thumbnail…

Mouse Follower

A small, randomly colored circle follows the mouse cursor across a full-screen SVG canvas, changing to a new random color with every mouse movement. Built with D3, the code uses `select` to append an SVG element sized to the window, a `circle` element for the follower, and the SVG `on('mousemove')` event to update the circle's `cx`, `cy`, and `fill` attributes. No data source is used; the visualization is purely interactive, with the color generated via a custom `getRandomColor` function.

Ssrividyap03
85% match
Loading thumbnail…

Mouse Follwer 1

A single gray circle follows the mouse cursor across the full screen, responding instantly to every movement. The visualization uses D3 v7's selection and event handling, attaching a `mousemove` listener to the SVG element. On each event, the code updates the circle's `cx` and `cy` attributes with the cursor's coordinates, logging the position to the console. The SVG fills the entire browser window via `window.innerWidth` and `window.innerHeight`, with the body reset to no margin and hidden overflow.

RRichard Hu
85% 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
84% match
Loading thumbnail…

Mouse Follower

A black circle follows the mouse cursor across a yellow SVG canvas, responding instantly to every pointer movement. The visualization uses React's `useState` hook to track the current mouse coordinates and updates the circle's `cx` and `cy` attributes on each `mousemove` event. The root SVG element captures mouse movements via React's `onMouseMove` handler, and the circle is rendered with a fixed radius and black fill, creating a simple, direct interaction between the user and the graphic.

SSerind Joshua McCue
84% match
Loading thumbnail…

Mouse Follower

A circle tracks the cursor across a full-screen SVG canvas. Each mouse movement updates the circle’s center coordinates via a state object and a custom `setState` callback. The visualization uses d3.v7’s `select` API to bind SVG elements and handle `mousemove` events, while `join` synchronizes the circle’s `cx` and `cy` attributes. The canvas resizes to the browser window dimensions.

Jjjlaber
84% match
Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across an SVG canvas, updating its position in real time as the pointer moves. Built with React and D3 v7, the visualization uses a stateful `mousePosition` variable updated via an `onMouseMove` event handler on an SVG element, rendering the circle with D3's SVG primitives.

JJosh Zalcman
84% match