Skip to main content
SimilarExport ZIP
100%

I Am New

✓ Published0🌍 Public
SStudentCZ
Last edited Apr 1, 2022
Created on Mar 31, 2022
Forked from Hello HTML

Eighteen faces appear in a grid, each with a yellow circular head, black outline, two eyes, and a d3.arc-generated mouth. The faces’ parameters—stroke width, eye offset and radius, and mouth dimensions—are randomized per instance, creating subtle variations across the group. Built with React components, the visualization uses D3 v5’s `arc` API to construct the mouth paths and `range` to generate the array of faces. Each face is rendered as an SVG group translated to its center position.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Part 1

A grid of 18 smiling faces, each rendered as a yellow circle with black outline, two eyes, and an arc-shaped mouth, demonstrates randomized facial feature variation. Built with React components and D3’s `arc()` generator for the mouth path, each face uses `Math.random()` to assign unique eye and mouth radii. The SVG is constructed via `FaceContainer`, which translates a centered group, while `BackgroundCircle` and `Eyes` define the base shapes. The faces repeat without spacing, creating a tiled pattern.

AAryan Sethi
86% match
Loading thumbnail…

Hello html

A grid of eighteen cartoon faces appears, each rendered as a yellow circle with black stroke, two eyes, and a curved mouth. Built with React and D3 v5, the faces use the `arc` generator from D3 to create the mouth path. Each face’s eye offset, eye radius, mouth radius, and mouth width are randomized, producing slight variations across the grid. The SVG output is composed of reusable components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`, with all elements centered via a transformed group.

Jjesramyep1263
86% match
Loading thumbnail…

Hello HTML

A grid of 18 smiling faces, each generated with randomized eye and mouth sizes, demonstrates the composition of reusable React components. The faces are rendered as SVG circles and arcs, with yellow heads, black outlines, and black eyes. The code uses React to build component hierarchies, d3’s `arc` function to shape mouths, and the `range` helper from d3 to generate the array of faces.

NNoPlay1984
86% match
Loading thumbnail…

Part-1---Make_A_Face

A grid of 18 randomly generated cartoon faces, each rendered as a yellow circle with black stroke, two eyes, and an arc-based mouth. The faces vary in stroke width, eye size and position, and mouth dimensions, creating unique expressions. Built with React and D3 v5, the visualization uses D3’s `arc` generator to shape mouths and renders all elements as SVG within a translated group. Each face is positioned identically, layered by the array map.

PPramod Jacob Sam
85% match
Loading thumbnail…

Hello HTML

A grid of 18 smiling faces, each with a yellow circular background, black eyes, and a curved mouth, demonstrates how React components can be reused with randomized props. The visualization uses React 16.9.0 to render SVG elements, with d3.v5’s `arc()` generator creating each mouth path and the `range()` function producing the grid layout. Each face’s eye position, radius, and mouth dimensions vary randomly, while the centered translation via `FaceContainer` positions every face identically within its own SVG canvas.

DDanier
85% match
Loading thumbnail…

Untitled

A grid of smiling faces, each with randomized facial features, fills the viewport. The faces are generated using React components that compose SVG shapes, including a yellow background circle, two eyes, and a curved mouth. The application uses the `d3.arc` function to define the mouth’s path and `d3.range` to create a 6-by-3 array of faces. Each face receives random values for eye offset, eye radius, mouth width, and mouth radius, resulting in a varied but cohesive pattern.

Bbsolomon103
85% match
Loading thumbnail…

Hello HTML

This example displays a grid of eighteen smiling faces, each generated with randomized eye and mouth dimensions. Built with React and rendered as SVG, the faces are composed of reusable components: a yellow background circle, two eyes, and a mouth. The mouth path is created using the D3 arc generator. The visual variety emerges from randomly scaling the eye radius and mouth width for each face within a fixed canvas.

CChiedu Egbumokei Jr
85% match
Loading thumbnail…

Hello HTML

The gallery displays a grid of 18 identical, cartoonish yellow faces with black outlines, each generated with randomized facial feature parameters. Built with React and rendered as SVG, the example uses D3’s `arc` generator to construct the mouth shape, while all other components—the background circle, eyes, and face container—are hand-coded React components. Each face’s stroke width, eye offset, eye radius, and mouth dimensions vary randomly, demonstrating how component-based composition with D3 utilities can produce varied visual output.

Cchipbrownlee
85% match