Fork of Let's Make a Face Part II

100%

Fork of Let's Make a Face Part II

✓ Published1🌍 Public

Last edited Feb 22, 2021

Created on Feb 22, 2021

A yellow face made of SVG shapes is rendered in the center of a 960 by 500 canvas. The face shows two black circular eyes and a mouth drawn as an arc, all positioned using React components and D3's `arc` generator from the `d3` module. The outer circle uses a stroke to create a border, while the mouth path is defined with start and end angles. The code leverages React 17 and D3 v6, with the entire graphic built dynamically through JSX and ReactDOM rendering.

AI-generated description

Make face Part 1 Make face Part 2

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part II

A yellow smiley face is drawn on an SVG canvas, centered with a thick black outline, two circular eyes, and an arc-shaped mouth. The face is built with React and D3.js, using D3’s `arc` function to generate the mouth path and SVG filter definitions for a drop-shadow effect. The code constructs the face with basic shapes, positioning them relative to the canvas center, and renders the result through React’s `ReactDOM.render`.

Bboreilly26

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A face rendered as a yellow SVG circle on a black outline, with two fixed black eyes and a mouth drawn as a thick arc, is centered on a 960 by 500 canvas. The example demonstrates basic D3 shape construction in a React component, using the D3 `arc` function to create the smile and manual SVG `<circle>` elements for the face and eyes. The drawing is produced with declarative SVG attributes and D3’s arc path generator, showing how geometry can be composed in a browser-based visualization.

EElena Ionescu

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

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A cartoon face is drawn using SVG circles and an arc path. The face has a yellow circular head with a black outline, two black eyes positioned with vertical offsets, and a smile formed by a thick arc. The visualization is built with React, utilizing the D3.js `arc` API to generate the mouth path. The SVG canvas is 960 by 500 pixels, and all facial features are positioned relative to the center of the canvas.

SSreekar Reddy

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A stylized smiley face rendered in SVG, built with React and D3 v7, centers a yellow circle with a black stroke on a 960 by 500 canvas. The face uses D3's `arc()` generator to draw a mouth as a thick arc, while two offset circles serve as eyes. React manages the component structure, and D3 calculates the mouth’s path geometry based on specified radius and angle values. The example demonstrates composing SVG primitives with D3 shape generators inside a React render tree.

Uubik-valis

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow smiley face is drawn as an SVG, with two black eyes and a mouth shaped as a partial arc, all centered on a 960 by 500 canvas. The face is built using React and D3’s `arc` generator, which defines the mouth’s inner and outer radii and angular range. The head is a yellow circle with a black stroke, and the eyes are positioned using fixed offsets and radius values, with the entire group translated to the canvas center.

Aalibekvelikiy

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

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

93% match