Smiley Face Follower

100%

Smiley Face Follower - using hooks

✓ Published0🌍 Public

Last edited Aug 3, 2021

Created on Aug 3, 2021

A smiling face follows the mouse cursor across an SVG canvas, updating its position in real time. The example uses React hooks, specifically `useState`, to track mouse coordinates via an `onMouseMove` event handler on the `<svg>` element, and re-renders the face accordingly. The face is composed of reusable React components—`FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`—where the mouth shape is generated using the `d3.arc()` function from D3 v7. All rendering is done declaratively in SVG.

AI-generated description

A Smiley that follows your mouse.

Why does it clip on movement?

MIT Licensed

Similar vizzes

Loading thumbnail…

A smiley face rendered with React and SVG components follows the mouse cursor across a 960×480 canvas. The face is composed of reusable subcomponents: `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth drawn using the D3 `arc` generator. Mouse movement updates React state via `onMouseMove`, repositioning the face through a `<g>` transform in `FaceContainer`. The example demonstrates combining React's declarative component structure with D3's geometric utilities for interactive SVG visualization.

Aalexislanz

93% match

Loading thumbnail…

Mouse follower

A smiling face rendered as an SVG follows the mouse cursor across the canvas. The example combines React's `useState` and `useCallback` with D3.js to manage interactive state and coordinate updates. As the user moves the mouse, the application updates the position of the face's center, which is drawn using D3-driven SVG elements like circles for the head, eyes, and mouth. The underlying HTML hides page overflow for a full-screen, immersive interaction.

VVBarn

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

88% match

Loading thumbnail…

mouse follower

A smiley face follows the mouse cursor across the screen, rendered as SVG circles on a hidden-background canvas. Using React hooks (`useState`, `useCallback`) for state management and D3 v5 for event handling, the component tracks pointer coordinates and updates the face’s position accordingly. D3’s mouse interaction API reads the cursor location relative to the container, while React’s state-driven re-rendering animates the yellow circle face, eyes, and smile in real time.

DDennis Kozevnikoff

88% match

Loading thumbnail…

mouse follower

A smiling face rendered in SVG follows the mouse across the screen. Built with React and D3 v5, the example uses D3’s `arc` generator to create the mouth, while the face circles, eyes, and stroke are defined as React components. The entire SVG group is translated to the viewport center, and the mouse follower behavior is implied by the full-screen, overflow-hidden layout, though no explicit mouse event handlers appear in the code. The static smiley face adapts to its container dimensions.

Mmlscmoulika

88% match

Loading thumbnail…

Mouse follower

This example shows a simple smiley face that follows the mouse cursor across a 960-by-500 SVG canvas. The face is drawn with a yellow linear gradient, two elliptical eyes, and a d3.arc-generated mouth, all assembled from React components. As the user moves the mouse, the React state updates the circle’s center coordinates via the `onMouseMove` handler, re-rendering the face at the new position. The code uses React’s `useState` and `useCallback` hooks, along with d3’s `arc` for the mouth path, and renders everything as SVG elements.

Ccharles-duron

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

88% match

Loading thumbnail…

Mouse follower

A smiling cartoon face renders in SVG using React components for the background circle, eyes, and mouth, all positioned within a transformed group. As the mouse moves over the svg element, a separate filled circle follows the cursor’s client coordinates. The face itself integrates D3’s `arc()` generator for the mouth shape and static eye offsets, while React’s `useState` and `onMouseMove` handler update the follower circle’s position.

JJasmyne Okudo

87% match