Skip to main content
SimilarExport ZIP
100%

Fork of smiley face refactoring into react components

✓ Published1🌍 Public
Ddmr
Last edited Nov 13, 2021
Created on Nov 13, 2021

This example demonstrates a modular React approach to rendering a smiley face using SVG. The `Face` component composes `BackgroundCircle`, `Eyes`, and `Mouth` components, each receiving explicit props for positioning and sizing. The `FaceContainer` renders the SVG wrapper and a translated `<g>` group, while `Mouth` uses `d3.arc` to generate a path for a smile. Hardcoded offsets from earlier versions are replaced with configurable numeric props passed from a top-level `App` component, which renders the face into the DOM via `ReactDOM.render`.

AI-generated description

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

See also React Starter.

extra notes

Smiley face part 1 uses svg to create the face and two eyes but we need to be able to use some math to set items out without hard coding all the x and y offsets

so it's time for REACT

In this fork:

  • refactor the drawing elements like circle into React components with meaningful names
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 and React Smiley

This example demonstrates a modular React component approach to rendering a smiley face using SVG. The `Face` component composes separate `BackgroundCircle`, `Eyes`, and `Mouth` sub-components, with the mouth drawn using D3’s `arc` generator with specified inner and outer radii and start/end angles. The face is positioned within an SVG container via a `<g>` transform, and all visual properties—such as eye offset, radius, and stroke width—are passed as props from the top-level `App` component. React renders the SVG declaratively, while D3 handles the geometric path calculation.

GGordon Yang
92% match
Loading thumbnail…

Fork of Smiley Face Part III

This example shows a modular, reusable smiley face built as a React component hierarchy, composed of separate circle and arc elements for the background, eyes, and mouth. It demonstrates how to combine React’s declarative component model with D3’s `arc` generator to produce SVG shapes. The `Face` component assembles the `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents, with all geometry controlled via props such as `eyeOffsetX`, `eyeRadius`, and `mouthRadius`. The resulting SVG is rendered to the DOM using `ReactDOM.render` with fixed pixel dimensions.

KKonstantinos Kotsiaridis
92% match
Loading thumbnail…

smiley face refactoring into react components

This example displays a smiley face built from a yellow circle, two eyes, and a curved mouth, rendered as SVG. The code refactors drawing primitives into named React components like `BackgroundCircle`, `Eyes`, and `Mouth`, with `Face` orchestrating their layout and `FaceContainer` providing the SVG canvas. It uses React for component composition and d3’s `arc` function to generate the mouth’s path. Properties such as eye offset and mouth radius are passed as parameters, enabling flexible geometry without hard-coded coordinates.

Ddmr
91% match
Loading thumbnail…

Fork of Smiley Face Part III

This example shows a modular, component-based smiley face built with React and rendered as SVG. The face’s features are separated into reusable components—FaceBackground, Eyes, and Mouth—each accepting props for size, position, and styling. The mouth uses D3’s `arc` generator to create a curved path, while the face background is a simple circle with a yellow fill and black stroke. The app assembles these components in `index.js`, passing fixed dimensions and coordinates to create a single centered face on a 960×500 canvas.

MMateus Marodim
91% 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
91% match
Loading thumbnail…

Fork of Smiley Face Part V

This example renders a smiley face as a reusable set of React components, splitting the drawing across separate files for the background circle, eyes, and mouth. Each component receives its geometry through props, and the main SVG is assembled in `index.js` using React DOM. The mouth is generated with the `d3.arc()` generator, while the eyes and background are plain SVG circles. The code uses React 16.9.0 and d3 v5, with the face centered on a 960×500 viewport.

Yyungchiau
90% match
Loading thumbnail…

Fork of Smiley Face Part V

This example renders a smiley face as a reusable set of React components, splitting the drawing across separate files for the background circle, eyes, and mouth. Each component receives its geometry through props, and the main SVG is assembled in `index.js` using React DOM. The mouth is generated with the `d3.arc()` generator, while the eyes and background are plain SVG circles. The code uses React 16.9.0 and d3 v5, with the face centered on a 960×500 viewport.

Yyungchiau
90% match
Loading thumbnail…

Fork of Smiley Face Part III

This example displays multiple smiley faces rendered as React components, each built from reusable SVG parts for the background circle, eyes, and mouth. It demonstrates component composition and parameterization, varying face size, stroke width, eye radius, and mouth dimensions across instances. The faces are generated using D3’s `range` function to create ten iterations, while the mouth shape relies on D3’s `arc` generator with specific start and end angles. The SVG output is produced through React’s declarative rendering, with a `FaceContainer` managing the central translation transform for each face.

AasafJortilles
90% match