Skip to main content
SimilarExport ZIP
100%

small face step1

✓ Published0🌍 Public
EErin Yang
Last edited Jun 23, 2021
Created on Jun 23, 2021
Forked from Hello HTML

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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
89% match
Loading thumbnail…

Face using D3 and React

A grid of small faces, each rendered as a yellow circle with white eyes and a curved mouth, fills the viewport. The example demonstrates a reusable React component composition built with SVG primitives. The `Face` component combines separate `BackgroundCircle`, `Eyes`, and `Mouth` components, with the mouth path generated using the `d3.arc` API. D3's `range` function creates an array of 100 faces, and each instance applies randomized eye radius values for slight variation across the repetitions.

VVishnu Jayan
89% match
Loading thumbnail…

make face... but in HTML!

This gallery example displays a grid of 18 procedurally generated cartoon faces, each rendered as a yellow circle with black outlines, distinct eyes, and a mouth. Each face is an SVG constructed from React components, including `BackgroundCircle`, `Eyes`, `Mouth`, and `Teeth`, which are composed within a parent `Face` component. The visual variation stems from random values applied to parameters like eye offset, size, and mouth radius. The code leverages D3’s `arc` to draw the mouth arc and D3’s `symbol` with `symbolTriangle` to render the teeth, all positioned through SVG transforms.

AAshford
89% match
Loading thumbnail…

Hello HTML

The gallery displays a grid of 18 identical, cartoonish yellow faces with black outlines, each generated with randomized facial feature parameters. Built with React and rendered as SVG, the example uses D3’s `arc` generator to construct the mouth shape, while all other components—the background circle, eyes, and face container—are hand-coded React components. Each face’s stroke width, eye offset, eye radius, and mouth dimensions vary randomly, demonstrating how component-based composition with D3 utilities can produce varied visual output.

Cchipbrownlee
88% 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
88% match
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
88% match
Loading thumbnail…

react-d3-face

A gallery of randomly generated smiley faces fills the screen, each face composed of a yellow circle with black outlines, stylized eyes, and a mouth. The example combines React components with D3's `arc` function for the mouth shape and `range` utility to generate the array of faces. Built with React 16.9 and D3 v5, it uses SVG rendering to draw each face with randomized stroke widths, eye offsets, and mouth dimensions.

MMohammad jahangir alam
88% 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
88% match