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

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

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

This example draws a yellow smiley face centered in an SVG canvas using React and D3 v7. It shows a circle for the head, two smaller circles for eyes, and a curved mouth path generated with the `d3.arc()` API. The face is positioned via a translation transform, with eye offsets and radius defined as constants, while the mouth uses inner and outer radii with angled start and end points. All shapes are rendered declaratively as SVG elements within a React component.

PPakapone Supavarn

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

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

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