Fork of Let's Make a Face Part I

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from reusable React components, rendering an SVG scene of a yellow circle with two eyes and a mouth. The code defines separate components for the background circle, eyes, and mouth, with the mouth drawn using the D3 `arc()` generator to create a curved path. The face is centered using an SVG `<g>` transform, and the components receive positioning and sizing values as props. The visualization uses React for component composition and D3 v7 for path generation within an SVG rendering approach.

JJames Sarlo

Fork of Let's Make a Face Part I

This example shows a stylized smiley face built from simple SVG shapes, with eyes, eyebrows, and a mouth arranged symmetrically around a yellow circular head. The face is rendered using React components that compute arc paths with `d3.arc`, specifying inner and outer radii and start/end angles for the eyebrows and mouth. The SVG is centered via a group transformation, with hardcoded offsets for eye placement and a black outline drawn with a stroke-width attribute.

Bbstillword

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

Fork of Let's Make a Face Part I

This example shows a stylized smiley face composed of a yellow circular background, two black eyes, and an arc-shaped mouth, all centered within an SVG viewport. The face is built from modular React components, with each part—such as the background circle, eyes, and mouth—defined in separate files and composed together. The mouth is generated using the D3 `arc` generator with specified inner and outer radii and angle extents. Rendering relies on React 18 and D3 v7, with SVG elements positioned by translating a group element to the center of the canvas.

Mmarouan-ben

Fork of Let's Make a Face Part I

This example shows a stylized smiley face built with React and D3 v7, rendered as an SVG. It draws a yellow circle for the head, two black circles for eyes, and a mouth created using the D3 `arc` generator with specified radii and angles. The layout uses absolute positioning via `centerX`, `centerY`, and offset constants, while the SVG `circle` and `path` elements are generated declaratively through React components. The code demonstrates integration of D3’s shape utilities within a React rendering pipeline.

Bbhavani44

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from SVG shapes within a React component, using D3.js to generate the mouth arc. A yellow circle with a thick black stroke forms the head, while two black circles serve as eyes positioned symmetrically around the center. The mouth is created with the D3 `arc` function, which defines an inner and outer radius plus start and end angles to produce a semicircular path. The code uses React 17 and D3 v7, rendering everything to a fixed 960×500 SVG canvas.

SSrijan Nayak

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 renders a yellow smiley face composed of SVG shapes, including a background circle, two eyes, and a curved mouth, all positioned within a centered group. The face is built using React components such as `Face`, `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth drawn using the `d3.arc()` API. The code uses React 18, D3 v7, and SVG rendering, with configurable props for eye offset, radius, and stroke width. The visualization is a static composition demonstrating modular component reuse and D3’s arc generator for path creation.

Bbhavani44