Danil's many faces

100%

Danil's many faces

✓ Published1🌍 Public

Last edited Mar 22, 2020

Created on Jan 25, 2020

A grid of procedurally generated cartoon faces, each with randomized features, replaces the classic smiley with a field of distinct, animated personalities. The faces' eyes, eyebrows, mouths, and teeth vary in size and position, while eyebrow movements and a rotating color gradient add individual character. Built with React and D3's `arc` for mouth shapes, the implementation renders each face as SVG, leveraging D3's `range` to map out the 64-face layout.

AI-generated description

Halfway through smiley face (datavis 2020)

MIT Licensed

Similar vizzes

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

86% match

Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces appears, each with randomized facial features and proportions. The faces are assembled from SVG primitives within a React component, using a yellow rounded rectangle for the head, black squares and circles for the eyes, and a D3 arc path for the mouth. The d3 `range` function generates the array of faces, and each face receives random values for parameters like eye offset, radius, and stroke width, producing a varied collection.

MMamveguh

84% match

Loading thumbnail…

Multiple Faces

Multiple Faces renders a grid of eighteen cartoon smiley faces, each with the same yellow circular background, black outline, and open mouth. Each face randomly varies its eye radius using `Math.random()`, creating subtle differences across the repeated components. Built with React and D3 v6, the visualization uses D3's `arc` generator to construct the mouth path and the `range` function to generate the face instances, all rendered as SVG through reusable component composition.

BbeauMarko

83% match

Loading thumbnail…

Smilly face part I

This example displays a grid of procedurally generated smiley faces, each with randomized dimensions for its outline, eyes, and mouth. Built with React and D3 v7, it renders SVG elements. The D3 `arc` API generates the mouth path, while modular components like `Face`, `Eyes`, and `Outframe` compose the visual, with each face using randomized parameters for varied appearances.

LLei Lei

83% match

Loading thumbnail…

Colorful Faces

A grid of twenty colorful faces fills the page, each face randomly assigned a background color from a set of five. Each face is built from modular React components: a background circle, two eyes, and a mouth arc. The code uses React and D3.js, with the mouth shape generated by D3's `arc` function to create an arc path. Eye position, size, and mouth dimensions are randomized, producing a playful variety of expressions across the grid.

HHalcyonWjr

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…

SMiLe Face Part 1

A grid of cartoon faces, each rendered with randomized facial features, fills the viewport. The faces use SVG circles for the head and eyes, and a D3 arc generator for the mouth, all composited through React components. Using React and D3 v7, the example generates 18 faces with random stroke widths, eye positions, and mouth radii, demonstrating reusable component composition.

TTarul170720

83% match

Loading thumbnail…

Smiley face: Part I

A grid of fifteen small smiley faces, each generated with randomized facial features, fills the view. The faces are drawn with SVG circles and an arc-based mouth. The code uses React components to assemble each face, while the `d3.arc` API constructs the mouth path. The `range` function from d3 generates the array for the face count, and random values vary eye offsets, radii, and mouth dimensions for each face.

LLento Manickathan

83% match