Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Aug 29, 2022

Created on Aug 28, 2022

A React-built smiley face uses yellow, red, and white SVG circles to render a face with eyes, nose, and a curved grin. The face is constructed from reusable components—BackgroundCircle, Eyes, and FaceContainer—that accept props for sizing and positioning. The grin uses D3's arc generator to draw a semi-circular path, while the overall SVG layout is centered via a translated group. The example demonstrates modular component composition and D3 integration within a React rendering pipeline.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a stylized smiley face built from three reusable SVG components: a yellow background circle, a pair of eyes, and a mouth drawn as an arc. The face is positioned at the center of a 1060×500 SVG canvas using React components that receive geometry props for radii and offsets. The mouth path is generated with d3.arc(), while BackgroundCircle and Eyes render plain SVG circle elements. React 16.9 and D3 v7 work together, with all drawing handled declaratively through JSX.

Rrishyossarian

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

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A stylized smiley face rendered with React and D3 v6, built from basic SVG shapes. The face features a yellow circle, two black eyes, and a mouth drawn using D3's `arc()` generator. A React component computes layout constants for the center, eye offsets, and dimensions, then transforms an SVG group to position the elements. The mouth arc uses inner and outer radii with a half-rotation, while the face circle is sized relative to the viewport height and stroke width.

VVladimirSharov

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

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a customizable smiley face built from modular React components, with a yellow circular background, two black eyes, and a curved mouth drawn using the D3 arc generator. The face is centered within an SVG via a transformed group, and all dimensions—such as eye offset, eye radius, mouth radius, and stroke width—are passed as props from the main App component. React 16.9 and D3 v5 handle the rendering, with the mouth path computed by `d3.arc` using specified inner and outer radii and angular ranges. The code demonstrates composing reusable SVG elements through React’s component architecture.

Wwobling1

95% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A stylized smiley face built with React and D3 renders as a yellow circle with black stroke, two eyes, and a mouth. The face is constructed from reusable React components, with D3’s `arc` generator creating the mouth’s curved path. All shapes are drawn as SVG elements inside a centered `<g>` transform, using fixed numeric values for positioning and radii. The code organizes components for the background, eyes, mouth, and face container, with no external data—only hardcoded geometry. This example demonstrates modular component composition and D3’s shape API within a React rendering pipeline.

Sstpvizzy

95% 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 SVG. The face consists of a yellow background circle, two black eyes, and a mouth drawn as an arc path. The code uses React function components to compose the face from separate parts, with D3’s `arc()` generator creating the mouth shape. Layout constants like center coordinates, eye offsets, and radii are defined in the parent component and passed down as props, while a container component wraps everything in a centered SVG group.

AAbhishek-Bohora

95% match