Skip to main content
SimilarExport ZIP
100%

Fork of Hello HTML

✓ Published0🌍 Public
TTakuya Kitazawa
Last edited Jan 11, 2021
Created on Jan 11, 2021
Forked from Hello HTML

A grid of 18 randomly generated smiley faces is rendered on an SVG canvas. Each face is composed of React components: a yellow background circle, two eyes, and a mouth drawn with a D3 arc path. The `index.js` file uses ReactDOM to render the faces, while `d3.range` generates the grid and `Math.random()` varies facial features like eye offset, radius, and mouth width, producing a playful, non-repeating pattern.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

A grid of eighteen randomly generated smiley faces, rendered as SVG, demonstrates a React and D3.js component-based approach. Each face is a `Face` React component that composes `BackgroundCircle`, `Eyes`, and `Mouth` components. The `Mouth` component uses the D3 `arc` API to create a path, while the `Eyes` and face positioning rely on randomized parameters, producing visual variety. The `d3.range` function generates the array for the grid, and the React `render` call outputs the faces to the root element.

Ffaik.binaj@gis-dev.com
96% match
Loading thumbnail…

Fork of Hello HTML

This example displays a grid of eighteen identical smiley faces, each with a yellow circular background, black outline, eyes, and a mouth. The faces are rendered as SVG elements using React components, with D3’s `arc` generator defining the mouth path. Each face randomly varies its eye radius via `Math.random()` within the React render loop, while the layout is static and repeated through D3’s `range` function.

Jjames.haarbauer@dunya-analytics.com
96% match
Loading thumbnail…

Fork of Hello HTML

A grid of eighteen procedurally generated smiley faces fills the screen, each rendered as an SVG with randomized attributes for stroke width, eye placement, pupil size, and mouth curvature. Built with React components and D3's `arc` generator for the mouth path, the faces are composed from reusable parts like `BackgroundCircle`, `Eyes`, and `Mouth`, all positioned within a `FaceContainer` that applies a central translation transform.

Rruirocha0
95% match
Loading thumbnail…

Fork of Hello HTML

A grid of 18 randomly generated yellow smiley faces rendered as SVG in a React application. The code imports the `range` function from D3 to create the grid and uses individual React components for facial features. The `Face` component composes a `BackgroundCircle`, `Eyes`, and a `Mouth` drawn with D3’s `arc` function, while random parameters vary stroke widths, eye offsets, and radii.

Aaudrbar
95% match
Loading thumbnail…

Fork of Hello HTML

A grid of fifteen smiley faces is rendered with React and D3, each face generated with randomized eye offsets, eye radii, mouth radii, and mouth widths. The faces are drawn as SVG circles and arcs, using `FaceContainer` to translate the group to the center, `BackgroundCircle` for the yellow head, and `Mouth` with `d3.arc` to create the curved smile. The code imports React, ReactDOM, and D3's `range` and `arc` functions, rendering all faces into a single SVG container within a minimal HTML page.

Ooleovoid
95% match
Loading thumbnail…

Fork of Hello HTML

A grid of eighteen randomly parameterized smiley faces renders as SVG elements, each composed of a yellow background circle, two black eyes, and a mouth arc. The D3 `arc` generator produces mouth paths from a start angle of π/2 to 3π/2, while `range` from D3 creates the array used to map over in React. All face components—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—are React components receiving randomized numeric props, outputting a static, stylized collection.

LLuis Platzer
94% match
Loading thumbnail…

Fork of HTML Starter

A grid of fifty randomly generated smiley faces fills the screen, each rendered as a separate SVG using React components. The faces vary in eye radius, mouth width, and mouth radius due to Math.random() values passed as props. The code uses React 17 and D3 v7, specifically the d3.arc() API to construct the mouth path, while reusable components like FaceContainer, BackgroundCircle, Eyes, and Mouth structure the visualization. All faces share the same dimensions and center coordinates, creating a repetitive, playful pattern.

Mmukta1994
94% match
Loading thumbnail…

Fork of Fork of Hello HTML

A grid of eighteen smiley faces appears, each with a yellow circular head, black outlined eyes, and an arched mouth. The faces are rendered as Scalable Vector Graphics (SVG) using React components, with randomized eye offsets, eye radii, mouth widths, and mouth radii generating subtle variation across the grid. The visualization uses D3's `arc` API to construct the mouth paths, while React manages the component hierarchy and state, and `d3.range` generates the array of face instances.

MManuel Gil
94% match