Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Fork of Let's Make a Face Part Vi

✓ Published0🌍 Public
MMONNNA-ARCH
Last edited Jan 15, 2021
Created on Jan 15, 2021

A grid of randomized faces is rendered, each assembled from SVG shapes composed in React components. The face includes a pink background circle, two eyes of differing radii, a mouth drawn with d3’s `arc` API, and rectangular teeth. The `range` function from d3 generates the array, and `Math.random` drives variation in stroke width, eye offset, and mouth dimensions across the 18 instances. The `FaceContainer` uses an SVG `<g>` transform to center each face within its viewport.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of face_version5

A grid of eighteen procedurally generated cartoon faces, each composed of a yellow circle, two eyes, and an arc-based mouth, demonstrates the variability possible through randomized parameters. The React components `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` compose individual SVGs, with `FaceContainer` managing the coordinate transform. Using d3’s `arc` generator, the mouth shape is defined by inner and outer radii and specific angles, while `Math.random()` varies stroke widths, offsets, radii, and mouth curvature across the batch, making every face slightly different.

114Hazel
93% match
Loading thumbnail…

Fork of Fork of Let's Make a Face Part I

Ten randomly generated smiley faces are rendered in a grid using React and SVG. Each face uses a yellow background circle, two eyes, and a mouth arc drawn with the d3.arc() API. The `Face` component composes smaller components for the background, eyes, and mouth, with all geometry positioned relative to a central transform. Randomized values for stroke width, eye offset, eye radius, and mouth dimensions are set inline via `Math.random()` during each render.

Uubik-valis
92% 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
92% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Let's Make a Face Part I

A field of fifteen yellow smiley faces, each drawn with SVG circles and a D3 arc, repeats in a grid. The faces vary slightly in stroke width, eye radius, and mouth thickness due to random values from `Math.random()`. The React components `Face`, `Eye`, `Mouth`, and `BackgroundCircle` are assembled within a `FaceContainer` that applies a translation. The D3 `arc` API generates the mouth path, while the `range` function from d3 creates the iteration array for the map.

Ddeep1358
92% 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
92% match
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
92% 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
91% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This gallery example generates a grid of eighteen stylized faces, each a variation on the same base design with randomized eye sizes, rendered as SVG circles and an arc-based mouth. The faces are composed programmatically using React components, with `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer` assembling the visuals. The code leverages the `d3.arc()` API to create the mouth path and `d3.range` to generate the array of face instances, all rendered through ReactDOM into a single SVG container.

NNatalia-Ilchenko
91% match