Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Dec 23, 2023

Created on Dec 22, 2023

A grid of eighteen yellow smiley faces, each with black outlines, eyes, and a curved mouth, is rendered as SVG. The faces are generated in React and D3 v7, using `arc()` from D3 to create the mouth shapes and `range()` to produce the array of components. Random eye radii vary the faces.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part II

This example shows a grid of eighteen randomly generated smiley faces, each rendered as an SVG composed of a yellow circular background, two eyes, a mouth, and teeth. The code uses React components for each facial feature and leverages the D3 arc generator to create the smiling mouth shapes. Faces vary in eye radius, mouth radius, smile width, and mouth width, producing a playful collection of distinct expressions. The visualization is built with React and D3 v7, with each face drawn using SVG elements within a transformed group.

Yyz830620

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of randomized smiley faces is generated using React components and rendered as SVG. Each face is composed of a yellow background circle, two eyes, and a mouth, with positions and sizes varying per face through JavaScript’s `Math.random()`. The visualization uses d3’s `arc` API to construct the mouth path and React’s `ReactDOM.render` to display the output. Faces are arranged via a `range` from d3, mapping over an array to produce multiple independent instances.

SShashwat Kumar

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of 18 identical simplified smiley faces, each rendered as a yellow circle with a black border, two eyes, and a curved mouth, is displayed using React and D3. The faces are built from reusable React components—`FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`—which take width, height, offset, and radius props. The mouth is drawn using D3’s `arc` generator, while the grid is produced by mapping over an array from `d3.range`. All rendering is done as SVG elements.

OOraclePcs

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

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

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

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

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

94% match