Skip to main content
SimilarExport ZIP
100%

Make Face

✓ Published0🌍 Public
Ssikadali
Last edited Aug 29, 2021
Created on Aug 28, 2021
Forked from Hello HTML

A grid of eighteen yellow smiley faces appears, each rendered as an SVG with a circular face, two eyes, and an arc-shaped mouth. The faces vary randomly in eye radius, giving each a slightly different expression. The example uses React components to compose the face parts, and D3's `arc` generator for the mouth path, with all geometry positioned via SVG transforms.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

Let's Make a Face Part V

A grid of eighteen smiley faces, each with a yellow circular background, black outline, two eyes, and a curved mouth, is rendered as a single React application. Each face uses randomized eye radii, making them subtly distinct. The visualization is built with React components and D3’s `arc` API for the mouth shape, all rendered as SVG within a fixed 150 by 150 pixel viewport per face.

PPakapone Supavarn
93% match
Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces, each rendered as a yellow circle with black stroke, two eyes, and a curved mouth, shows randomized variation in facial feature size and position. Built with React and D3, the code uses the `arc` generator from D3 to create the mouth path, while SVG circles form the face and eyes. The `range` function from D3 generates the array for the grid, and each face is positioned via a transformed group within an SVG container.

Iikerson
92% match
Loading thumbnail…

Smiley Face

A grid of fifteen yellow smiley faces, rendered with React and SVG, uses the D3 arc API to draw each mouth. The faces are generated from a single `Face` component, which composes separate `BackgroundCircle`, `Eyes`, and `Mouth` components. Each face is identically parameterized with fixed offsets and radii, and the array from D3's `range` function replicates the component across the canvas. The SVG output is translated to center each face, using D3's `arc` for the mouth path.

Sstackedchips
92% match