Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

Last edited May 14, 2021

Created on Mar 19, 2021

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.

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

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

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

97% match

Loading thumbnail…

Fork of Hello HTML

This example renders a grid of 18 cartoon faces built with React components and D3.js. Each face is composed of a yellow head circle, two eyes, and a curved mouth arc created using `d3.arc`. Random values are applied to stroke width, eye placement, eye radius, and mouth dimensions, giving each face a unique expression. The faces are drawn as SVG elements within a `<g>` transform, with the layout generated using `d3.range` to map over the array.

NNasif Parvez

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

96% match

Loading thumbnail…

Fork of Hello HTML

This example displays a 6x3 grid of cartoon faces, each with a yellow circular background, black stroke, two eyes, and an arched mouth. The faces are rendered as React components using SVG elements, with each face’s eye radius, mouth width, and mouth radius randomized on every render. The code leverages React’s functional components, `d3.range` for array generation, and the `d3.arc` API to draw the mouth path, all composed within a custom `FaceContainer` that wraps the SVG output.

Ssumakokima2

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

96% match

Loading thumbnail…

Fork of Hello HTML

This example renders a grid of eighteen identical cartoon faces, each built from SVG circles and an arc. The faces are generated using React components, with D3’s `arc` generator defining the mouth and `d3.range` creating the array. Each face receives randomized smile angles, while all other facial features remain fixed. The visualization demonstrates component reuse in React combined with D3’s geometric helpers, outputting static SVG shapes without interaction.

Uuplusv

96% match