2nd Fork of Let's Make a Face Part I

100%

2nd Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Apr 23, 2021

Created on Apr 21, 2021

The example renders a grid of procedurally generated abstract faces, each composed of a pink circle with black stroke, two offset eyes, and a mouth drawn as a d3 arc path. React components (`BackgroundCircle`, `Eye`, `Mouth`, `Face`) compose the SVG elements, while `d3.range` generates 18 face instances with randomized properties like stroke width, eye position, and mouth radius. The code uses d3.v6’s `arc` API for the mouth shape and React’s `ReactDOM.render` for mounting.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

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

91% match

Loading thumbnail…

Fork of Let's Make a Face Part I

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.

NNatalia-Ilchenko

91% match

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

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

90% match

Loading thumbnail…

Fork of Make a Face Part II

Fifteen yellow cartoon faces render in a grid, each assembled from React components that layer a background circle, two eyes, and a d3 arc-based mouth. The faces vary randomly in eye radius and mouth radius, while the eye offset, mouth position, stroke width, and background color remain constant. The code uses d3.range to generate the faces, d3.arc for the mouth path, and React’s StrictMode with SVG rendering.

PPatrick Hebner

90% match

Loading thumbnail…

Fork of Fork of Fork of Let's Make a Face Part I

This example shows a stylized, smiling face built from layered SVG shapes, with a gradient-filled circular background, asymmetric eyes, an arc-based mouth, and teeth drawn from lines and arcs. The face is assembled from reusable React components—BackgroundCircle, Eyes, Mouth, Teeth, and FaceContainer—whose positions and sizes are controlled by numerical props passed from a central App component. The code uses React 18 for rendering, d3 7's `arc()` helper to generate the mouth and teeth paths, and SVG `linearGradient` for the green-to-yellow fill. The face is centered in a 960×500 viewport using explicit `centerX` and `centerY` coordinates.

RRubanda

89% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a simple, stylized face built from layered SVG shapes: a yellow circle for the head, two light-blue eyes with black pupils, and a red arc for the mouth. The rendering is driven by a React component hierarchy, with each facial feature defined as a separate reusable component. The code uses D3’s `arc` generator to create the mouth’s curved path, while all positioning relies on SVG attributes within a centered group. The face is hardcoded at 600 by 500 pixels with no interactive behavior or external data source.

SSistema Frenos

89% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A stylized face composed of geometric shapes is rendered in SVG. A yellow circle forms the head, with two black circles as eyes and a D3 arc function (`d3.arc`) generating a smile-shaped mouth path. The example is a React application using D3 v6 for the arc path generation, with SVG elements composed through reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`. The face’s features—eye offset, radius, mouth width, and stroke—are parameterized, and the final layout is centered at a calculated midpoint within a 960×500 viewport.

Uumgi

89% match