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

100%

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

✓ Published1🌍 Public

Last edited Jan 15, 2021

Created on Jan 15, 2021

Forked from Fork of Fork of Let's Make a Face Part IV

A stylized smiley face built with React and rendered as SVG, composed of a pink background circle, two eyes with asymmetric radii and a brow line, two rectangular teeth, and an arc-based mouth. The mouth is generated using the d3.arc() API from d3.v6, while positioning is handled via a central group transform. Custom React components export each facial feature, taking size and offset props to control layout.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

This example renders a stylized, semi-complete smiley face built from reusable React components. The face includes a gradient-filled background circle, two asymmetric eyes, and a mouth constructed with d3.arc. The teeth component overlays the mouth with a white arc and black dividing lines. All shapes are drawn as SVG elements, transformed into place via a FaceContainer that centers the group. The code imports d3 v7 for arc generation and uses React 18 to compose the modular parts into a single static visualization.

NNIRANJANAN24

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A stylized smiley face rendered with React and D3 v6, built from basic SVG shapes. The face features a yellow circle, two black eyes, and a mouth drawn using D3's `arc()` generator. A React component computes layout constants for the center, eye offsets, and dimensions, then transforms an SVG group to position the elements. The mouth arc uses inner and outer radii with a half-rotation, while the face circle is sized relative to the viewport height and stroke width.

VVladimirSharov

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This visualization shows a stylized smiley face constructed from SVG shapes, including a yellow background circle, two eyes, a mouth drawn with an arc, and two rectangular teeth. Built with React and D3 v6, the code uses the D3 `arc` API to generate the mouth path. The face is centered on a 960 by 500 SVG canvas, with all components positioned relative to the center point. The example demonstrates composable React components for each facial feature, accepting props for size and offset values.

WWill Hipson

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a stylized smiley face built from simple SVG shapes, with eyes, eyebrows, and a mouth arranged symmetrically around a yellow circular head. The face is rendered using React components that compute arc paths with `d3.arc`, specifying inner and outer radii and start/end angles for the eyebrows and mouth. The SVG is centered via a group transformation, with hardcoded offsets for eye placement and a black outline drawn with a stroke-width attribute.

Bbstillword

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A stylized face is drawn in SVG using React, with a pink circular head, two eyes, a line for a brow, and a smile rendered as an arc. The face is centered on a 960x500 canvas, with explicit coordinates for eye offsets and mouth dimensions. The code uses React’s createElement via JSX, d3’s `arc()` to generate the mouth path, and groups (`<g>`) with translate transforms to position features. Static data defines all shapes, and no interactive behavior is present.

MMONNNA-ARCH

93% match

Loading thumbnail…

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

A stylized smiley face is drawn as a set of SVG shapes, with a gradient-filled background circle, two asymmetric eyes, a mouth arc, and a row of teeth rendered as lines. Built with React and D3 v7, the face’s geometry is parameterized as props, and D3’s `arc` generator creates the mouth and teeth paths. The teeth use hard-coded coordinate offsets to simulate individual tooth separations, while the SVG is assembled from reusable component functions with a linear gradient defined in `defs`.

PPratik Karna

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A React component renders a stylized smiley face using SVG, with a yellow background circle, two black eyes, and a curved mouth drawn from an arc. The face is centered on a 960 by 500 canvas, with fixed eye offsets and mouth dimensions passed as props. The code uses React 16.7 and D3 v5's `arc` generator to create the mouth path, while the background and eyes are simple SVG circle elements.

Mmisstong

93% match

Loading thumbnail…

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

This example shows a yellow smiley face composed of a circular background, two eyes, and a mouth, rendered as SVG shapes. The face is drawn declaratively, using React components to wrap each visual element, and positioned at the center of the canvas. The code relies on React 17 and d3.v7 specifically the `d3.arc` API, applied through the `Mouth` component to generate the mouth path. The facial features are parameterized, with the background circle, eyes, and mouth each receiving explicit coordinates and dimensions as props, resulting in a static, programmatically constructed portrait.

Zzhangwbhi

93% match