Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

Last edited Apr 16, 2023

Created on Apr 13, 2023

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

A grid of eighteen randomly generated cartoon faces renders in React, each composed of a yellow SVG circle, two eyes, and an arc-based mouth. The faces vary in stroke width, eye offset, eye radius, mouth width, and mouth radius, all assigned through `Math.random()`. The code uses React 18 for component composition, D3 v7 for the `arc()` shape generator, and renders to SVG via a shared `FaceContainer`.

NNana Kwame

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

93% match

Loading thumbnail…

Fork of Hello HTML

This example shows a grid of cartoon faces, each with a yellow circular background, two eyes, and an arc-shaped mouth. The faces are generated by mapping over an array created with `d3.range` and rendering React components for each face. The code uses `d3.arc` to compute the mouth path, and each face randomizes its eye radius and mouth dimensions using `Math.random`. The `Face` component composes smaller components like `BackgroundCircle`, `Eyes`, and `Mouth`, all placed inside an SVG via `FaceContainer`.

RRahel Gunaratne

93% match

Loading thumbnail…

Fork of Hello HTML

This example renders a grid of 18 procedurally generated cartoon faces using React and D3. Each face is composed of SVG circles and an arc-based mouth, with randomized stroke widths, eye offsets, eye radii, and mouth dimensions. The code uses `d3.range` to create the array of faces and `d3.arc` to construct the mouth path. React components (`Face`, `Eyes`, `Mouth`, `BackgroundCircle`, `FaceContainer`) structure the SVG output, and the app is mounted via `ReactDOM.render`. The result is a playful, varied collection of simple smiley faces.

MManishankar Vakta

93% match

Loading thumbnail…

Fork of Fork of Fork of Hello HTML

A grid of randomly generated cartoon faces appears, each rendered as an SVG with a yellow circular background, eyes, brows, and a mouth. The faces vary in feature size and position, driven by random values passed as props from React components. The example uses React to compose reusable components like `Face`, `Eyes`, and `Mouth`, while leveraging D3’s `arc` generator to create the curved mouth and brow paths. All output is drawn with SVG elements on a blank page.

MMegRocky

93% match

Loading thumbnail…

Fork of Hello HTML

A grid of fifteen smiling cartoon faces renders across the screen, each randomly varying in eye size, mouth width, and mouth radius. The example demonstrates component reuse in React, where the `Face`, `Eyes`, `Mouth`, and `BackgroundCircle` components compose together inside an SVG, using a `FaceContainer` to center the transformations. Data is generated with `d3.range` and randomized values, while the mouth shape is drawn using the `d3.arc` path generator.

EEthan Pierce

93% match

Loading thumbnail…

Fork of Hello HTML

This gallery example displays a grid of 72 randomly generated cartoon faces, each with a yellow circular head, white eyes with black pupils, and a curved mouth. The faces are rendered as React components using SVG primitives, with each face’s features varying in position, size, and offset based on random values. The code leverages the `d3.arc` API to construct the mouth path, while React maps over an array from `d3.range` to instantiate each face. The visualization demonstrates how randomized parameters can create diverse, expressive compositions within a fixed layout.

JJackson Gordon

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

93% match