Skip to main content
SimilarExport ZIP
100%

SMILY FACES

✓ Published0🌍 Public
MMorgan
Last edited Oct 9, 2024
Created on Oct 7, 2024
Forked from Hello HTML

A grid of 300 randomized smiley faces renders in React with SVG, each face built from a yellow background circle, two eyes, and an arc-based mouth. The code composes reusable components—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—using D3’s `arc` generator to define the mouth path. Every face varies slightly in stroke width, eye offset, eye radius, and mouth dimensions via `Math.random()`, producing a playful, procedurally generated pattern inspired by a tutorial halfway through building a smiley face.

AI-generated description

A bare minimum HTML page.

<iframe width="560" height="315" src="https://www.youtube.com/embed/QT5ef8dUyoo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> Half-Way through a smiley face
MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face

A grid of fifteen smiley faces renders in SVG with React, each face composed of a yellow circle, two eyes, and a mouth. The code builds each face from reusable components: `BackGroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`, with the mouth drawn using d3’s `arc()` generator. Each face’s eye radius and mouth width are randomized using `Math.random()`, creating slight variations across the identical grid layout. The React components are mounted via `ReactDOM.render`, and the overall structure is positioned using SVG group transforms.

GGabriel-Rodrigues13
94% match
Loading thumbnail…

Smily Face Part 1

A grid of randomly generated smiley faces renders as SVG in a React app. Each face is composed of a yellow circle, two dark eye circles, and an arc for the mouth, with positions and sizes varied using the JavaScript `Math.random()` function. The code uses d3’s `arc` generator to create the mouth path, while custom React components like `BackCircle`, `Eyes`, and `FaceContainer` structure the drawing. The layout repeats the same face component 18 times without animating or updating the random parameters.

Gguptambergatech
94% match
Loading thumbnail…

Smiley Face Part 1

A grid of eighteen randomized smiley faces is rendered as SVG in React, each face composed of a yellow circle, two black eyes, and an arc-shaped mouth. The code uses React components like `Face`, `BackgroundCircle`, `Eyes`, and `Mouth`, with `FaceContainer` providing an SVG group. D3’s `arc` generator builds the mouth path, while `range` from D3 creates the array of faces. Random values for stroke width, eye offsets, eye radius, and mouth dimensions generate visual variation across the grid.

AALI Akbar SABZI
94% match
Loading thumbnail…

Smiley Faces

A grid of randomly generated smiley faces, each with a yellow circular head, black outlined stroke, two eyes, and an arc-shaped mouth, demonstrates the reuse of a modular face component. Using React to compose SVG elements, the code leverages D3's `arc` generator to define the mouth path, while `d3.range` creates a 6-by-3 array of faces. Each face varies its stroke width, eye offset and radius, and mouth dimensions through randomized parameters passed as props, showing how declarative components can produce varied visual output.

Aabreeson
94% match
Loading thumbnail…

Smiley Face

A grid of randomized smiley faces appears, each rendered as a yellow circle with black outline, two eyes, and an arc-shaped mouth. The faces are generated using React components that compose SVG elements, with D3’s `arc` function calculating the mouth path. Random values for stroke width, eye offset, eye radius, and mouth dimensions create variation across the 18-face layout. The example demonstrates reusable React components and D3 integration for declarative SVG generation.

YYibo Zhang
94% match
Loading thumbnail…

Smily Face with D3

A grid of procedurally generated smiley faces appears, each composed of a yellow circle with black outline, two offset eyes, and a mouth drawn as an arc. The faces are rendered using React components that compose SVG elements, while the mouth shape is generated with the D3 `arc` function, using inner and outer radii and start and end angles. Randomized parameters for stroke width, eye size and position, and mouth dimensions create variation across the grid, with a total of 18 faces arranged in a 6-by-3 layout. The SVG output is produced for each face using the `Face`, `BackgroundCircle`, `Eye`, and `Mouth` React components, with the `FaceContainer` providing the overall SVG wrapper and coordinate translation.

EErdogan Onur Eroglu
94% match
Loading thumbnail…

Smiley Face

A grid of 18 smiley faces renders in React with SVG, each face generated with randomized eye offsets, eye radii, and mouth dimensions. The face components compose reusable subcomponents—BackgroundCircle, Eyes, Mouth, and FaceContainer—to build the layered SVG structure. D3's arc generator creates the curved mouth path, while the spread of faces shows how varying parameters produce distinct expressions. The rendering uses ReactDOM to mount the app and d3.range to generate the face array.

JJBayne07
94% match
Loading thumbnail…

Smiley Face

A grid of eighteen randomly generated smiley faces, each rendered as an SVG composed of a yellow circle, two eyes, and an arc-based mouth. The code uses React components to structure the face, while D3’s `arc` generator defines the mouth path. Random parameters for stroke width, eye offset, and mouth radius make every face unique.

Ggaolinai8888
94% match