Let's Make a Face

100%

Let's Make a Face

✓ Published2🌍 Public

Last edited Aug 24, 2021

Created on Aug 19, 2021

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.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

let's make a face

A grid of eighteen cartoon faces fills the screen, each rendered as a yellow SVG circle with black outlines, two eyes, and a curved mouth. The faces vary randomly in eye radius and mouth thickness, creating playful individual expressions. The example uses React components to compose each face from reusable parts, with the mouth path generated via `d3.arc` and the grid created by mapping over `d3.range`.

Bbdfee

95% match

Loading thumbnail…

Lets Make a Face

A grid of randomly generated cartoon faces demonstrates how React components and D3 shape generators can be composed into reusable visualizations. Each face uses a yellow background circle, offset black eyes, and a D3 arc-based mouth with randomized dimensions for eye radius, mouth width, and mouth radius. The React `Face` component assembles smaller `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents, while a `FaceContainer` renders an SVG group translated to the center coordinates. D3’s `range` and `arc` utilities generate the grid and mouth paths, respectively.

BbeauMarko

94% match

Loading thumbnail…

Let's Make a Face

This example displays a grid of eighteen cartoon faces, each with randomized facial features. The faces are built using React components that render SVG elements, with the mouth shape generated by a D3 arc. The `FaceContainer` establishes a group with a translated coordinate system, allowing facial components like the background circle, eyes, and mouth to be positioned relative to a center point. The data is procedurally generated using D3's `range` function and `Math.random()` calls.

Nnilimi

94% match

Loading thumbnail…

Face Making

A grid of randomly generated cartoon faces fills the screen, each with a yellow circular head, black outline, two eyes, and an arc-based mouth. The example demonstrates React components composing SVG shapes, where each face is built from `<circle>` elements and a D3 `arc` path for the mouth. Eye size varies per face via `Math.random()`, while D3's `range` generates the 24 faces in the layout, using d3.v6 and React 16.13.1.

DDaniel Russell-Brain

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

Let's Make a Face

A grid of identical yellow smiley faces repeats across the screen, each composed of SVG circles and an arc path. Built with React components, the `Face` assembly uses `d3.arc()` from D3 v5 to generate the mouth, while React's fragment syntax renders the eyes. The `range()` function from D3 produces 18 instances, and the `FaceContainer` handles SVG translation for positioning. The faces share fixed dimensions and offsets, creating a uniform pattern with no variation between copies.

Jjunxiangyao

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

93% match

Loading thumbnail…

Let's Make a Face Part I

Ten randomly generated cartoon faces fill the screen, each a yellow circle with two eyes and a curved mouth. The example shows how to compose reusable SVG components in React and D3 to build a static visual. React renders each face from modular parts like `BackgroundCircle`, `Eyes`, and `Mouth`, while D3’s `arc` generates the mouth path. Random values for eye and mouth size give each face a unique expression.

Hhhophan

93% match