Faces

100%

✓ Published0🌍 Public

Last edited Mar 1, 2021

Created on Feb 28, 2021

A grid of 2,000 randomly generated smiley faces renders as SVG, with each face’s eye offset, eye radius, and mouth shape varying unpredictably. The React components (Face, Eyes, Mouth, FaceContainer) compose the visual, while d3’s `range` generates the face count and d3’s `arc` draws the mouth path. The background circle, eyes, and mouth are positioned relative to a centered coordinate system, with the SVG width and height matching the face size.

AI-generated description

Half way towards a smiley face.

MIT 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

93% match

Loading thumbnail…

Smiley Face

A grid of 18 randomly generated smiley faces is rendered as React components, each with slightly varied eye positions, mouth size, and stroke width. The faces are drawn using SVG circles and an arc path, with the mouth path computed via d3’s `arc` generator. The `FaceContainer` translates the SVG group to the center of each 160x160 viewport, and the code uses React 18 and d3.v7 to map over a range of indices, producing the array of faces.

Eeco2nomy

93% match

Loading thumbnail…

Make a face with React

A grid of 18 randomly varied smiley faces demonstrates reusable SVG components built with React and D3. Each face is composed of a yellow background circle, two black eyes, and a mouth arc rendered using d3.arc, with positions and sizes derived from randomized props like eyeOffsetX, eyeRadius, and mouthWidth. The Face component composes smaller subcomponents—BackGroundCircle, Eyes, and Mouth—inside a FaceContainer that handles SVG width, height, and center translation. D3's range function generates the array of faces, and ReactDOM renders the entire set into a single SVG via index.js.

AAlark Joshi

93% match

Loading thumbnail…

Smiley Faces

A grid of 18 smiley faces renders as React components, each with randomized facial features including eye offset, eye radius, stroke width, and mouth dimensions. The faces use SVG circles for the background and eyes, while the mouth is drawn as a D3 arc path with specified inner and outer radii. All elements are positioned within a transformed SVG group using React and D3 v7, with properties passed as props from the parent App component to the reusable Face, Eyes, Mouth, and BackgroundCircle components.

Tthudoan1706

93% match

Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces renders in React, each with randomized eye and mouth dimensions. The visualization shows how reusable SVG components—BackgroundCircle, Eyes, and Mouth—compose with D3’s `arc()` generator to create the mouth path. A FaceContainer wraps the group with a centered translation, while the code uses the `range()` iterator from D3 to generate repeated faces. All geometry is drawn as SVG circles and paths, with yellow fill, black stroke, and variable stroke widths, highlighting component-driven parametric design in a static, non-interactive layout.

CChristopher Cleland

93% match

Loading thumbnail…

Smiley face

A grid of randomly generated smiley faces fills the view, each with a yellow background circle, black stroke, two eyes, and an arc-shaped mouth. The React components compose a `Face` from reusable parts (`BackgroundCircle`, `Eyes`, `Mouth`) inside an SVG container, with properties like eye offset, radius, and mouth width varied randomly. The `Mouth` path is built using `d3.arc()`, while the grid layout itself comes from `d3.range()` mapping over the component. The rendering is pure SVG within a React application using D3 v7 for geometry.

PPyotr Grigorchenko

93% match

Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces renders in React, each with randomized eye positions, eye radii, mouth widths, and stroke thicknesses. The faces are generated using D3 v7’s `arc()` generator for the mouth and SVG circles for the eyes and background. All components are React function components, with the overall layout using D3’s `range()` to create the array of faces. The SVG output is centered via a translation group.

DDrew Dudley

93% match

Loading thumbnail…

smiley faces

A grid of 36 smiley faces renders via React components, with each face composed of D3-generated SVG shapes for the background circle, eyes, and mouth. The faces vary slightly in eye position and radius due to randomized values applied per face. Using `range` from D3 to generate the grid, the app maps each index to a `Face` component, scaling the composition across the viewport. The mouth uses D3’s `arc` generator with a fixed inner radius and angular span, while SVG `g` transforms center each face within its container.

Yyeeet0421

93% match