Fork of Let's Make a Face Part II

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

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

A yellow smiley face is drawn in an SVG canvas using React, with two black eyes and a mouth. The face is centered on a 960x500 canvas, with the head as a yellow circle outlined in black, and the eyes positioned symmetrically. The mouth is created using the `arc` function from the d3 library to define a path, while ReactDOM renders the SVG elements. The code uses d3.v7 and React 17.0.2, with all shapes positioned via transform and absolute coordinates.

Zzhangwbhi

Fork of Let's Make a Face Part I

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.

AAditya Khandelwal

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

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

Fork of Let's Make a Face Part I

A stylized smiley face rendered with React and D3 v6, centered within an SVG canvas. The face uses a yellow circle for the head, two black circles for eyes, and an arc-generated mouth. The mouth is drawn using D3's `arc()` generator, with inner and outer radii and angular extents defined in the code. The SVG elements are positioned via a translated `<g>` group, and styling is applied through inline attributes like `stroke-width`.

AAlbatrus

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

Fork of Let's Make a Face Part I

This example shows a yellow smiley face built from SVG shapes, composed of a circular face, two eyes, and a curved mouth. The face is constructed using React components and D3.js helper functions, with the `arc()` generator creating the mouth’s path. The SVG is centered via a transform, and the code uses ReactDOM to render the visualization into the page.

SSan