Skip to main content
SimilarExport ZIP
100%

Smiley faces

✓ Published0🌍 Public
FFoair
Last edited Apr 30, 2022
Created on Apr 30, 2022
Forked from Hello Package.json

A dozen orange smiley faces appear in a grid, each rendered as an SVG circle with a dashed stroke, two black eyes, and a curved mouth. The React app uses a `ConfigContext` to pass shared visual parameters, while the mouth shape is drawn with a D3 arc path. Random `stroke-dasharray` values give each face its own distinct outline.

AI-generated description

Faces

ISC Licensed

Similar vizzes

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

Smiley Face

A grid of eighteen smiley faces is rendered, each with randomly varied stroke width, eye offset, eye radius, and mouth dimensions, creating a playful array of subtly different expressions. The visualization is built with React and D3 v5, using SVG shapes for the background circle, eyes, and mouth. The mouth is drawn as an arc path generated by d3.arc, and each face is composed via reusable React components within an SVG container.

Nnkohdatavis
92% match
Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces is rendered as React components, each with randomized eye radius, mouth width, and mouth radius. The faces use a radial gradient from yellow to orange and are drawn as SVG circles and arcs. The code leverages d3’s `arc` generator to shape the mouth, while React handles the component composition and rendering. Each face is positioned via a shared container that translates the SVG group, with stroke widths and offsets fixed across all instances.

Llaurajchang
92% 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
91% match
Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces is rendered using React and D3 v7, with each face varying randomly in stroke width, eye offset, eye radius, mouth width, and mouth radius. Drawn as SVG within a `FaceContainer`, each face combines a yellow `BackgroundCircle` with a black stroke, two `Eyes` circles, and a `Mouth` path generated by D3's `arc` API, which creates an annular sector based on specified inner and outer radii and angles.

SShubham Pathak
91% match
Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces, each rendered as a yellow circle with black stroke, two eyes, and a curved mouth, shows randomized variation in facial feature size and position. Built with React and D3, the code uses the `arc` generator from D3 to create the mouth path, while SVG circles form the face and eyes. The `range` function from D3 generates the array for the grid, and each face is positioned via a transformed group within an SVG container.

Iikerson
91% match
Loading thumbnail…

Smileyface part 1

A grid of eighteen independently styled smiley faces, each rendered as an SVG with a yellow circular face, black stroke, two eyes, a red nose, and a curved mouth. The faces are generated in React, with random values for eye radius and nose radius set via `Math.random()`. The mouth shape is created using D3's `arc` generator, while reusable React components like `BackgroundCircle`, `Eyes`, and `Nose` compose the face structure inside a shared `FaceContainer`.

Aafcchilders
91% match
Loading thumbnail…

Smiley Face

A grid of 18 smiley faces renders in SVG via React, each with randomized eye positions, eye radii, and mouth dimensions. The faces are composed from modular components: a yellow background circle with a black stroke, two eyes, and a mouth drawn using the D3 `arc()` path generator. React's `range()` utility from D3 generates the face array, while each face receives identical width and height props but varying randomized parameters for its features. The visualization demonstrates composable, data-driven SVG generation through reusable React components and D3 shape helpers.

Tthe-birchman
91% match