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

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

This example shows a stylized cartoon face built from separate React components for the background circle, eyes, mouth, and teeth. The face is centered on an SVG canvas with a gradient fill, using d3.arc to create the curved mouth and teeth shapes. The code uses React 18 and d3.v7 to compose reusable components like FaceContainer, BackgroundCircle, Eyes, Mouth, and Teeth, passing props for dimensions and offsets. The teeth include straight vertical lines to suggest individual teeth within the arc.

Rradhadevarapu

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

This example renders a stylized robot-like face constructed from reusable React components. An SVG group centers the face, which includes a gradient-filled background circle, offset eyes, a mouth arc, and teeth drawn with D3’s `arc` generator and SVG `<line>` elements. Each facial feature is parameterized with props for position, radius, and stroke width, allowing easy customization. The face is assembled from separate components—`FaceContainer`, `BackgroundCircle`, `Eyes`, `Mouth`, and `Teeth`—using React and D3 v7, with the entire SVG output generated client-side.

RRubanda

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

This example builds a stylized face from reusable React components, layering a gradient background circle, ellipses for eyes, and a mouth arc into an SVG canvas. The face is centered using a FaceContainer that applies a translation, while D3’s `arc()` generator defines the mouth and tooth shapes. Teeth are rendered as white arcs with black dividing lines, and a linearGradient fills the background. The code uses d3.v7 and React 18, with all coordinates and dimensions passed as props to control facial feature placement.

VVamshisoleti09

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

This example builds a stylized face from reusable React components, assembling a gradient-filled background circle, asymmetric eyes, and a D3-generated arc-based mouth and teeth. The face is constructed declaratively by passing numeric properties for position, size, and offsets into the `Face` component, which orchestrates the SVG output. The `d3.arc` API creates the mouth and teeth paths, while custom parameters like `teethSpace` and `toothWidth` control the spacing and thickness of the teeth lines. The code demonstrates a modular approach to SVG composition with React and D3.

NNeeharikaGali

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

This example builds a stylized face using React components and D3's `arc` generator to draw a gradient-filled background circle, elliptical and circular eyes, and a mouth with staggered teeth lines. The `FaceContainer` wraps the SVG, applying a linear gradient definition and translating the coordinate system to center the face. All geometry parameters, such as eye offsets, radii, and tooth spacing, are passed as props to reusable components, allowing the face to be reconfigured by changing numeric values. The rendering is entirely SVG-based within a React 18 application using D3 v7.

NNeeharikaGali

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

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

This React-based visualization displays a stylized, cartoon-like face built entirely from SVG shapes. The composition centers on a gradient-filled circle with asymmetrical eyes—one rendered as an ellipse and the other as a circle—along with a mouth and teeth created using D3’s `arc` generator. The `FaceContainer` component defines the SVG canvas and a linear gradient, while modular components for eyes, mouth, and teeth accept numerous numeric props to control positioning and sizing. The final result, a half-completed smiley face, is assembled in `index.js` using ReactDOM rendering with D3 v7 and React 18.

NNeeharikaGali

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

This example renders a stylized, semi-complete smiley face built from reusable React components. The face includes a gradient-filled background circle, two asymmetric eyes, and a mouth constructed with d3.arc. The teeth component overlays the mouth with a white arc and black dividing lines. All shapes are drawn as SVG elements, transformed into place via a FaceContainer that centers the group. The code imports d3 v7 for arc generation and uses React 18 to compose the modular parts into a single static visualization.

NNIRANJANAN24