Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Apr 11, 2021

Created on Apr 9, 2021

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.

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

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

96% match

Loading thumbnail…

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

96% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a yellow smiley face built with overlapping SVG shapes: a large circle for the head, two smaller circles for eyes, and an arc path for a smile. The code uses React to render the SVG elements and D3’s `arc()` generator to create the mouth with specified inner and outer radii and angles. Position values are computed from fixed dimensions, and a `stroke-width` of 20 outlines the head in black. The face is centered via a `<g>` transform, with no interactive or animated behavior.

Nnoodlemakerpo

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

96% match

Loading thumbnail…

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

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

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

96% match