Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Smiley Face

✓ Published0🌍 Public
Eelena
Last edited Jan 4, 2022
Created on Jan 4, 2022

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.

AI-generated description

Smiley face implementation with React & D3.

MIT Licensed

Similar vizzes

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

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.

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

Fork of Smiley Face Part V

This example renders a yellow smiley face as an SVG graphic using React components and D3.js. It shows a circle background, two eyes, and a curved mouth, all positioned relative to a central point. The code splits React components into separate files, including a `BackgroundCircle`, `Eyes`, and `Mouth` that uses D3's `arc` function to generate the mouth path. The React application computes center coordinates and offsets to place the features, and renders the final composition within an SVG element.

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