Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published1🌍 Public

Last edited Apr 29, 2021

Created on Apr 28, 2021

A yellow smiley face is drawn on an SVG canvas, centered with two eyes and a mouth. The code uses React to render SVG elements, with D3's `arc` function generating the mouth path and a reusable `BackgroundCircle` component for the face. The example is a partial implementation, as the README notes it is halfway towards a complete smiley face, with a hidden commented-out circle in the HTML.

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

96% match

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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a yellow smiley face in an SVG, composed of a circle, two eyes, and a mouth. Built with React and D3 v7, it uses D3’s `arc` generator to create the mouth path, while the face and eyes are simple SVG circles. The component structure defines a reusable `BackgroundCircle`, and all elements are positioned relative to a center point using SVG transforms.

AAlish Shrestha

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a smiley face using React and D3.js, displaying a yellow circle with two eyes and a curved mouth on an SVG canvas. The face is centered within a 960x500 viewport, with the mouth drawn using D3’s `arc` function to create a partial ring. The code defines geometric constants for positioning and sizing, then constructs the SVG elements through React’s declarative syntax, relying on the `d3` path generation for the mouth’s arc path.

BBenZaad

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a yellow smiley face built from SVG shapes, with two black eyes and a curved mouth, centered on a 960-by-500 canvas. It renders the face using React components, where each circle and the mouth path are defined as JSX elements inside an SVG. The mouth is generated with the `d3.arc()` generator, specifying inner and outer radii and start and end angles, while the eyes use hardcoded offsets from the center. The code relies on React for structure and d3 for path generation, with all geometry computed from fixed variables.

PPinzhi

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a yellow smiley face with two eyes and a curved mouth, centered on an SVG canvas. It is built with React (v17) and D3 (v7), using D3’s `arc` generator to define the mouth path. The face is composed of three separate React components—`BackgroundCircle`, `Eyes`, and `Mouth`—all nested inside a shared `FaceContainer` that applies a translation transform. The SVG width is 960 pixels, height 500 pixels, and the final output is drawn entirely as vector shapes.

IIsh Takkar

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow smiley face is drawn in the center of an SVG canvas using React and D3. The face consists of a circular background with a thick black stroke, two dark eye circles, and an arc-shaped mouth generated with the D3 `arc` function. The animation includes a video about face creation, while the static face uses fixed coordinate calculations for eye offsets and mouth angles. Rendering happens through React’s virtual DOM, with SVG elements defined as React components.

NNam9111999

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This is a static smiley face built from SVG shapes, drawn in yellow with a black outline. The face features two circular eyes and a semicircular mouth, all positioned relative to the center of a 960 by 500 canvas. The code uses React to render the SVG and D3's `arc` API to generate the mouth path. Key parameters like eye offsets, radius, and stroke width are defined as constants, while all shapes are grouped and translated to the center.

DDaikonSt

95% match