Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Dec 25, 2021

Created on Dec 24, 2021

This gallery example generates a grid of eighteen stylized faces, each a variation on the same base design with randomized eye sizes, rendered as SVG circles and an arc-based mouth. The faces are composed programmatically using React components, with `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer` assembling the visuals. The code leverages the `d3.arc()` API to create the mouth path and `d3.range` to generate the array of face instances, all rendered through ReactDOM into a single SVG container.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a grid of randomly generated cartoon faces, each with a yellow circular background, two eyes, and a half-circle mouth. The faces are rendered as SVG elements using React components. The code defines reusable `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` components, with the mouth drawn using the `d3.arc` API. A `range(18)` array from d3 generates eighteen faces, each with randomized stroke thickness, eye position, eye radius, and mouth dimensions, resulting in a playful variety of expressions.

Hhasti khajeh

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a grid of eighteen stylized smiley faces, each composed of reusable React components for the background circle, eyes, and mouth. The faces are generated by mapping over a D3 range and rendered as SVG, with randomized eye radii giving each face slight variation. The code leverages React for component composition and lifecycle, D3 v5’s `arc` generator for the mouth path, and D3’s `range` to produce the repeated instances.

OOliOsb

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of 18 randomly generated faces, each with a yellow circular background, two eyes, and a mouth, demonstrates a modular React component approach. The code uses D3’s `arc` API to create the mouth path and the `range` function to generate the grid layout. Each face’s eye offset, eye radius, and mouth radius are randomized, resulting in varied expressions, while the SVG rendering is handled through React components for the background, eyes, mouth, and face container.

Ssimfen

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of eighteen randomly generated smiley faces demonstrates the reusability of React components for data-driven SVG composition. Each face uses `d3.arc` to construct a smiling mouth, while circle elements form the eyes and face outline, with randomized parameters for eye offset, radius, stroke width, and mouth dimensions. The code builds reusable `Face`, `BackgroundCircle`, `Eye`, and `Mouth` components within an SVG container, iterating over values from `d3.range` to render multiple variations simultaneously.

JJacob Potvin

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of 18 randomly generated cartoon faces, each rendered as a yellow circle with black outline, two eyes, and an arched mouth. The example uses React to instantiate multiple `Face` components, each composed of `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents, which build SVG elements. The `Mouth` component leverages d3’s `arc()` API to compute the path for a smile, with randomized dimensions for facial features.

KKeyvan Rezaei

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of twenty small, static smiley faces renders in an SVG canvas. Each face consists of a yellow background circle with a black stroke, two circular eyes, and a mouth drawn with d3’s `arc` generator, creating a half-circle from inner and outer radii. The React application maps over a `d3.range(20)` array to produce these faces, with randomized eye radii for slight variation. The SVG is structured through reusable React components, including `FaceContainer` for the coordinate transform and `BackgroundCircle` for the base shape.

Ppornpat234

91% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a grid of eighteen randomly generated smiley faces rendered with React and D3 v7. Each face is composed of reusable React components for the background circle, eyes, and mouth, with randomized eye offsets, radii, and mouth dimensions. The face components are positioned within an SVG using a `<g>` transform, and the mouth is drawn with d3.arc, creating varied expressions across the grid.

AArin R. Greenwood

91% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of 18 randomly generated cartoon faces fills the screen, each with a yellow circular background, two black eyes, and a D3 arc-based mouth. The faces vary in stroke width, eye offset, eye radius, and mouth dimensions due to randomized values from `Math.random()`. Built with React and D3 v6, the visualization uses the `arc()` API from D3 to define each mouth’s path, while React components (`Face`, `BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`) assemble the SVG output. The data source is implicit, generated programmatically via `d3.range` and random parameters.

NNfuu

91% match