Skip to main content
SimilarExport ZIP
100%

Mouse Follower

✓ Published1🌍 Public
TThomas Cormican
Last edited Jan 5, 2022
Created on Jan 5, 2022
Forked from Hello HTML

A smiling cartoon face follows the mouse across the screen, rendered as a yellow circle with eyes and an arc-shaped mouth. Built with React and D3 v7, the app tracks pointer movement via an SVG `onMouseMove` event, updating React state to reposition the face. The face’s components—background circle, eyes, and mouth—are composed from reusable React components, with the mouth drawn using a `d3.arc` path generator.

AI-generated description

A program that follows your mouse with a circle.

MIT Licensed

Similar vizzes

Loading thumbnail…

Mouse Follower

A smiling cartoon face follows the mouse cursor across a yellow SVG canvas. The face is assembled from React components, with a yellow circle for a head, black-outlined eyes, and a curved mouth drawn using D3’s `arc` path generator. Mouse movement is tracked via an `onMouseMove` event listener, storing coordinates in React state and updating the rendered position of the face. D3 v6 provides the arc geometry, while React manages the interactive SVG rendering.

CCarolineZhou
94% match
Loading thumbnail…

Mouse Follower

A yellow smiley face, built from SVG circles and an arc, tracks the cursor across a full-screen canvas. The face renders with React components, including a d3.arc-generated mouth, while the center position updates via React state on mouse events. The app uses React's useCallback and useState hooks to manage the mouse coordinates, drawing the face inside a transparent SVG that spans the viewport.

JJohn Huang
94% match
Loading thumbnail…

Mouse Follower

A smiley face rendered in SVG follows the mouse cursor across a yellow background. The face, built from React components for the background circle, eyes, and a d3.arc-generated mouth, updates its position via React state on every mousemove event. The visualization uses React’s useCallback and useState hooks to track client coordinates, re-rendering the face container at the new location.

Kkevin-jake
93% match
Loading thumbnail…

Mouse Follower

A smiling face drawn with React SVG components follows the mouse cursor across the screen. The face is composed of reusable React components (BackgroundCircle, Eyes, Mouth) that use d3.arc for the mouth path. The app tracks mouse movement via React’s onMouseMove and useState hook, updating the circle’s cx and cy coordinates in real time. The visualization demonstrates interactive, state-driven rendering with React 17 and d3.v7, tightly coupling user input to SVG output.

DDiego Isla López
93% match
Loading thumbnail…

Mouse Follower

A yellow smiley face with eyes and a mouth follows the mouse cursor across an SVG canvas. The React app tracks pointer movement via the `onMouseMove` event, updating the face's position through `useState` and `useCallback` hooks. The face is composed of reusable React components (`Face`, `Eyes`, `Eye`, `Mouth`), with the mouth drawn using a `d3.arc()` path generator. The rendering is entirely SVG-based, with a single `<circle>` for the face, two smaller circles for eyes, and a filled arc for the mouth, all positioned relative to the current mouse coordinates.

YYashuVerma1210
93% match
Loading thumbnail…

Mouse-follower

A cartoon face rendered in SVG follows the mouse cursor across the screen, with its yellow circular head repositioning to track pointer movement. Built with React and D3 v6, the face uses reusable components for the background circle, gradient-filled eyes, and an arc-based mouth. The `Face` component manages mouse position via React state and updates the circle's coordinates through `onMouseMove` events, while `range(1)` from D3 generates a single face instance.

JJonas Carvalho
93% match
Loading thumbnail…

Mouse Follower - Interaction with React

A smiling yellow face rendered with React and SVG follows the mouse cursor across a full-screen canvas. The application tracks pointer movement via React's `useState` and `useCallback` hooks, updating the circle's center coordinates on every `onMouseMove` event. The face is composed of reusable React components—`Face`, `BackGroundCircle`, `Eyes`, and `Mouth`—where the mouth path is generated using the D3 `arc()` generator. All rendering uses SVG elements positioned within a `<g>` transform, demonstrating a simple interactive visualization built with React state management and D3's geometry utilities.

AAlark Joshi
93% match
Loading thumbnail…

Mouse follower

A smiling face follows the mouse cursor across a yellow circular background, with eyes and mouth that scale and shift based on randomized dimensions. Built with React components and D3 v5, the example renders SVG shapes including a circular background, offset eyes, and an arc-based mouth using the `d3.arc()` API. The face’s position updates dynamically in response to mouse movement, with component props controlling dimensions like eye offset, radius, and mouth width to create varied expressions.

RRoberto
93% match