Let's make a face: part 5

100%

Let's make a face: part 5

✓ Published1🌍 Public

Last edited Dec 20, 2021

Created on Dec 20, 2021

A modular smiley face built with React renders gold background circles, black eyes, and a curved mouth in SVG. The component structure separates BackgroundCircle, Eyes, and Mouth into individual ES6 modules, with the mouth path generated using d3.arc. Fixed dimensions position elements via a translated group, while ReactDOM mounts the app to the DOM.

AI-generated description

Refactoring the smiley face with React and D3 into multiple files with ES6 modules.

File structure:

index.js
- BackGroundCircle.js
- Eyes.js
- Mouth.js
  - d3.arc

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face: part 4

This example shows a cartoon smiley face built as an SVG composition, with a gold circular face, two black eyes, and a curved mouth arc. The face is centered within a 960-by-500 viewport using a translated group element. The code defines a reusable React component for the background circle and imports the `arc` function from `d3` to generate the mouth’s path. Rendering relies on React 17 and D3 7, with explicit pixel and angle dimensions stored in constants for the facial features.

Rrvdv

90% match

Loading thumbnail…

Let's Make a Face Part I

A modular React component builds a smiley face from SVG shapes, with a yellow background circle, two eyes, and a curved mouth rendered via d3.arc. The face’s position, sizes, and offsets are passed as props, while a FaceContainer groups elements around a translated origin. The example demonstrates reusable SVG composition with React and D3 v5.

Sseanware

90% match

Loading thumbnail…

Smiley Face Part I

This example assembles a yellow smiley face from modular React components—BackgroundCircle, Eyes, Mouth, and FaceContainer—that wrap D3’s arc generator for the mouth’s curved path. The code positions facial features via SVG circles and a path, all rendered on a 960×500 canvas using ReactDOM, with D3 loaded from a CDN. It demonstrates local ES6 module imports, state-free composition, and geometric parameters for eye offset, mouth radius, and stroke width, though no external data is used.

GGabriel Starosky

90% match

Loading thumbnail…

Smiley Face Part 1

A modular React component draws a stylized smiley face using SVG, with a gold background circle, two eyes, and a d3.arc-generated mouth. The face is assembled from reusable components—BackgroundCircle, Eyes, and Mouth—positioned within a FaceContainer that applies a centered translation using the `width` and `height` props. Properties like eye offset, radius, and mouth dimensions are passed as props to control the face’s proportions. The example demonstrates composable SVG rendering in React with d3’s `arc` helper for the curved mouth path.

Eeskizie

90% match

Loading thumbnail…

Let's Make a Face Part V multiple files with ES6 modules

A smiling face is rendered as a static SVG composed of modular React components: a yellow background circle, two eyes, and a mouth. The mouth is drawn using the D3 `arc` generator with fixed start and end angles. The code splits each facial feature into separate ES6 modules (`BackgroundCircle.js`, `Eyes.js`, `Mouth.js`) that are imported into the main `index.js` file, which uses ReactDOM to render the nested SVG elements inside a `<g>` transform.

Ccoobeet

90% match

Loading thumbnail…

Let's Make a Face Part V multiple files with ES6 modules

A React application renders a smiley face using modular ES6 components and D3. It shows a yellow circle background with black stroke, two eyes positioned symmetrically, and a curved mouth drawn with a D3 arc generator. The face is centered via SVG transforms, and the react app mounts to a DOM root using ReactDOM. The components receive numeric props for dimensions, demonstrating reusable SVG elements with D3-shape paths.

RRiccardo De Lucia

90% match

Loading thumbnail…

Let's make a Smiley Face - Part 5

This example builds a smiley face from modular React components rendered as SVG shapes. Yellow background, black eyes, and a curved mouth are positioned with a central `<g>` transform. The mouth uses a `d3.arc` path generator with inner and outer radii, while the eyes are simple offset circles. React 17 manages the component hierarchy, and d3.v5 provides the arc calculation. The SVG canvas is 960 by 500 pixels, with all elements drawn in proportion to the center point.

OOlowogoke Seun

90% match

Loading thumbnail…

Smiley Face Part V - ES6 Modules

A smiling face rendered as an SVG diagram using React components for its yellow background circle, two black eyes, and a curved mouth. The mouth shape is generated with the D3 `arc()` generator, while the background and eyes are simple SVG `<circle>` elements. React 17 renders the composed components into the DOM, with D3 v6 imported specifically for the arc path calculation. The face is centered within a 960-by-500 viewport, and all sizes and offsets are defined as constant variables in the main module.

Ddev-ignacio-h

89% match