Let's Make a Face

100%

Let's Make a Face

✓ Published1🌍 Public

Last edited Oct 28, 2020

Created on Oct 27, 2020

A grid of identical yellow smiley faces repeats across the screen, each composed of SVG circles and an arc path. Built with React components, the `Face` assembly uses `d3.arc()` from D3 v5 to generate the mouth, while React's fragment syntax renders the eyes. The `range()` function from D3 produces 18 instances, and the `FaceContainer` handles SVG translation for positioning. The faces share fixed dimensions and offsets, creating a uniform pattern with no variation between copies.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's Make a Face

This example displays a grid of 80 yellow smiley faces, each rendered as an SVG using React components. The faces are constructed from separate reusable parts—a background circle, two eyes, and a mouth created with D3’s `arc` generator for the curved smile. Each face uses randomized eye radius values to introduce slight variation, while all other dimensions like eye offset and mouth width remain fixed. The code combines React’s component composition with D3 v7’s shape utilities, embedding the SVG elements through a `FaceContainer` that centers the drawing within the viewport.

AAndrea Picciau

95% match

Loading thumbnail…

Make Face

A grid of eighteen yellow smiley faces appears, each rendered as an SVG with a circular face, two eyes, and an arc-shaped mouth. The faces vary randomly in eye radius, giving each a slightly different expression. The example uses React components to compose the face parts, and D3's `arc` generator for the mouth path, with all geometry positioned via SVG transforms.

Ssikadali

94% match

Loading thumbnail…

Let's Make a Face

A grid of 171 randomly generated faces fills the screen, each built from SVG circles and arcs. The React components—BackgroundCircle, Eyes, and Mouth—draw a yellow smiley with black outline, while the Face container uses the d3 `arc` generator for the mouth shape. Each face randomizes eye offset, mouth radius, and vertical translation, creating a playful, varied wall of cartoon characters. The example demonstrates modular React composition with d3-generated paths inside an SVG renderer.

OOleJRask

93% match

Loading thumbnail…

let's make a face

A grid of eighteen cartoon faces fills the screen, each rendered as a yellow SVG circle with black outlines, two eyes, and a curved mouth. The faces vary randomly in eye radius and mouth thickness, creating playful individual expressions. The example uses React components to compose each face from reusable parts, with the mouth path generated via `d3.arc` and the grid created by mapping over `d3.range`.

Bbdfee

93% match

Loading thumbnail…

Let's Make a Face Part V

A grid of eighteen smiley faces, each with a yellow circular background, black outline, two eyes, and a curved mouth, is rendered as a single React application. Each face uses randomized eye radii, making them subtly distinct. The visualization is built with React components and D3’s `arc` API for the mouth shape, all rendered as SVG within a fixed 150 by 150 pixel viewport per face.

PPakapone Supavarn

92% match

Loading thumbnail…

Make a face with React

A grid of 18 randomly varied smiley faces demonstrates reusable SVG components built with React and D3. Each face is composed of a yellow background circle, two black eyes, and a mouth arc rendered using d3.arc, with positions and sizes derived from randomized props like eyeOffsetX, eyeRadius, and mouthWidth. The Face component composes smaller subcomponents—BackGroundCircle, Eyes, and Mouth—inside a FaceContainer that handles SVG width, height, and center translation. D3's range function generates the array of faces, and ReactDOM renders the entire set into a single SVG via index.js.

AAlark Joshi

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of randomly generated smiley faces fills the screen, each face composed of a yellow circle, black eyes, and a mouth drawn as a half-circle arc. The code defines reusable React components—Face, Eyes, Mouth, and BackgroundCircle—that render SVG elements, while FaceContainer wraps the drawing in a translated group. Using d3.range to create fifteen face instances, each face varies in stroke width, eye offset, and eye radius through randomized properties. The mouth shape is generated with d3.arc, setting inner and outer radii and angle ranges to form a smile.

Ppfennig

92% match

Loading thumbnail…

Let's Make a Face Part I

This example renders eighteen identical cartoon faces in a grid using React components, each composed of a yellow background circle, two black eyes, and a curved mouth. The faces are generated from an array created with `d3.range`, and each face is drawn as SVG elements within a transformed group. The mouth shape is computed using the `d3.arc` API, with inner and outer radii and angular start and end points defining its curve. React’s component-based structure, including `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`, demonstrates a modular approach to building and repeating SVG visualizations.

Kkosakase

92% match