Forked Face

100%

✓ Published0🌍 Public

Last edited Jul 22, 2021

Created on Jul 21, 2021

Ten randomly generated faces appear in an SVG canvas, each composed of a pink circular background, two eyes, a d3 arc-based mouth, and a black rectangular hat. The React components BackgroundCircle, Eyes, Mouth, Hat, and FaceContainer assemble the visual, while the App component maps over a d3.range array to render multiple variations. Each face’s stroke width, eye radius, and mouth width are randomized on render, producing a grid of subtly different expressions. The code relies on React for component structure and d3.v7 for the arc generator.

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

92% match

Loading thumbnail…

Fork of Hello HTML

A gallery of randomly generated cartoon faces rendered as React components in SVG. Each face combines a colored background circle, two offset eyes, and an arc-based mouth, with dimensions and colors generated using `Math.random()` and `d3.rgb`. The `d3.arc` API creates the mouth path, while React's component structure composes `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` into a scalable SVG scene. A `range` from d3 instantiates multiple faces simultaneously.

SSamir Nandardhane

91% match

Loading thumbnail…

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

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.

MMONNNA-ARCH

90% match

Loading thumbnail…

Fork of Hello HTML

A grid of sixteen randomly generated cartoon faces fills the viewport, each face rendered as a yellow circle with two eyes and an arc-shaped mouth. The example demonstrates component reuse in React, where each face is built from reusable `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` components. The code uses React 17 for rendering, D3 v7's `arc` generator to create mouth paths, and the `range` helper from D3 to generate the array of indices. Randomization controls stroke width, eye position and size, and mouth dimensions, making every face unique.

RRossDee

90% match

Loading thumbnail…

Fork of Fork of Hello HTML

A grid of procedurally generated cartoon faces illustrates how React components and D3 shape generator APIs can work together for generative art. Each face combines a yellow background circle, two eyes, and an arc-based mouth, with dimensions and positions randomized per instance via `Math.random()`. The rendering relies on React’s `createElement` and `ReactDOM.render`, while D3’s `arc` and `range` helpers define the mouth path and iteration count. SVG output is structured through custom components (`BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`), demonstrating a modular, declarative approach to building multiple data-driven visual elements.

Bbellarej

90% match

Loading thumbnail…

Fork of Face part 1

This example shows a grid of five randomly generated smiling faces, each rendered as a yellow circle with black eyes and a curved mouth. The faces are built from reusable React components (`Face`, `BackgroundCircle`, `Eyes`, `Mouth`) that compose SVG elements within a shared `FaceContainer`. Each face uses randomized numeric properties for eye offset, eye radius, and mouth dimensions, generated with `d3.range` and `Math.random` in the main `App` component. The `Mouth` component draws its path using the `d3.arc` API, while the overall rendering relies on React’s virtual DOM to manage the SVG output.

JJacob Pingel Lauridsen

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

90% match

Loading thumbnail…

Fork of Hello HTML

This example renders eight variations of a cartoon face using React components composed in SVG. Each face is generated with randomized eye offsets, eye radii, mouth radii, and mouth widths via `Math.random()` within a `range(8)` loop. The drawing relies on reusable SVG components for the background circle, eyes, and mouth, with the mouth path generated by the D3 `arc()` generator. React mounts the faces into an SVG container defined by `FaceContainer`, which translates the group to the center of the viewport.

Aalice2209

90% match