Let's Make All The Faces

100%

Let's Make All The Faces

✓ Published0🌍 Public

Last edited Jan 13, 2022

Created on Jan 12, 2022

The visualization displays a grid of 21 identical gradient-faced smiley characters, each rendered as a separate React SVG component. Built with React 16.9 and D3 v7, it uses D3’s `arc` generator to draw the mouth, while eyes, nose, and background circle are plain SVG shapes. A linear gradient defined in SVG `<defs>` fills each face, and all faces share fixed proportions from a single `faceProps` object, with the `range` function from D3 generating the repeated array.

AI-generated description

Smiley face implementation with React. (cursed)

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face

This React and D3 v5 example renders a grid of eighteen smiling faces using SVG. Each face features a gradient-filled background circle, star-shaped eyes created with `d3.symbol`, and an open mouth built from a `d3.arc` path. A white rect acts as teeth, and a tongue is drawn beneath. The faces are generated by mapping over an array from `d3.range`, each using shared components for the face container, background, eyes, mouth, and tongue, all composed within a React component tree.

AAbdulhaq Adetunji Salako

91% match

Loading thumbnail…

Let's Make a Face

This example displays a grid of 80 yellow smiley faces, each rendered as an SVG using React components. The faces are constructed from separate reusable parts—a background circle, two eyes, and a mouth created with D3’s `arc` generator for the curved smile. Each face uses randomized eye radius values to introduce slight variation, while all other dimensions like eye offset and mouth width remain fixed. The code combines React’s component composition with D3 v7’s shape utilities, embedding the SVG elements through a `FaceContainer` that centers the drawing within the viewport.

AAndrea Picciau

91% 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

90% match

Loading thumbnail…

Smiley_Faces

A grid of 20 randomly generated cartoon faces appears, each with a gradient-filled circular background, stylized eyes, a radial-gradient nose, and an arched mouth created using a D3 arc path. The faces vary in stroke width, eye offset, radius, mouth size, and nose dimensions due to randomized props. Built with React and D3 v6, the SVG components animate the background gradient color over a 12-second loop. The example demonstrates reusable React component composition with D3 shape generators for custom data-driven illustrations.

Mmartin

90% 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

90% match

Loading thumbnail…

Let's Make a Face Part V

A grid of eighteen smiley faces, each with a yellow circular background, black outline, two eyes, and a curved mouth, is rendered as a single React application. Each face uses randomized eye radii, making them subtly distinct. The visualization is built with React components and D3’s `arc` API for the mouth shape, all rendered as SVG within a fixed 150 by 150 pixel viewport per face.

PPakapone Supavarn

90% match

Loading thumbnail…

Let's make a face part 1

A grid of eighteen smiley-style faces, each generated with randomized facial feature parameters, displays a playful range of eye sizes, mouth widths, and stroke thicknesses. The example uses React components to compose each face from modular SVG elements, including a `BackgroundCircle`, `Eyes`, and a `Mouth` drawn with a D3 arc generator. React renders the full array of faces via `range(6 * 3)`, with all coordinates and dimensions computed relative to a central transformation, showcasing a reusable, data-driven approach to SVG chart assembly.

Ppaulrosedigital

90% 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

90% match