Fork of Let's Make a Face Part I, cuz mine stayed at codepen (y)

100%

Fork of Let's Make a Face Part I, cuz mine stayed at codepen (y)

✓ Published1🌍 Public

Last edited Feb 28, 2021

Created on Feb 27, 2021

This example shows a simplified, stylized face built from reusable React components, with a yellow circular background, two eyes, red blurred cheeks, and an arc-shaped mouth. The face is centered within an SVG canvas using a `FaceContainer` that applies a translation transform. The code constructs the face using React functional components like `BackgroundCircle`, `Eye`, `Cheek`, and `Mouth`, with the mouth drawn using the D3 `arc` function and cheeks blurred via an SVG `feGaussianBlur` filter. All geometry and styling properties are passed as props from a single `Face` component.

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 React-based face built from composable SVG components renders a yellow circle with two black eyes and a smiling mouth. The face’s geometry is parameterized through props like `eyeOffsetX` and `mouthRadius`, while the mouth uses `d3.arc` to generate a curved path. The `FaceContainer` wraps the SVG and applies a centering transform, and the final scene is mounted with `ReactDOM.render`. The code imports specific React components, including `BackgroundCircle`, `Eyes`, and `Mouth`, and uses D3 v7 for arc generation.

YYodae Lim

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A stylized cartoon face is rendered as a reusable React component, showing how SVG primitives compose to build a simple character. The face uses a yellow background circle, two eyes, and a mouth drawn with D3's `arc` generator, positioned via React props for offsets and radii. The `FaceContainer` wraps the SVG and uses a `<g>` transform to center the drawing, while configuration values like stroke width and eye spacing come from the top-level `App` component. D3 v6 is used only for the mouth arc path calculation.

AAustin White

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a simple, stylized face built from layered SVG shapes: a yellow circle for the head, two light-blue eyes with black pupils, and a red arc for the mouth. The rendering is driven by a React component hierarchy, with each facial feature defined as a separate reusable component. The code uses D3’s `arc` generator to create the mouth’s curved path, while all positioning relies on SVG attributes within a centered group. The face is hardcoded at 600 by 500 pixels with no interactive behavior or external data source.

SSistema Frenos

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from reusable React components, rendered as an SVG that fills the browser window. The face consists of a yellow background circle, two black eyes, and a mouth created using the `d3.arc()` API from D3 v7. The React components (`FaceContainer`, `BackgroundCircle`, `Eyes`, `Mouth`) compose the visualization, with the face centered using SVG transforms. The code runs in a React 16.9 production environment and imports D3 directly for the arc path generation, demonstrating a minimal component-based approach to SVG drawing.

Ttdinh09

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a stylized smiley face built from modular React components, with a yellow circular background, two eyes, and an arched mouth rendered as SVG elements. Derived from the “Let’s Make a Face” tutorial, it uses fixed geometric prop values for positioning and sizing. The code leverages React 18 for component composition and the d3.arc API from d3.v7 to generate the mouth path, all within a simple SVG container that translates the face to the center of the viewport.

Eedrisimm

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a stylized cartoon face composed of a yellow circular background, two black eyes, and a curved mouth, rendered as SVG elements. The face is centered within a fixed 960 by 500 pixel viewport. The visualization demonstrates a modular React component structure, with separate components for the background circle, eyes, mouth, and a container that handles the SVG coordinate translation. The mouth is generated programmatically using a D3 arc generator, which calculates the path for a smile based on specified inner and outer radii.

Ggoduser1978

92% match

Loading thumbnail…

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

92% match

Loading thumbnail…

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

92% match