Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

Last edited Jan 15, 2026

Created on Jan 14, 2026

A grid of six-by-three randomized faces demonstrates how React components and D3’s `arc` generator can compose static SVG. Each face uses `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents, with `FaceContainer` positioning the group via a `translate` transform. Randomized dimensions—mouth radius and width, eye radius and offset, stroke width—are passed as props from `d3.range`. The rendering is purely declarative, with no data binding or interactions.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

A grid of eighteen randomly generated smiling faces demonstrates modular React component composition within an SVG canvas. Each face uses adjustable props for eye offset, radius, mouth arc, and stroke width, with randomized values generated via `d3.range` and `Math.random`. Rendering relies on React components (`FaceContainer`, `BackgroundCircle`, `Eyes`, `Mouth`) and D3’s `arc` generator to create the mouth path. The example forks a basic HTML page, integrating React 17 and D3 v7 via CDN, producing a simple, playful visualization.

Cco

92% match

Loading thumbnail…

Fork of Fork of Hello HTML

A grid of six by three faces, each rendered as an SVG via React, shows randomized facial features. The D3 library’s `range` function generates the array of faces, while `d3.arc` constructs the mouth shape. Each face uses a yellow background circle, black stroke, and variable eye and mouth radii, producing a playful, varied set of expressions within a fixed 160-pixel square canvas.

LLívia Pinheiro

92% match

Loading thumbnail…

Fork of Hello HTML

A grid of eighteen cartoon faces is rendered, each with a yellow circular background, black-outlined eyes, and an arc-shaped mouth, all varying randomly in eye and mouth size. The example demonstrates reusable React components, composing a face from `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer` parts. It uses D3's `arc` generator to draw the mouths and the `range` function to create the grid, with React rendering the SVG elements directly.

LLívia Pinheiro

92% match

Loading thumbnail…

Fork of Hello HTML

A grid of eighteen randomly configured cartoon faces is rendered as SVG through React. Each face, built from reusable components like `BackgroundCircle` and `Eyes`, uses `d3.arc` for the mouth path. The `index.js` maps over `d3.range(18)` to create the faces, with randomized properties for stroke width, eye offset, and mouth dimensions, all rendered within a fixed 160 by 160 viewport.

DDusty

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

92% match

Loading thumbnail…

Fork of Hello HTML

This example shows a grid of 18 cartoon faces, each with yellow circular backgrounds, black-outlined strokes, eyes, and arched mouths. The faces are rendered as SVG elements using React components, with D3’s `arc` function generating the mouth paths. Randomness is applied to eye radius per face, creating slight variation across the grid. The code uses React 16.9 and D3 v6, with components like `FaceContainer` handling the SVG coordinate transforms.

AAengus Hearne

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

92% match

Loading thumbnail…

Fork of Hello HTML tutorial

This example renders a grid of 18 randomly parameterized SVG faces using React and D3.js v7. Each face combines a yellow background circle, two eyes, and a mouth, with positions and sizes derived from random values generated via `Math.random()` and `d3.range()`. The mouth is created with D3’s `arc()` API to produce an annular sector path. The composition is assembled from modular React components, including `FaceContainer` for the SVG wrapper, `BackgroundCircle`, `Eyes`, and `Mouth`, all coordinated through a single `Face` component.

Mmattbwebster

92% match