Skip to main content
SimilarExport ZIP
100%

Fork of Hello HTML

✓ Published1🌍 Public
Uusmcmikestu
Last edited Mar 8, 2021
Created on Mar 2, 2021
Forked from Hello HTML

A grid of smiling faces rendered with React and SVG, generated by composing reusable components for the background, eyes, and mouth. The code uses D3’s `arc` function to draw the mouth’s curved path and `range` to create 18 identical face instances. React manages the component tree, while D3 provides the geometric helpers for the SVG shapes.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

A grid of eighteen smiling faces is generated as SVG elements using React components. Each face is composed of reusable parts, including a yellow background circle, eyes, eyebrows, a nose, and a d3.arc-generated mouth. The code imports React, ReactDOM, and the d3 range function, while the Mouth component uses d3.arc to create the path. Random eye radius values introduce slight variation, though the faces remain static and identical in layout.

SSemyon
96% match
Loading thumbnail…

Fork of Hello HTML

This example shows a grid of fifteen smiling faces composed of SVG shapes, each rendered by a React component. The faces are generated using D3’s `arc` for the mouths and positioned via a `FaceContainer` that translates a shared coordinate system. Random eye radii add slight variation per face. React 17 and D3 v7 are used, with all shapes drawn as SVG elements inside a fixed 166×166 viewport.

Iienablemuch
94% match
Loading thumbnail…

Fork of Hello HTML

A grid of fifteen smiley-face SVG components, all sharing the same base geometry but with randomized eye radii, demonstrates a React-based approach to generative visual variation. Each face is assembled from dedicated sub-components—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—which wrap SVG elements like `<circle>` and a d3 `arc()` path. The rendering uses ReactDOM to mount the component array, and the d3 `range` function generates the 5×3 layout.

Dddrake
94% match
Loading thumbnail…

Fork of HTML Starter

This example displays a grid of smiling faces created with React and rendered as SVG. Each face is composed of reusable components for the background circle, eyes, and mouth, all positioned within an SVG container. The code uses d3’s `arc` function to generate the mouth path and `range` from d3 to create the array of faces. Each face is generated with randomized eye sizes, and the dimensions are defined by the `width` and `height` variables in the React app.

Yyeeholai
94% match
Loading thumbnail…

Fork of Hello HTML

A grid of 18 smiling faces, each rendered with randomized facial features, fills the screen. The code uses React components to compose the face structure and D3's `arc` function to draw the curved mouths. Each face combines a yellow circle background, two eyes, and a mouth, with parameters like eye offset, eye radius, and stroke width varied using `Math.random`. The SVG output is generated through a `FaceContainer` component that centers each face within a 160 by 160 pixel viewport.

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

Fork of Hello HTML

A grid of fifteen SVG smiley faces is rendered using React, each with a yellow circular background, two eyes, and a mouth. The faces are generated by mapping over an array created with `d3.range`, and the eye radius is randomized for each face. The components—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—are composed in React, while the mouth shape is drawn using the `d3.arc` API. The code uses `ReactDOM.render` to mount the application and D3 v7 for the arc generator and range function.

Mmansnym
94% match