Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
RReymond Mesuga
Last edited Mar 9, 2021
Created on Mar 9, 2021

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.

AI-generated description

Smiley face implementation with React.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 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.

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

This visualization shows a simple smiley face composed of a yellow circle, two eyes, and a curved mouth, rendered as SVG elements centered on a 960 by 500 canvas. The React component uses D3’s `arc` generator to create the mouth path with specified inner and outer radii and angular extents. React 16 renders the SVG structure, while D3 v5 supplies the arc calculation, with all positioning handled through translation and fixed pixel offsets.

Aawarczak
94% 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
94% match
Loading thumbnail…

Fork of Fork of Smiley Face

This example shows a yellow smiley face rendered as an SVG, composed of a background circle, two eyes, and a mouth arc. The React components (`BackgroundCircle`, `Eyes`, `Mouth`) are wrapped in a `FaceContainer` that translates the graphic to the center of a 960×500 viewport. The mouth uses D3’s `arc` generator to create a curved path, while the remaining shapes are plain SVG circles. The code imports React, ReactDOM, and D3 v5, and positions all elements via fixed offsets and radius constants.

Eelena
93% match
Loading thumbnail…

Fork of Smiley Face Part II

The example renders a static smiley face composed of SVG circles and an arc-based mouth, built from reusable React components (Face, Eyes, Mouth, BackgroundCircle). It visualizes a fixed facial geometry with yellow background, black-outlined eyes, and white highlights. The code uses D3's `arc()` generator to construct the mouth path and React state to track mouse position, which draws an additional black circle on screen that follows cursor movement. The visualization demonstrates component composition and event handling in React combined with D3 shape utilities, though the face itself does not react to user interaction.

TToonysg
93% 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
93% 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
93% match