Skip to main content
SimilarExport ZIP
100%

Modular Smiley - Part IV - React-JS

✓ Published1🌍 Public
MMarcus Vinicius da Silveira Richa
Last edited Jan 6, 2022
Created on Jan 6, 2022

This example shows a modular smiley face built with React and D3, rendered as SVG. It separates the face into reusable components: a yellow background circle, two eyes, and a mouth drawn with D3's `arc` generator. The components are positioned using SVG `<g>` transforms for translation. The code uses D3 v7's `arc()` function to create the mouth path and React 17 for component composition, with `ReactDOM.render` mounting the app to the root element.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Modular Smiley - Part V - React-JS

The Modular Smiley face renders a yellow circular background with two eyes and an arc-shaped mouth using React components and SVG. The mouth is generated with d3.arc using an inner radius, outer radius, and specific start and end angles. The code uses React functional components and ReactDOM.render to mount the visualization to the DOM. The SVG grouping element with a translate transform positions the eyes and mouth relative to the face center, while the background circle uses computed radius and stroke-width values.

MMarcus Vinicius da Silveira Richa
96% match
Loading thumbnail…

Modular Smiley - Part VI - React-JS

A grid of randomly generated SVG smiley faces, each built from modular React components, fills the canvas. The code assembles each face from separate `BackgroundFace`, `Eye`, and `Mouth` components, with the mouth created using the d3 `arc` generator for a precise half-circle path. Each face receives randomized values for stroke width, eye offset, eye radius, and mouth dimensions, producing a playful variety of expressions. All faces are rendered inside a single SVG container, with each face positioned using a group transformation.

MMarcus Vinicius da Silveira Richa
93% match
Loading thumbnail…

Smiley Face Part III

This example shows a modular, parameterized smiley face drawn with React and SVG. A yellow circle forms the head, with two black eyes and a curved mouth generated from a D3 arc path. The code builds the face from reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`, composed inside a `FaceContainer` that handles the SVG viewport and coordinate translation. The `Mouth` component uses D3’s `arc` API to create a semicircular path, while the overall face dimensions and feature placements are controlled via props passed to the `Face` component.

BbeauMarko
92% match
Loading thumbnail…

Smiley Face Part 1

This example demonstrates a modular React-based smiley face composed of separate components for the background circle, eyes, and mouth. The face is centered within an SVG canvas, with the mouth drawn using a d3 arc path with inner and outer radii. The visualization highlights a component-driven approach, where each facial feature is a reusable React function component, and the SVG rendering is managed through JSX. The code uses d3.v6 for the arc generator and React 16.9 for the component structure, with all elements rendered as SVG.

RRoger Olson
91% match
Loading thumbnail…

Smiley React Components & ES6

This example shows a modular smiley face built entirely from reusable React components, with separate Eye, Face, and Mouth elements composed into an SVG scene. It demonstrates how D3’s `arc()` generator creates the mouth’s curved path, while React’s props pass geometric values like eye offsets, radius, and stroke width. The code relies on React 18 and ReactDOM for rendering, D3 v7 for the arc, and SVG for all visual output. The face is centered at the viewport midpoint, with the mouth angle fixed between 120 and 240 degrees.

ZZoe Ferencova
91% 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
91% match
Loading thumbnail…

Smiley Face Part 6

This example shows a smiley face constructed from modular React components. A yellow circle forms the background, with two smaller circles for the eyes and a D3-generated arc for the mouth, all positioned within an SVG canvas using an SVG group and translate transform. The code uses React for component composition, D3 v5’s `arc()` API to create the mouth path, and D3’s random-looking data to format arcs. It appears as a single frame from a series exploring incremental assembly of the face.

Mmaxthamt
91% match
Loading thumbnail…

Fork of Smiley Face Part V

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.

AAbin
91% match