Make a face with React

100%

Make a face with React

✓ Published1🌍 Public

Last edited May 21, 2020

Created on May 19, 2020

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.

AI-generated description

Smiley face implementation with React.

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

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

94% match

Loading thumbnail…

React components

A grid of small yellow smiley faces, each with subtle random variations in eye size, eye placement, and mouth thickness, is rendered as reusable React components. The example demonstrates how D3’s `arc` generator creates the mouth path inside a `Mouth` component, while separate `BackgroundCircle`, `Eyes`, and `FaceContainer` components assemble the SVG face. The `index.js` file maps over a `range(6*3)` array to instantiate eighteen `Face` components, each using randomized parameters for its features.

Jjrydow

94% match

Loading thumbnail…

Let's Make a Face

A grid of 171 randomly generated faces fills the screen, each built from SVG circles and arcs. The React components—BackgroundCircle, Eyes, and Mouth—draw a yellow smiley with black outline, while the Face container uses the d3 `arc` generator for the mouth shape. Each face randomizes eye offset, mouth radius, and vertical translation, creating a playful, varied wall of cartoon characters. The example demonstrates modular React composition with d3-generated paths inside an SVG renderer.

OOleJRask

93% match

Loading thumbnail…

Smiley Face Part 1

This example displays a grid of 18 randomly generated smiley faces, each rendered as an SVG with a yellow background circle, two eyes, and a curved mouth. Using React components for the face parts and D3’s arc generator for the mouth path, the code applies random values to stroke width, eye offsets and radius, and mouth dimensions, creating varied expressions. The faces are composed via nested components like FaceContainer, BackgroundCircle, Eyes, and Mouth, all assembled and rendered through ReactDOM.

Ttmambrose

93% match

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

93% match

Loading thumbnail…

React D3 Tutorial

A grid of eighteen smiley faces, each with randomized eye and mouth thickness, demonstrates reusable React components paired with D3. The `Face` component composes smaller pieces like `BackgroundCircle`, `Eyes`, and `Mouth`, with the latter using `d3.arc` to draw an arc path. The `FaceContainer` wraps everything in an SVG group translated to the face center. Rendered with React 17 and D3 v7, the example shows how declarative JSX and D3 shape generators can build modular data visualizations.

HHunDeTroie

93% match

Loading thumbnail…

Let's Make a Face Part V

This gallery example shows a grid of eighteen randomly generated smiley faces, each built as a static SVG composition in React. The faces are created using React components that assemble D3-generated SVG shapes: a yellow background circle, two eye circles, and a mouth arc drawn with the D3 `arc()` generator. Each face’s stroke width, eye offset, eye radius, and mouth dimensions are randomized, producing a small variety of facial expressions. The code relies on React’s component model for structure and D3’s geometry helpers for the path data, rendering everything directly to SVG.

MMGamboa

93% match