Face Part VII

100%

✓ Published0🌍 Public

Last edited Mar 10, 2021

Created on Mar 10, 2021

A grid of eighteen SVG faces, each a yellow circle with black outlines, displays randomized facial features. The faces are generated using React components, with each attribute—stroke width, eye radius and offset, and mouth dimensions—derived from `Math.random()`. The code splits components into separate files and uses ES6 modules, React Fragments, and a `d3.arc` path for the mouth shape. The faces are rendered within a single SVG per face, positioned via a `transform` translate group.

AI-generated description

Splitting React components into multiple files using ES6 modules. Bonus: React Fragments!

MIT Licensed

Similar vizzes

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

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

91% match

Loading thumbnail…

Face part 1

A grid of eighteen randomly generated cartoon faces, each composed of a yellow circular background, two black eyes, and an arc-shaped mouth, renders in a 3×6 layout. The faces are created using React components, with SVG circles for the head and eyes, and a D3 arc for the mouth. Feature sizes and positions vary per face through randomized parameters.

MMareno Demmers

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

91% match

Loading thumbnail…

Let's Make a Face Part VI

Using React with SVG, this example renders a grid of 18 cartoon faces, each composed of a yellow circular background, two black eyes, and a curved mouth. Every face is randomly varied in eye position, eye size, mouth width, and mouth radius, creating a playful collection of distinct expressions. The code builds each face from reusable React components (`BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`) and uses `d3.arc()` from the d3 library to generate the mouth path. The `range()` function from d3 produces the face count, and Math.random() drives the visual variation.

Bboreilly26

90% match

Loading thumbnail…

Fork of Smiley Face Part V

A grid of eighteen randomized cartoon faces renders in SVG via React components, each face assembled from reusable parts like a yellow background circle, eyes, and an arc-based mouth. The code splits the Face, Eyes, Mouth, and FaceContainer into separate ES6 modules, using React Fragments to group the eye circles. D3’s `arc` generator creates the mouth path, while `d3.range` produces the arrangement of faces. Each face’s proportions—stroke width, eye offset, eye radius, and mouth dimensions—are assigned random values for variety.

CCaparino

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

90% match

Loading thumbnail…

Smiley Face Part VI

A grid of smiling faces displays randomized facial features, each composed of a yellow background circle with black strokes, two eyes, and a mouth. The code builds these faces with React components and SVG, using D3’s `arc` generator to create the mouth paths and `range` to generate an array of eighteen faces. D3 v7 and React are loaded via UMD scripts, with components like `BackgroundCircle`, `Eyes`, and `Mouth` composed within a `FaceContainer`.

EErnie

90% match