secondFork

100%

✓ Published0🌍 Public

Last edited Feb 28, 2023

Created on Feb 28, 2023

Eight stylized faces overlap in a rotating grid, each built from yellow background circles, white eyes with black pupils, and D3 arc-based mouths. The pupils jitter independently using `Date.now()` trigonometry, while eye radius and offset vary via `Math.random()`. React components compose the SVG structure, with `d3.arc()` shaping the mouth paths and the `FaceContainer` applying translations and rotations.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Hello HTML

Eight identical stylized faces are arranged in a grid, each rendered as a yellow circle with black-outlined eyes and a smile formed by a d3.arc path. The React application maps over a d3.range to generate multiple Face components, each composed of SVG primitives within a FaceContainer. The example demonstrates modular component reuse, nested SVG grouping, and the use of D3’s arc generator for the mouth, all within a React-for-SVG workflow.

Ffaizalmunna

86% match

Loading thumbnail…

Fork of Fork of 2st try

A grid of small, round faces generated with React and SVG components. Each face has a yellow background circle, two eyes, and an arc-shaped mouth, with randomized eye, mouth, and accessory sizes for slight variation. The code uses the D3 `arc` API to construct the mouth path and `range` to generate 18 faces. All elements are rendered inside an SVG group translated to the center of each face, and the React components `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` compose the visual hierarchy.

Mmanideep905

86% match

Loading thumbnail…

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

The example renders a grid of procedurally generated abstract faces, each composed of a pink circle with black stroke, two offset eyes, and a mouth drawn as a d3 arc path. React components (`BackgroundCircle`, `Eye`, `Mouth`, `Face`) compose the SVG elements, while `d3.range` generates 18 face instances with randomized properties like stroke width, eye position, and mouth radius. The code uses d3.v6’s `arc` API for the mouth shape and React’s `ReactDOM.render` for mounting.

Yyushen

86% match

Loading thumbnail…

Fork of Make a Face Part II

Fifteen yellow cartoon faces render in a grid, each assembled from React components that layer a background circle, two eyes, and a d3 arc-based mouth. The faces vary randomly in eye radius and mouth radius, while the eye offset, mouth position, stroke width, and background color remain constant. The code uses d3.range to generate the faces, d3.arc for the mouth path, and React’s StrictMode with SVG rendering.

PPatrick Hebner

85% match

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

85% match

Loading thumbnail…

Fork of Fork of Hello HTML

Eight identical cartoon faces, each built from a yellow circle, black eyes, and an arc-shaped mouth, repeat in a grid. The example demonstrates modular React components and D3 shape generation, with each face composed from `FaceContainer`, `Backcircle`, `Eyes`, and `Mouth` components. Rendering uses SVG within a React app, while the mouth is drawn using D3's `d3.arc` with specified inner and outer radii and fixed start and end angles. The repeated faces are created by mapping over a D3 `range` array, producing a simple pattern from reusable parts.

Ffaizalmunna

85% match

Loading thumbnail…

Forked Face

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.

HHoosierExperienceDesigner

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

85% match