Fork of Smiley Face Part II && III

100%

Fork of Smiley Face Part II && III

✓ Published0🌍 Public

Last edited Mar 7, 2022

Created on Mar 7, 2022

This example shows a stylized smiley face constructed from modular React components, rendered as SVG. The face combines a yellow background circle, two eyes, and an arc-based mouth, all positioned relative to a central coordinate system. The implementation uses React 17 for component composition and d3’s `arc()` generator to create the mouth path. The `FaceContainer` wraps the SVG and applies a translation transform, while the app passes explicit dimensions and offsets to control the face’s layout.

AI-generated description

Half way tour to smiley face.

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Fork of Smiley Face Part III

A modular React component renders a yellow smiley face using SVG primitives within a 960×500 viewport. The face composition breaks down into discrete components: a yellow background circle with black stroke, two black eyes, and a mouth shaped by D3's `arc` generator with a fixed inner radius and a half-turn angular span. The `FaceContainer` handles the SVG wrapper and central translation. D3 v5 provides the arc geometry while React manages component state and rendering, with all face features parameterized through props like `eyeOffsetX`, `eyeRadius`, and `mouthRadius`.

AAriana

95% match

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a smiling face constructed from a yellow circle, two black eyes, and a curved mouth, all rendered as SVG within a React component. The face is built from separate React components for the background, eyes, and mouth, which are composed inside a central `FaceContainer` that translates the drawing to the center of a 960×500 canvas. The mouth is drawn using the `d3.arc` API to generate an arc path with defined inner and outer radii and angled endpoints, while the other shapes are simple SVG circles.

SS-Zins

95% match

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a smiley face using React components and SVG primitives, with a yellow circle for the head, two black eyes, and a curved mouth. The mouth is generated with the D3 `arc()` generator, which defines an annular sector path based on inner and outer radii and start/end angles. The face is centered within a 960×500 viewport, and all elements are positioned via a `<g>` transform. The code imports the `arc` function from D3 v7 and uses React 16.9 for component structure, while the SVG is drawn directly in JSX.

Pplusbeauxjours

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

95% match

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a stylized smiley face built as a React component, rendered as vector graphics in an SVG canvas. The face uses a yellow circle with a black stroke for the head, two dark circles for asymmetrical eyes, and a curved arc as the mouth. The code leverages React’s declarative JSX for structure, while the `d3.arc` API generates the mouth path with defined inner and outer radii and angular range. All positions and dimensions are computed from fixed constants, and the entire scene is centered via an SVG group transform.

Ssrosegger

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

95% match

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face with black-outlined circular eyes and a curved mouth, rendered as an SVG inside a React application. The face is composed of modular React components, with a yellow background circle, two eye circles, and a mouth path generated using the d3.arc API. The d3 arc function creates the mouth’s crescent shape by specifying inner and outer radii and start and end angles, while the FaceContainer component positions the entire group using an SVG transform. The code relies on D3 v7 for arc generation and React for component-based structuring.

Kkan qiu

95% match