Fork of Face III

100%

Fork of Face III

✓ Published2🌍 Public

Last edited Apr 5, 2022

Created on Apr 5, 2022

A stylized face rendered as yellow SVG circles on a dark background. The code uses React to declaratively define the face, with D3’s `arc` function from the `d3-shape` package generating a mouth path placed inside a group element via a template-literal transform. Eye and head positions are calculated from viewport dimensions, while stroke widths and offsets are hard-coded. No external data is shown; all geometry is computed directly in the component.

AI-generated description

Face III using React and D3. Things discussed: D3 library, using arc form D3-shape package, SVG path elements, group elements and transform attribute, ES6 template, adding mouth.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Face

A stylized yellow face rendered in SVG, built with React and D3 v7, features animated eyebrows and a frowning mouth. The code uses `d3.select`, `d3.arc`, and chained `.transition().duration()` calls to move eyebrow rectangles vertically over two seconds, while static circles form the eyes and a path from `arc()` creates the mouth. The face is centered using SVG `g` transforms, with all shapes drawn directly in an HTML page.

RReyden Harris

91% match

Loading thumbnail…

Fork of face_version4

This example displays a stylized yellow face built from SVG circles and an arc, centered on a 960 by 500 canvas. The face features black-outlined eyes, a simple mouth, and a thick black stroke around the head, all rendered using React components. The code uses D3 v7’s `arc` generator to create the mouth path, with geometric constants defining eye offset, radii, and stroke width to position each element. The visualization is drawn with declarative SVG elements inside a React component, demonstrating a straightforward composition of primitive shapes without data binding.

114Hazel

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

90% match

Loading thumbnail…

Fork of Hello HTML

This example shows a stylized cartoon face rendered as SVG, with a yellow circular background, two eyes, and a mouth built from a D3 arc. The face is centered on a 960 by 500 canvas using React components that compose `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`. The code uses React 16.9, ReactDOM, and D3 v6’s `arc` generator to define the mouth’s path. All facial features are parameterized via props, allowing the face’s dimensions and positions to be adjusted independently.

MMarta

90% match

Loading thumbnail…

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

A smiling face is drawn in SVG using React, with a yellow circular head, black stroke outline, and two black eyes positioned symmetrically. The mouth is an arc created with the `d3.arc` generator, using a 130-pixel inner radius and a half-circle angular span. The entire face is centered on the screen using a translated `<g>` group. The code relies on `d3.arc` from d3.v6, React 17, ReactDOM, and a hardcoded width of 960 and height of 500 for the viewport.

DdRAPGb

90% match

Loading thumbnail…

Fork of Fork of Hello HTML

This example renders a simple, stylized face in SVG using React components. The face consists of a yellow background circle, two black eyes, and a mouth drawn as an arc path. The layout is generated by passing explicit numeric props for center coordinates, eye placement, and mouth dimensions into the React component tree, while the mouth shape is computed with the `d3.arc()` API. All elements are positioned relative to a central translation group created via a `FaceContainer` component.

BBgPython

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 Face

A smiling face rendered with SVG, centered and scaled to fill the browser window. The visualization constructs the face using D3’s `arc` generator for the mouth and plain SVG circles for the head, eyes, and stroke. The React component computes the coordinates and dimensions based on the window’s width and height, with the head radius derived from the viewport height. The example demonstrates a hybrid approach, using React for structure while calling on D3 for the arc path generation.

Ttheocostaras

89% match