Fork of Fork of Fork of Fork of Smiley Face Part II

100%

Fork of Fork of Fork of Fork of Smiley Face Part II

✓ Published1🌍 Public

Last edited Mar 9, 2021

Created on Mar 9, 2021

Forked from Fork of Fork of Fork of Smiley Face Part II

This example shows a scalable smiley face built from reusable React components, with its size and position adapting to the full browser window. The face consists of a yellow background circle, two black eyes, and a D3-generated mouth arc, all composed through nested functional components like `Face`, `BackgroundCircle`, `Eyes`, and `Mouth`. Rendering uses SVG within a React tree, while the mouth shape is created with the `d3.arc()` API, setting inner and outer radii and angular ranges. The code applies React 16.9 and D3 v6, with prop-driven customization for all facial features.

AI-generated description

Smiley face implementation with React.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Smiley Face Part II

A reusable React component renders a smiley face, composed of a yellow circular background, two eyes, and an arc-based mouth, all positioned dynamically within the SVG canvas based on window dimensions. The code uses d3's `arc` generator within the `Mouth` component to define the mouth path, while `FaceContainer` and related components manage SVG grouping and attribute passing. The example demonstrates a compositional approach to building SVG visualizations in React, with all shape properties—such as eye offset, radius, and stroke width—passed as props to the `Face` component.

RReymond Mesuga

95% match

Loading thumbnail…

Fork of Fork of Fork of Smiley Face Part II

A yellow smiley face with black-outlined circular background, eyes, and a curved mouth is rendered full-screen using React components. The face is centered dynamically based on window dimensions, with the mouth drawn using a D3 arc generator. React 16.9 and D3 v6 build the SVG structure, while the Face component composes reusable subcomponents like BackgroundCircle, Eyes, and Mouth.

RReymond Mesuga

95% match

Loading thumbnail…

Fork of Fork of Smiley Face Part II

A yellow smiley face spans the full browser window, rendered with React components that generate SVG circles and a D3-generated mouth path. The face is built from separate SVG elements: a large yellow circle with a black stroke, two eyes with white highlights, and a mouth drawn using d3.arc with inner and outer radii for thickness. The layout positions all features relative to the viewport center. The example uses React 16.9 for component structure and d3.v7 for the arc shape, with no external data source.

PPatrick Byron Gattoc

95% match

Loading thumbnail…

Fork of Fork of Smiley Face Part II

A smiley face is rendered as a full-screen SVG, with its size and position derived from the browser window dimensions. The face is composed of three React components: a yellow background circle, two eyes, and a mouth drawn using D3’s `arc` generator. The code uses React 16.9 for component structure, D3 v6 for arc calculations, and SVG for all visual output, with dimensions and offsets defined as constants in the main `App` component.

RReymond Mesuga

94% match

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-window smiley face using React and D3 v7. It shows a yellow face with black outline, two eyes, and a smiling arc, all positioned dynamically based on the browser viewport size. The code defines reusable React components like `FaceCircle`, `LeftEye`, `RightEye`, and `SmileArc`, with the latter using D3’s `arc()` generator to create the mouth path. SVG elements are drawn inside a `<g>` transform, and ReactDOM renders the composite face component into the page.

MMohammed Jumail Shibily

94% match

Loading thumbnail…

Fork of Fork of Smiley Face Part II

This example shows a large yellow smiley face rendered responsively to fill the browser window, with two black eyes and a thick outlined circular head. The visualization is built using React for component structure and D3.js v7 for utility functions, while all drawing occurs through SVG elements. The face is centered using a translation transform, with eye positions and radii defined as constants, and the mouth is omitted from the current implementation. The code dynamically calculates dimensions from `window.innerWidth` and `window.innerHeight`, ensuring the face scales with the viewport.

NNikhil

94% match

Loading thumbnail…

Fork of Fork of Smiley Face Part II - Exploring

This example renders a full-screen smiley face using React and D3, with the face centered and sized based on the browser window dimensions. The code constructs SVG circles and paths to draw the face, including a gradient-filled head, layered eyes with multiple colored components, and an arc-based mouth. The face is built using D3’s `arc` API to generate the mouth path, while React manages the SVG output and component structure. All elements are styled using SVG attributes directly in the React markup.

AAnthony Le

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

93% match