Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Aug 15, 2023

Created on Aug 14, 2023

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.

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

95% match

Loading thumbnail…

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

94% match

Loading thumbnail…

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

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

94% match

Loading thumbnail…

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

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A React component renders a stylized smiley face using SVG, with a yellow background circle, two black eyes, and a curved mouth drawn from an arc. The face is centered on a 960 by 500 canvas, with fixed eye offsets and mouth dimensions passed as props. The code uses React 16.7 and D3 v5's `arc` generator to create the mouth path, while the background and eyes are simple SVG circle elements.

Mmisstong

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

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example builds a smiley face from nested SVG shapes using React components, where a yellow background circle, two eyes, and an arc-shaped mouth are composed together. The face’s dimensions and proportions are driven by parameters like `eyeOffsetX`, `eyeR`, and `mouthRadius` passed from a top-level `Face` component. The mouth is drawn using D3’s `arc()` constructor to generate an SVG path, while the eyes and background are plain `<circle>` elements. The composition centers all children inside a transformed `<g>` group based on the container’s width and height.

BBrian Blakely

93% match