Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
AAshish Gupta
Last edited Sep 24, 2022
Created on Sep 23, 2022
Forked from HTML Starter

This example renders a grid of randomly generated smiley faces using React and SVG. Each face is composed of a yellow circle with black stroke, two eyes, and an arc-shaped mouth drawn with d3’s `arc()` generator. The code defines reusable React components such as `Face`, `Eye`, and `Mouth`, and uses `d3.range` to create 18 faces with randomized eye and mouth dimensions. The data originates from a hardcoded URL fetch that logs color values, though the visualization itself does not display this data.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

A grid of 18 randomly generated smiley faces appears, each with slightly varied eye positions, eye radii, mouth width, and mouth radius, rendered as SVG. The code uses React components like `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` to assemble each face, with d3's `arc` generator defining the mouth shape and `range` creating the face array.

Bbicksone
95% match
Loading thumbnail…

Fork of HTML Starter

This example shows a grid of randomly generated smiley faces, each with varying stroke widths, eye positions, eye radii, and mouth dimensions. The visualization uses React components to compose the face structure, while D3’s arc generator constructs the mouth path. The faces are rendered as SVG elements, with each face’s parameters randomized via D3’s range function and JavaScript’s Math.random.

Aapetroni13@gmail.com
95% match
Loading thumbnail…

Fork of HTML Starter

This example displays a grid of yellow smiley faces, each with ears, eyes, and a mouth, rendered as SVG using React components. The face features are modularized into separate React components like `BackgroundCircle`, `Ears`, `Eyes`, and `Mouth`. The mouth is generated with the D3 `arc` API, while the positions and sizes of features vary with `Math.random()` and a scaling coefficient. The D3 `range` function creates an array of nine faces, each individually styled and positioned within the viewport.

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

This example shows a grid of 18 randomly generated smiley faces, each rendered as a yellow circle with black outlines, eyes, and an arc-shaped mouth. Built with React and D3 v7, the `Face` component composes smaller components for the background, eyes, and mouth, using D3’s `arc()` generator to create the mouth path. Each face varies its dimensions—stroke width, eye offset and radius, and mouth size—via `Math.random()`, producing an organic, quirky array of expressions.

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

Fork of HTML Starter

A grid of thirty smiley faces renders in SVG via React, each with randomized eye offset and radius, mouth radius, and fixed stroke width, showcasing composable D3 arc paths for the mouth within a reusable Face component. The example uses React 16, D3 6, and ReactDOM, with faces drawn from D3's `range` and `arc` APIs, demonstrating layered SVG circle and path primitives in a functional component hierarchy.

AAnastasia Zimina
94% match