Untitled

100%

✓ Published0🌍 Public

Last edited Dec 27, 2021

Created on Dec 22, 2021

A grid of smiling faces, each with randomized facial features, fills the viewport. The faces are generated using React components that compose SVG shapes, including a yellow background circle, two eyes, and a curved mouth. The application uses the `d3.arc` function to define the mouth’s path and `d3.range` to create a 6-by-3 array of faces. Each face receives random values for eye offset, eye radius, mouth width, and mouth radius, resulting in a varied but cohesive pattern.

AI-generated description

A program that follows your mouse with a circle.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A grid of 18 procedurally generated cartoon faces is displayed, each rendered as an SVG circle with eyes and an arc-shaped mouth. The faces vary randomly in stroke width, eye offset, eye radius, and mouth dimensions, creating a playful sense of variety. The visualization uses React components to structure the face elements, while D3 v7’s `arc()` generator produces the mouth paths. Each face is drawn with a simple `<svg>` and `<g>` transform, with all random parameters generated on every render via `Math.random()` and the `range()` helper from D3.

Jjchen6912

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

90% match

Loading thumbnail…

Many Faces

A grid of fifteen cartoon faces, each with randomized facial features such as eye size, iris radius, and mouth expression, appears in a three-by-five layout. The faces alternate between smiling and sad mouths, created using the D3 arc generator with different start and end angles. Each face is rendered as an SVG with React components, using a radial gradient for the background circle. The React app maps over a range of indices, generating faces with random numeric properties for eyes, strokes, and iris size.

Sshresthabhi

90% match

Loading thumbnail…

Face II

A grid of fifteen small, abstract faces, each with a yellow circular head, black outline, two eyes, and a smile-shaped mouth, demonstrates randomized facial feature placement within fixed SVG viewports. The React application renders each face using a composite of SVG primitives, with positional and dimensional parameters like eye offset, radius, and mouth curvature generated via `Math.random()`. The mouth shape is constructed using the D3 arc generator from the `d3` library, while the overall layout is produced with D3’s `range` function to map over a 5×3 array, yielding varied expressions across the collection.

DDavid

90% match

Loading thumbnail…

Multiple faces

A grid of 18 smiling yellow faces fills the view, each with randomized eye sizes and a fixed mouth shape. The faces are rendered as SVG circles with black outlines, built from reusable React components for the background, eyes, and mouth. D3's arc generator creates the mouth path, while the React app maps over a d3.range to produce each face. The component props control geometry like eye offset and mouth radius, allowing variation across the grid.

Vvigneswaran009

90% match

Loading thumbnail…

Untitled

This example generates a grid of 32 smiley faces using React and SVG. Each face is composed of a yellow circle, two black eyes, and a mouth drawn with a d3 arc path. The eyes and mouth are positioned and sized with randomized radii, producing subtle variations across the grid. The code builds each face from composable React components (BackgroundCircle, Eyes, Mouth) and renders them within an SVG container using d3's arc API for the mouth shape.

Sseanowh

90% match

Loading thumbnail…

Hello HTML

A grid of 18 smiling faces, each generated with randomized eye and mouth sizes, demonstrates the composition of reusable React components. The faces are rendered as SVG circles and arcs, with yellow heads, black outlines, and black eyes. The code uses React to build component hierarchies, d3’s `arc` function to shape mouths, and the `range` helper from d3 to generate the array of faces.

NNoPlay1984

89% match

Loading thumbnail…

Hello HTML

A grid of 18 smiling faces, each with a yellow circular background, black eyes, and a curved mouth, demonstrates how React components can be reused with randomized props. The visualization uses React 16.9.0 to render SVG elements, with d3.v5’s `arc()` generator creating each mouth path and the `range()` function producing the grid layout. Each face’s eye position, radius, and mouth dimensions vary randomly, while the centered translation via `FaceContainer` positions every face identically within its own SVG canvas.

DDanier

89% match