Skip to main content
SimilarExport ZIP
100%

Fork of Smiley face

✓ Published0🌍 Public
KKibegwa
Last edited Mar 22, 2021
Created on Mar 21, 2021
Forked from Smiley face

A smiling face renders in SVG on a yellow circular background with a black stroke, open black eyes, and an arc-shaped mouth. The example composes three React components: BackgroundCircle, Eyes, and Mouth, with the mouth generated using d3’s `arc` function to create a path from specified inner and outer radii and start/end angles. The visualization is built with React and D3 v6, positioned via SVG transforms in a 960×500 viewport, and demonstrates a modular approach to constructing a simple graphic from reusable parts.

AI-generated description

Half way towards smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of A Smiley Face

A smiley face is displayed as a yellow circle with black outline, two eyes, and a curved mouth, all centered in an SVG canvas. The visualization demonstrates how React components encapsulate parts of a D3 graphic: `BackgroundCircle`, `Eyes`, and `Mouth` are separate functional components. The mouth uses the `d3.arc()` API with start and end angles to create a half-circle path. React 18 renders the SVG, with D3 v7 providing the arc generator. All elements are repositioned via a single SVG `g` transform.

Bbela
96% 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
96% match
Loading thumbnail…

Fork of Smiley Face Part V

This example shows a yellow smiley face composed of a circular background, two eyes, and a curved mouth, all rendered as SVG elements in a React application. The visualization is built from separate ES6 module components, including a `BackgroundCircle`, `Eyes`, and `Mouth`. The code uses React (version 16.9) and D3’s `arc` API to generate the mouth’s path, with all shapes positioned relative to a central transform group. The static image uses hardcoded dimensions and coordinates, with no interactive or data-driven behavior.

PPatrick Byron Gattoc
96% match
Loading thumbnail…

Fork of Smiley Face Part V

This example shows a yellow smiley face rendered as an SVG, composed of a circular background, two eyes, and an arc-shaped mouth. The React components are split into separate ES6 module files, with the mouth’s path generated using D3’s `arc` generator. The face is centered via an SVG `<g>` transform, with all dimensions (eye offsets, radii, stroke width) passed as props. The visualization uses React 16.9, D3 v5, and plain SVG elements, with no external data source.

AAnkit-Ian-53787
96% match
Loading thumbnail…

Fork of Smiley Face Part V

This example shows a yellow smiley face rendered as an SVG, composed of a circular background, two eyes, and an arc-shaped mouth. The React components are split into separate ES6 module files, with the mouth’s path generated using D3’s `arc` generator. The face is centered via an SVG `<g>` transform, with all dimensions (eye offsets, radii, stroke width) passed as props. The visualization uses React 16.9, D3 v5, and plain SVG elements, with no external data source.

AAnkit-Ian-53787
96% match
Loading thumbnail…

Fork of Smiley Face

A smiley face rendered as a yellow SVG circle with black outline, two black eyes, and a curved mouth. Built with React and D3 v5, the visualization uses a reusable `BackgroundCircle` component for the face and D3's `arc` generator to create the mouth path. All shapes are positioned relative to the SVG center using a translation transform, with fixed offsets for the eyes and radii for the mouth.

Eelena
96% match
Loading thumbnail…

Fork of Smiley Face Part V

The example shows a smiling face rendered as SVG using React components, with a yellow circular background, two eyes, and a curved mouth. The code splits the visualization into separate ES6 modules—BackgroundCircle, Eyes, and Mouth—each defined as a React functional component. The mouth uses the d3.arc() API to generate its path with specified inner and outer radii and angle ranges, while React Fragments group the eye elements. The overall layout is centered within an SVG coordinate system defined by width and height constants.

Ssimrangajsinghani
96% match
Loading thumbnail…

Fork of Smiley Face Part V

This example shows a smiley face rendered as an SVG graphic, centered on a yellow circle with black stroke, two eyes, and a curved mouth. The React components—BackgroundCircle, Eyes, and Mouth—are split into separate ES6 module files, using React Fragments to group elements. D3’s arc generator creates the mouth path, while constants define the layout. The visualization is purely illustrative, with no data source, and uses d3.v5 alongside React 16.9.

Hhenry c
96% match