Fork of creative face

100%

Fork of creative face

✓ Published1🌍 Public

Last edited Nov 7, 2023

Created on Nov 7, 2023

A playful face follows the mouse cursor across an SVG canvas, tracking pointer movement via React state updates. The face is composed of reusable SVG components—a yellow circular background, two eyes, and a mouth arc—rendered through React and D3's `arc` generator. Mouse position drives the face's coordinates, while the D3 arc API creates the smile shape with specified radii and angles.

AI-generated description

mouse mover

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Hello HTML

This example demonstrates an interactive SVG face that follows the user’s mouse movements across a 960×500 viewport. Built with React and D3 v7, it renders a yellow circle tracking the cursor while a separate Face component, composed of a background circle, eyes, and an arc-based mouth, sits at the page center. The mouse position is tracked via React’s `useState` and `useCallback` hooks, while D3’s `arc` generator creates the mouth path. The visualization showcases component composition and event-driven state updates without any external data source.

AAaronnSeah

91% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows an interactive SVG face that follows the mouse horizontally across a 960×500 canvas. A single circle, positioned at the center vertically, reacts to mouse movement by updating its x-coordinate in real time. Built with React’s `useState` hook and the D3 `arc` library, the app renders a minimal smiley-face precursor. The SVG’s `onMouseMove` handler triggers state updates, demonstrating a simple pattern for combining React’s declarative rendering with D3’s geometry utilities.

JJulia Hack

90% match

Loading thumbnail…

Fork of Hello HTML

This example shows an interactive SVG face built with React and D3. It renders a yellow circular head with eyes and a mouth, using a `Face` component composed of smaller components for each facial feature. The visualization also tracks mouse movement, drawing a small red circle at the cursor position. The code uses D3’s `arc` API to create the mouth path and React’s `useState` to manage the mouse position. Rendering is handled through the ReactDOM library with inline SVG elements.

AAnthony Grant

89% match

Loading thumbnail…

Fork of Let's Make a Face Part I

The visualization renders a full-screen smiley face built from a composite `Face` component, which layers a yellow `BackgroundCircle`, `Eyes`, and a `Mouth` shaped by D3’s `arc()` into an SVG container. The code also includes an interactive overlay: a black circle tracks the mouse via React state, adjusting its radius based on cursor coordinates. While the primary face is commented out, the active app uses React’s `useState` and `useCallback` to handle `onMouseMove` events, updating the circle’s position dynamically within the SVG.

Zzarioualid@gmail.com

89% match

Loading thumbnail…

Fork of Face

A smiling face rendered with SVG, centered and scaled to fill the browser window. The visualization constructs the face using D3’s `arc` generator for the mouth and plain SVG circles for the head, eyes, and stroke. The React component computes the coordinates and dimensions based on the window’s width and height, with the head radius derived from the viewport height. The example demonstrates a hybrid approach, using React for structure while calling on D3 for the arc path generation.

Ttheocostaras

89% match

Loading thumbnail…

Fork of Fork of Face HTML part 1

A smiling face composed of a yellow background circle, two black eyes, and a curved mouth is displayed against a blank page. The example demonstrates a component-based React approach to SVG rendering, built with React 17 and D3 v6. Each facial feature is defined as a separate React component, with the mouth using the D3 `arc` generator to create its path. The face is centered within a 960x500 SVG canvas using a translation transform applied to a group element.

Aaklimairen

88% match

Loading thumbnail…

Fork of Let's Make a Face Part II

This interactive React and D3.js example displays a smiley face composed of SVG circles, including a large yellow face, two eyes, and a mouth arc. A separate circle tracks the mouse position across the canvas, its radius dynamically recalculated based on the cursor’s distance from the center. The code uses `useState` for mouse tracking and `d3.arc` to render the mouth. The face’s eyes and main circle are defined as reusable React components, with the overall layout fixed at 1000 by 500 pixels.

Bbart

88% match

Loading thumbnail…

Fork of Fork of Fork of Hello HTML

This example builds a data-driven face using React and SVG primitives. It composes a yellow circular background, two eyes, and an arc-based mouth into a reusable `Face` component. The `Mouth` component uses `d3.arc` to generate a path, while a separate SVG tracks mouse movement, drawing a red circle that follows the cursor. The app renders via `ReactDOM.render`, with all geometry defined by explicit parameters like `eyeOffsetX` and `mouthRadius`.

AAaronnSeah

88% match