Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Nov 14, 2021

Created on Nov 14, 2021

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.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face constructed from nested SVG shapes, with a yellow circular head, two eyes, and a curved mouth arc, all centered on a 960×500 canvas. The face is built using React to render SVG elements, while D3’s `arc` generator creates the mouth path from angular start and end positions. Position and size values are defined as constants and applied via coordinate transforms. The code demonstrates a minimal integration of React and D3 for static geometric visualization.

SSimone

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

90% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a plain yellow SVG face composed of a single circle, rendered at the center of a 960-by-500 canvas. It does not animate or display facial features; instead, it responds to mouse movement by logging the pointer’s client coordinates to the console. The visualization uses React 17 for component structure and the `onMouseMove` event handler, while D3 v7 is loaded but not used for rendering. The SVG circle is drawn with fixed `cx`, `cy`, and `r` attributes, and the page is set up with an HTML template and bundled JavaScript.

TTOKIHISA

90% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A stylized face is drawn in SVG using React, with a pink circular head, two eyes, a line for a brow, and a smile rendered as an arc. The face is centered on a 960x500 canvas, with explicit coordinates for eye offsets and mouth dimensions. The code uses React’s createElement via JSX, d3’s `arc()` to generate the mouth path, and groups (`<g>`) with translate transforms to position features. Static data defines all shapes, and no interactive behavior is present.

MMONNNA-ARCH

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

90% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built with SVG primitives in a React component, using D3’s `arc` generator to create a full circular mouth. The face consists of a yellow outer circle with a black stroke, two black eye circles positioned symmetrically, and the mouth path rendered below the eyes. The code explicitly sets width, height, center coordinates, and offsets for the eyes, demonstrating how fixed viewport dimensions and spacing constants drive the layout. It uses React 16.9 and D3 v7, with the SVG rendered directly into the DOM.

CCamila Valdivia

90% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A stylized smiley face rendered in SVG, built with React and D3 v7, centers a yellow circle with a black stroke on a 960 by 500 canvas. The face uses D3's `arc()` generator to draw a mouth as a thick arc, while two offset circles serve as eyes. React manages the component structure, and D3 calculates the mouth’s path geometry based on specified radius and angle values. The example demonstrates composing SVG primitives with D3 shape generators inside a React render tree.

Uubik-valis

90% match