The Pink Thing I

100%

The Pink Thing I

✓ Published1🌍 Public

Last edited Oct 3, 2020

Created on Sep 12, 2020

A gallery of 18 pink circular faces, each composed of a salmon-stroked background circle, two eyes, and a mouth, renders as a static grid of SVG elements. React generates the faces, while D3’s `arc` API creates the mouth path for each. Randomized parameters for eye offset, eye radius, and mouth dimensions vary the expressions across the faces. The `FaceContainer` component wraps the SVG coordinate system, centering all elements within each 160×160 viewport.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

face VI

A smiling face built from basic SVG shapes, with a pink circular head, two black eyes, and a semi-circular mouth. The code splits the face into reusable React components (BackgroundCircle, Eyes, Mouth, and FaceContainer) and composes them with fixed, hard-coded size values passed as props. The mouth uses d3.arc to generate the path’s coordinate data. The final SVG renders at 960 by 500 pixels, centered with a 10-pixel stroke outline.

DDiego Isla López

84% match

Loading thumbnail…

d3 Face

The gallery shows a grid of six by three cartoon faces, each rendered as a yellow circle with black outlines, two eyes, and a smiling mouth. Built with React components that compose SVG shapes, the faces use d3.arc to generate the mouth path and d3.range to create the repeated face instances. Randomization varies eye and mouth sizes and proportions per face, producing a playful mosaic of subtly different expressions while each face maintains consistent positioning within its own viewport.

PPedrinT

84% match

Loading thumbnail…

small face step1

A gallery of small faces, each rendered as a yellow circle with black eyes and a curved mouth, appears in a repeating grid. Built with React components and SVG, the example uses d3’s `arc` API to generate the mouth path and `range` from d3 to create eighteen face instances. Random values for eye and mouth size give each face a distinct expression.

EErin Yang

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

83% match

Loading thumbnail…

d3

Nine small yellow faces fill the gallery, each a simple SVG composition of a black-stroked circle, two eyes, and an arc-shaped mouth. The React app maps over a range of nine, rendering each `Face` component with randomized dimensions from `utils.js` for stroke width, eye offset, eye radius, and mouth parameters. The `Mouth` uses d3’s `arc` to generate a path, while the `FaceContainer` wraps everything in an SVG group, and varying titles add a playful header to each face.

Mmartfhill

83% match

Loading thumbnail…

Part 1

A grid of 18 smiling faces, each rendered as a yellow circle with black outline, two eyes, and an arc-shaped mouth, demonstrates randomized facial feature variation. Built with React components and D3’s `arc()` generator for the mouth path, each face uses `Math.random()` to assign unique eye and mouth radii. The SVG is constructed via `FaceContainer`, which translates a centered group, while `BackgroundCircle` and `Eyes` define the base shapes. The faces repeat without spacing, creating a tiled pattern.

AAryan Sethi

83% match

Loading thumbnail…

Make a Face part VI

This example displays a grid of 18 randomly generated cartoon faces, each composed of a yellow circular background with black stroke, two eyes, and a mouth. The faces are rendered as SVG elements defined by React components (`Face`, `Eyes`, `Mouth`, `BackgroundCircle`), where the `Mouth` uses `d3.arc` to generate a half-ring path. Each face’s dimensions—stroke width, eye offset, eye radius, mouth radius, and mouth width—are randomized between faces via `Math.random` within `index.js`, creating a playful ensemble of unique smiles. The rendering is handled by React’s `ReactDom.render`, producing a static composition of layered SVG primitives.

Llaurence beattie

83% match

Loading thumbnail…

My Face

A grid of eighteen faces, each composed of SVG shapes, is rendered using React and D3. The face components, including a yellow background circle, black eyes, and a mouth arc, are drawn with randomized parameters for stroke width, eye radius, and mouth size. The mouth uses D3’s `arc` function to generate a path, while the layout is positioned via SVG transformations within a `FaceContainer` that sets the canvas dimensions.

SSnaglaGrobspit

83% match