Fork of Smiley Face Part V

100%

Fork of Smiley Face Part V

✓ Published0🌍 Public

Last edited Apr 19, 2021

Created on Apr 19, 2021

This example shows a smiley face built from modular React components, with a yellow circular face, two black radial-gradient eyes, and a curved mouth arc. It demonstrates splitting D3-based SVG rendering into separate ES6 module files, using React fragments in the eyes component and a shared face container for positioning. The code uses React 16.9, D3 v5’s `arc()` API for the mouth path, and renders everything into an SVG via `ReactDOM.render`. All geometry values are defined as constants in the main `index.js` file.

AI-generated description

Splitting React components into multiple files using ES6 modules. Bonus: React Fragments!

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley Face Part V

This example shows a smiley face constructed from a yellow circle, two eyes, and an arc-shaped mouth, all rendered as SVG elements in a React application. The face’s components are split into separate ES6 modules, demonstrating component reuse and React fragments for grouping. The mouth uses d3’s `arc()` API to define an annular sector, while the circle and eye positions are controlled by constant offsets and radii. D3 v5 and React 16.9 are used, with ReactDOM handling the SVG rendering.

TTushar Dangayach

97% match

Loading thumbnail…

Fork of Smiley Face Part V

This example shows a smiling face composed of modular React components: a yellow background circle, two eyes, and an arc-shaped mouth, all rendered as SVG. The face is centered within a 960×500 viewport, with positioning controlled by properties such as `centerX`, `centerY`, `eyeOffsetX`, and `eyeOffsetY`. The code imports React, ReactDOM, and D3’s `arc` generator to define the mouth path. Components are split across separate ES6 module files, and React Fragments group the eyes without extra DOM elements. The rendering uses SVG elements inside a `<g>` transform for translation.

JJustin Olson

96% match

Loading thumbnail…

Fork of Smiley Face Part V

This example shows a smiling face constructed from modular React components, with a yellow circular background, two eyes, and an arched mouth drawn using d3’s `arc` generator. The SVG is rendered through React, with each part—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—defined in separate ES6 modules and composed in `index.js`. Coordinates and sizes like eye offset and mouth radius are passed as props, while the `FaceContainer` wraps children in a translated group. The code uses React fragments to group the eyes without extra DOM elements.

DdbarU

96% match

Loading thumbnail…

Fork of Smiley Face Part V

This example shows a classic smiley face rendered as an SVG composed of three distinct React components: a yellow background circle, two black eyes, and a mouth drawn using an arc path. The code demonstrates splitting React components into separate ES6 module files, using React Fragments to group elements without extra DOM nodes. It leverages ReactDOM to render the entire graphic into a root div, while D3 v5’s `arc()` API generates the mouth’s path geometry with specified inner and outer radii and angular range. The layout is centered via a translate transform, with all shapes positioned relative to the SVG’s center.

CChestnut Sea

96% match

Loading thumbnail…

Fork of Smiley Face Part V

A smiling face is rendered as an SVG across modular React components, with a yellow background circle, two eyes, and an arc-based mouth. The code splits the face into separate ES6 modules for the background, eyes, and mouth, using React Fragments and the `arc()` generator from D3 v5 to define the mouth’s curved path. Everything is centered within an SVG canvas using a translated `<g>` group, with dimensions and offsets passed as props from the main app component.

BBurak Senel

96% match

Loading thumbnail…

Fork of Smiley Face Part V

A yellow smiley face with black outlined eyes and a curved mouth is rendered as an SVG inside a React application. The code splits the face into separate ES6 module components, including `BackgroundCircle`, `Eyes`, and `Mouth`, using React fragments. The `Mouth` component uses the `arc` function from `d3` to define its path, while fixed numeric constants set the face dimensions. This example demonstrates modular component reuse with React and D3.

GGordon Yang

96% match

Loading thumbnail…

Fork of Smiley Face Part V

A yellow smiley face is rendered as an SVG graphic, composed of a circle, two eyes, and an arc-based mouth. The example demonstrates modularizing React components by splitting the face into separate files—`BackgroundCircle`, `Eyes`, and `Mouth`—using ES6 modules and React Fragments. The `Mouth` component uses `d3.arc()` to generate a path. The `index.js` file assembles these components within an SVG, using fixed pixel dimensions and predefined constants for positioning and sizes.

AAnthoVDO

96% match

Loading thumbnail…

Fork of Smiley Face Part V

A modular React smiley face is rendered as an SVG, centered on a yellow circle with black stroke, two eyes, and an arc-based mouth. The code splits components into separate files using ES6 modules, with React Fragments grouping the eyes. It uses `react` and `react-dom` for rendering, and the D3 `arc` generator from `d3` to create the mouth path. All dimensions are defined as constants in `index.js`, and the app mounts to a root div in the HTML.

Aaniosindustries

96% match