Skip to main content
SimilarExport ZIP
100%

Fork of Smiley Face ICE

✓ Published0🌍 Public
JJerlineJJ
Last edited Feb 20, 2022
Created on Feb 20, 2022

This example shows a yellow smiley face composed of a large background circle, two eyes, and a curved mouth, all rendered as SVG elements. React manages the component structure, while D3’s `arc` function generates the mouth path using specified inner and outer radii and start/end angles. The `BackgroundCircle` component is a reusable React piece, and the entire graphic is centered via a `<g>` transform. The code uses React 16.9, D3 v5, and the `arc` API, with no external data source.

AI-generated description

Smiley face implementation with React & D3, using a React component.

MIT Licensed

Similar vizzes

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

Fork of Smiley Face Part IV

This example shows a yellow smiley face with two black eyes and a thick smile, rendered as an SVG graphic. The face is constructed using React components that wrap D3 shape functions, with circles for the eyes and a path generated by `d3.arc()` for the mouth. The `BackgroundCircle` component defines the main head, while the SVG coordinate system is centered using a transform. The code uses D3 v5 and React 16.9, with all dimensions and positions defined as constants.

Aaishwaryshivgan
93% match