Fork of Fork of Hello HTML

100%

Fork of Fork of Hello HTML

✓ Published0🌍 Public

Last edited Apr 5, 2021

Created on Apr 5, 2021

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

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

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

94% match

Loading thumbnail…

Fork of Hello HTML

This example renders a grid of 18 procedurally generated cartoon faces using D3 v7 and React. Each face is composed of a yellow background circle, two eyes, and an arc-based mouth, with randomized eye offset, eye radius, mouth width, and mouth radius values. The React components structure the SVG output, while D3’s `arc` generator creates the mouth path. The faces are drawn asynchronously with each render, producing varied expressions across the grid.

Ttnk-dev

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

94% match

Loading thumbnail…

Fork of Hello HTML hello

This visualization displays a grid of procedurally generated cartoon faces. Each face is composed of SVG circles for the background and eyes, and an SVG path for the mouth, rendered using React components. The code leverages D3's `arc` generator to create the mouth shape and `range` to produce the array of faces. All visual parameters—such as eye offset, eye radius, mouth radius, and stroke width—are randomized for each face, resulting in a diverse collection of characters within a uniform layout.

PPirialMersus

93% match

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

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

93% match