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

100%

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

✓ Published0🌍 Public

Last edited Apr 10, 2021

Created on Apr 10, 2021

A field of fifteen yellow smiley faces, each drawn with SVG circles and a D3 arc, repeats in a grid. The faces vary slightly in stroke width, eye radius, and mouth thickness due to random values from `Math.random()`. The React components `Face`, `Eye`, `Mouth`, and `BackgroundCircle` are assembled within a `FaceContainer` that applies a translation. The D3 `arc` API generates the mouth path, while the `range` function from d3 creates the iteration array for the map.

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 randomly generated smiley faces fills the screen, each face composed of a yellow circle, black eyes, and a mouth drawn as a half-circle arc. The code defines reusable React components—Face, Eyes, Mouth, and BackgroundCircle—that render SVG elements, while FaceContainer wraps the drawing in a translated group. Using d3.range to create fifteen face instances, each face varies in stroke width, eye offset, and eye radius through randomized properties. The mouth shape is generated with d3.arc, setting inner and outer radii and angle ranges to form a smile.

Ppfennig

94% match

Loading thumbnail…

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

Ten randomly generated smiley faces are rendered in a grid using React and SVG. Each face uses a yellow background circle, two eyes, and a mouth arc drawn with the d3.arc() API. The `Face` component composes smaller components for the background, eyes, and mouth, with all geometry positioned relative to a central transform. Randomized values for stroke width, eye offset, eye radius, and mouth dimensions are set inline via `Math.random()` during each render.

Uubik-valis

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of randomly generated smiley faces fills the viewport, each with a yellow circular head, black-outlined stroke, two eyes, and a curved mouth arc. The faces vary in stroke width, eye offset, eye radius, mouth width, and mouth radius, produced by a React app that maps over a `range(6*3)` array to render 18 `<Face>` components. Built with D3 v7’s `arc()` function for the mouth and SVG primitives like `<circle>` and `<path>`, the example uses React 17 and renders everything as SVG within a `FaceContainer` that translates each face to a centered position.

NNilsMar

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a grid of fifteen smiley faces, each with randomized eye and mouth sizes, rendered as yellow SVG circles with black outlines. Built with React and D3 v7, the visualization uses reusable components like `FaceCircle`, `Eyes`, and `Mouth` to compose each face. The `Mouth` component leverages D3's `arc` generator to create a curved smile path, while the `FaceContainer` wraps the SVG elements and centers them via a translation transform.

JJulia

93% match

Loading thumbnail…

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

A grid of small, yellow smiley faces, each with a randomly sized pair of eyes, is rendered in an SVG canvas. The faces are generated by mapping over an array of six multiplied by three, creating eighteen face instances. The visualization employs React components, including a `Face`, `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth drawn using d3’s `arc` function. The code relies on both React and D3 v7, using the `range` function to produce the grid layout.

Zzhangwbhi

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

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

Eighteen identical smiley faces are rendered in a grid using React components. Each face is composed of a yellow background circle, two black eyes, and a mouth drawn with a D3 arc generator. The component structure separates the face into reusable parts: `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`. While the overall layout is static, each eye’s radius is randomized, creating subtle variation across the repeated faces. The visualization relies on React for DOM rendering and D3’s `arc` API for the mouth path, with SVG used for all drawing.

Vvijaytayal

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

93% match