Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited May 18, 2021

Created on May 18, 2021

A grid of 18 randomly generated cartoon faces, each rendered as a yellow circle with black outline, two eyes, and an arched mouth. The example uses React to instantiate multiple `Face` components, each composed of `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents, which build SVG elements. The `Mouth` component leverages d3’s `arc()` API to compute the path for a smile, with randomized dimensions for facial features.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a grid of randomly generated cartoon faces, each with a yellow circular background, two eyes, and a half-circle mouth. The faces are rendered as SVG elements using React components. The code defines reusable `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` components, with the mouth drawn using the `d3.arc` API. A `range(18)` array from d3 generates eighteen faces, each with randomized stroke thickness, eye position, eye radius, and mouth dimensions, resulting in a playful variety of expressions.

Hhasti khajeh

97% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of 18 randomly generated faces, each with a yellow circular background, two eyes, and a mouth, demonstrates a modular React component approach. The code uses D3’s `arc` API to create the mouth path and the `range` function to generate the grid layout. Each face’s eye offset, eye radius, and mouth radius are randomized, resulting in varied expressions, while the SVG rendering is handled through React components for the background, eyes, mouth, and face container.

Ssimfen

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a grid of fifteen smiley faces, each with randomized eye and mouth sizes, rendered as yellow SVG circles with black outlines. Built with React and D3 v7, the visualization uses reusable components like `FaceCircle`, `Eyes`, and `Mouth` to compose each face. The `Mouth` component leverages D3's `arc` generator to create a curved smile path, while the `FaceContainer` wraps the SVG elements and centers them via a translation transform.

JJulia

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

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of randomly generated smiley faces fills the viewport, each with a yellow circular head, black-outlined stroke, two eyes, and a curved mouth arc. The faces vary in stroke width, eye offset, eye radius, mouth width, and mouth radius, produced by a React app that maps over a `range(6*3)` array to render 18 `<Face>` components. Built with D3 v7’s `arc()` function for the mouth and SVG primitives like `<circle>` and `<path>`, the example uses React 17 and renders everything as SVG within a `FaceContainer` that translates each face to a centered position.

NNilsMar

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of 18 identical simplified smiley faces, each rendered as a yellow circle with a black border, two eyes, and a curved mouth, is displayed using React and D3. The faces are built from reusable React components—`FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`—which take width, height, offset, and radius props. The mouth is drawn using D3’s `arc` generator, while the grid is produced by mapping over an array from `d3.range`. All rendering is done as SVG elements.

OOraclePcs

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of eighteen randomly generated smiley faces demonstrates the reusability of React components for data-driven SVG composition. Each face uses `d3.arc` to construct a smiling mouth, while circle elements form the eyes and face outline, with randomized parameters for eye offset, radius, stroke width, and mouth dimensions. The code builds reusable `Face`, `BackgroundCircle`, `Eye`, and `Mouth` components within an SVG container, iterating over values from `d3.range` to render multiple variations simultaneously.

JJacob Potvin

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of 18 randomly generated cartoon faces fills the screen, each with a yellow circular background, two black eyes, and a D3 arc-based mouth. The faces vary in stroke width, eye offset, eye radius, and mouth dimensions due to randomized values from `Math.random()`. Built with React and D3 v6, the visualization uses the `arc()` API from D3 to define each mouth’s path, while React components (`Face`, `BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`) assemble the SVG output. The data source is implicit, generated programmatically via `d3.range` and random parameters.

NNfuu

94% match