Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Bbicksone
Last edited Mar 1, 2021
Created on Feb 27, 2021
Forked from 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.

AI-generated description

halfway towards a smiley face

MIT Licensed

Similar vizzes

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

Fork of 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.

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

Fork of HTML

A grid of 18 smiley face SVGs is rendered using a combination of React and D3. Each face is randomly generated with varying stroke widths, eye radii, and mouth dimensions, resulting in a diverse array of expressions. The faces are constructed from modular components (`BackgroundCircle`, `Eyes`, `Mouth`) that assemble within an SVG container, with the mouth shape drawn using D3’s `arc()` path generator. React’s `range()` and `map()` functions iterate to produce the grid, while ReactDOM renders the final composition into the page.

Mmackoshkamacka
94% match
Loading thumbnail…

Fork of 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.

TTakuya Kitazawa
93% match
Loading thumbnail…

Fork of Smiley Face

A grid of React-rendered smiley faces fills the viewport, each face randomly varied in stroke width, eye placement, eye radius, and mouth curvature. The code composes reusable SVG components (`FaceContainer`, `BackgroundCircle`, `Eyes`, `Mouth`) and uses `d3.arc` to define the mouth path. Each face is independently generated using `Math.random` within `d3.range`, yielding a playful, non-identical set of expressions.

Ttotallynormalpeep
93% match