Fork of tukaz make a face 2

100%

Fork of tukaz make a face 2

✓ Published0🌍 Public

Last edited May 31, 2022

Created on May 31, 2022

This example shows a single cartoon face rendered with SVG that can be dragged around the screen by pressing and holding the mouse button. The face is built from React components for the head, eyes, and mouth, using D3's `arc` generator to draw the mouth shape. The app tracks mouse movement via React state and event handlers, repositioning the face container absolutely within the page whenever the mouse moves while pressed. With a viewport height of 500 pixels, the face follows the cursor freely, demonstrating a simple interactive drag interaction in a React and D3 hybrid setup.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

85% match

Loading thumbnail…

Fork of creative face

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.

Jjackcaldwellnichols

84% match

Loading thumbnail…

tukaz make a face

A yellow, black-stroked face with two eyes and an arched mouth follows the mouse while the button is pressed, dragging across the screen. The face is composed of SVG primitives rendered through React components, using D3’s `arc` generator to shape the mouth and `range` to construct a sequence of faces. Mouse events (`onMouseDown`, `onMouseUp`, `onMouseMove`) toggle a pressed state and update the face’s absolute position, demonstrating interactive event handling in a hybrid React/D3 workflow.

LLucas Fiorini

83% match

Loading thumbnail…

Fork of Hello HTML

This example renders a cartoon face composed of SVG shapes in a React component hierarchy. It uses D3's `arc` generator to draw the mouth and passes numeric props from a top-level `Face` component down to `BackgroundCircle`, `Eyes`, and `Mouth`. The face is centered with a yellow background circle, two black eyes, and a curved smile. The React app mounts to a div and renders the face into an SVG container with a fixed width and height.

Ddmagarian

83% match

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

83% match

Loading thumbnail…

Fork of Let's Make a Face Adjusted mouse

This example shows a yellow smiley face drawn with SVG primitives: a circular head, two eyes, and an arc-based mouth. The React application uses D3 v7 functions like `d3.arc` for the mouth path and `d3.line` to generate a zigzag line for the hair. It demonstrates combining React components with D3 shape generators, with all elements positioned relative to the center using SVG transforms. The code includes static face geometry only, with no interactive mouse handling despite the title.

KKazushige Okuma

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

83% match

Loading thumbnail…

Fork of Face by yasmeen

A stylized cartoon face rendered with SVG primitives, built as a React component using D3's `arc()` generator for the mouth, eyes, and ears. The face features layered circles for eyes and irises, an ellipse rotated for a nose, colored lines for eyebrows and mouth details, and shaped arc paths for eyebrows and ears. All elements are positioned within a single SVG group using template literals for translate transforms, demonstrating how React and D3 can be combined for declarative drawing.

Yyasmeenha

83% match