Skip to main content
SimilarExport ZIP
100%

Fork of Hello HTML

✓ Published1🌍 Public
CChaz
Last edited Jan 17, 2022
Created on Jan 15, 2022
Forked from Hello HTML

A grid of eighteen simple cartoon faces fills the viewport, each rendered as an SVG with a yellow circular head, two eyes, and an arc-shaped mouth. Clicking any face randomly changes its head color. Built with React and D3.js (v7), the example derives each face’s features—eye offset, radius, mouth width, and stroke thickness—from random values generated at render time. The D3 `arc` API constructs the mouth path, while SVG circles compose the head and eyes within a transformed group.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

This example displays a grid of 18 randomly generated cartoon faces, each composed of a yellow circular background, two eyes, and a mouth. The faces are rendered as SVG elements using React and D3 v7, with the mouth shape created through D3’s `arc` generator. The layout is produced by mapping over a D3 `range` array, while each facial feature’s dimensions are individually randomized on every render.

Nnncis
95% 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
95% match
Loading thumbnail…

Fork of Hello HTML

A grid of 18 cartoon faces rendered as yellow SVG circles with black outlines, each featuring two eyes and a curved mouth. The faces are generated using React components that compose a face from reusable parts: a background circle, eyes, and an arc-based mouth. The code leverages D3’s `arc` API to draw the mouth shape and `range` to create the grid, with random parameters for eye offset, eye radius, and mouth size, producing varied expressions across the grid.

TTousifAhamed
95% 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
94% match
Loading thumbnail…

Fork of Hello HTML

This example shows a grid of 18 randomly generated cartoon faces rendered as SVG. Each face combines a yellow background circle, two eyes, and a mouth, with their sizes and positions randomized within a defined range. The visualization uses React components to assemble the facial features, with the D3 `arc` API generating the mouth shape as a path. D3's `range` function creates the array of faces, and the entire composition is displayed in a bare minimum HTML page.

Iinar-vision
94% match
Loading thumbnail…

Fork of Hello HTML

A grid of eighteen cartoon faces fills the screen, each rendered as an SVG circle with a yellow radial gradient background, black stroke, two eyes, and an arched mouth. The faces vary randomly in eye position, eye radius, and mouth width, creating a playful, diverse pattern. Built with React components and D3’s `range` and `arc` functions, the example maps over an array to generate each face, passing random values as props for layout and shape.

DDaniel
94% 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
94% match
Loading thumbnail…

Fork of Hello HTML

A grid of 18 cartoon faces, each with a yellow circular head, black outline, two eyes, and a curved mouth, is rendered with randomized facial features. The visualization uses React components to compose each face from separate circle and path elements, while D3’s `arc` generator creates the mouth shape and `range` produces the grid data. Parameters like eye radius, offset, and mouth width vary per face via `Math.random()`.

MMarco Malvicini
94% match