Fork of Let's Make a Face Part II

100%

Fork of Let's Make a Face Part II

✓ Published0🌍 Public

Last edited Nov 18, 2021

Created on Nov 18, 2021

A parameterized smiley face built with React and D3 v7 renders as layered SVG circles and an arc-based mouth. The `Face` component composes `BackgroundCircle`, `Eyes`, and `Mouth`, each accepting numeric props for position, size, and stroke width. The mouth uses D3's `arc` generator to draw a partial annulus between inner and outer radii, with angles set to a half-turn. The React app instantiates a single 960×500 face centered at the midpoint, with fixed eye offset and radius values.

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

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

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

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

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

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a stylized smiley face using React and D3.js version 7, composed of SVG circles and a path. The face features a gradient-filled head with a drop shadow, two eyes with pink offset shadows, and a mouth drawn using a D3 arc generator. The code defines all geometry through hardcoded constants rather than data, with the arc’s inner radius, outer radius, and angle ranges set explicitly to form the smile. The rendering is driven by React’s declarative component model, which outputs the SVG directly.

CCesar R Castillo

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

93% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a stylized smiley face built from simple SVG shapes, with eyes, eyebrows, and a mouth arranged symmetrically around a yellow circular head. The face is rendered using React components that compute arc paths with `d3.arc`, specifying inner and outer radii and start/end angles for the eyebrows and mouth. The SVG is centered via a group transformation, with hardcoded offsets for eye placement and a black outline drawn with a stroke-width attribute.

Bbstillword

93% match