Mouse Follower with Smiley Face

100%

Mouse Follower with Smiley Face

✓ Published0🌍 Public

Last edited May 23, 2020

Created on May 23, 2020

A smiley face rendered as an SVG group follows the mouse cursor across a full-screen yellow canvas. Built with React and D3, the component tracks `clientX` and `clientY` coordinates from a `mousemove` event on the `<svg>` element, updating state via `useState` and `useCallback`. The face’s head, eyes, and mouth are drawn using D3’s `arc()` generator for the mouth path, with circles for the eyes and a stroked yellow circle for the face. The group translates to the live mouse position, creating a direct, interactive visual response.

AI-generated description

A program that follows your mouse with a Smiley Face.

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

Mouse Follower

A yellow smiley face follows the mouse cursor across an SVG canvas, redrawing its position on every mouse movement event. The face is built from reusable React components—a yellow circle background, two black eye circles, and a mouth drawn with `d3.arc()`—all composed within a `<g>` transform. React state tracks the cursor’s `clientX` and `clientY` coordinates, triggering re-renders via `useState` and `useCallback`. A dropdown menu is present but not connected to the visualization.

Ppsabela

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 yellow smiley face follows the mouse cursor across an SVG canvas. Built with React, the component tracks pointer coordinates through the `onMouseMove` event and updates a circle’s position via `useState` and `useCallback`. The SVG renders a single interactive shape with no predefined facial features, responding dynamically to user movement.

FForrest Hosten

93% match

Loading thumbnail…

Mouse Follower

A smiley face rendered in SVG follows the cursor inside a 960×500 viewport. The React component tracks mouse movement via the `onMouseMove` handler and updates the circle’s position using state and the `useCallback` hook. The face is drawn with a yellow circle and two black eye circles, though the eyes remain static while the entire group moves. Rendering relies on React DOM with SVG elements, and the example highlights state-driven updates without external data sources.

SStefano Renzetti

93% match

Loading thumbnail…

Mouse Follower

A smiley face follows the mouse cursor on an SVG canvas, with a yellow circle acting as the face and a smaller circle representing its mouth. Built with React and ReactDOM, the component tracks the cursor’s position via the `onMouseMove` event and updates state with the `useState` and `useCallback` hooks, re-rendering the SVG circle’s `cx` and `cy` coordinates accordingly.

Wwzhang88

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

93% match

Loading thumbnail…

Mouse Follower

A smiley face follows the mouse cursor across a full-screen SVG canvas. The application tracks the pointer's position and renders a yellow circle with facial features at that location, creating a playful interactive effect. Built with React and ReactDOM, the example uses the `onMouseMove` event handler and `useState` to update the circle's `cx` and `cy` coordinates dynamically. The SVG viewport matches the browser window dimensions, and the smiley face’s position updates instantly as the user moves the mouse.

FFábio Correia

93% match