Skip to main content
SimilarExport ZIP
100%

Fork of Smiley Face Part 1

✓ Published1🌍 Public
Aadante111
Last edited Aug 11, 2023
Created on Aug 1, 2023
Forked from Smiley Face Part 1

A yellow smiley face is rendered with React and SVG, featuring a black-outlined circle, two eyes, a blue line for the nose, and a mouth drawn as an arc. The face organizes its parts using the `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` components, with coordinates transformed via an SVG `<g>` group. The D3.js library contributes the nose's line path and the mouth's `arc()` geometry, while the container is sized by the `FaceContainer`. The example appears to be a static composition, as no interactive mouse handling is active in the final render.

AI-generated description

Half way towards a smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley face Part 1

A yellow smiley face drawn with SVG circles and an arc for the mouth, centered on a 960×500 canvas. The React components compose the face from a background circle, two eyes, and a mouth, with all positions and sizes passed as props. D3’s `arc` generator creates the mouth path using an inner and outer radius with fixed start and end angles. The `FaceContainer` wraps the elements in a translated SVG group, and the example is rendered with React 18 and D3 v7.

Ppuru001
96% match
Loading thumbnail…

Fork of Smiley Face Part I

A yellow smiley face rendered with SVG appears at the center of a 960×500 canvas, showing a circle for the head, two black eyes at fixed offsets, and a semi-circular mouth drawn as an arc. The example uses React 18 to manage the component structure while leveraging D3 v7’s `arc` generator to create the mouth path with inner and outer radii. All shapes are positioned via a translated `<g>` group, with stroke styling applied directly to SVG circle elements.

Nnj889
96% match
Loading thumbnail…

Fork of Smiley Face Part I

A stylized smiley face rendered as SVG, where a yellow circle serves as the head with two black eyes and an arc-shaped mouth. The mouth uses `d3.arc()` with inner and outer radii to create a thick, rounded stroke, positioned via the `path` element. The head and eyes are drawn with `circle` elements, all centered using a React transform group. The code imports React, ReactDOM, and the `arc` function from d3 v5, and renders the composition as a reusable React component.

Ppkrupp
96% match
Loading thumbnail…

Fork of Smiley Face Part V

A yellow smiley face is rendered as an SVG graphic, composed of a circle, two eyes, and an arc-based mouth. The example demonstrates modularizing React components by splitting the face into separate files—`BackgroundCircle`, `Eyes`, and `Mouth`—using ES6 modules and React Fragments. The `Mouth` component uses `d3.arc()` to generate a path. The `index.js` file assembles these components within an SVG, using fixed pixel dimensions and predefined constants for positioning and sizes.

AAnthoVDO
95% match
Loading thumbnail…

Fork of Smiley Face Part 1

A vector smiley face is rendered as a yellow circle with a black outline, two eyes, and a curved mouth, all built from composable React components. The Face component assembles a FaceContainer SVG, a BackgroundCircle, Eyes, and Mouth. The mouth uses the D3 arc generator to create a semicircular path, while the overall composition is placed using a translate transform. The example demonstrates a modular approach to constructing SVG graphics with React and D3.

VVIBHANSHU RAI
95% match
Loading thumbnail…

Fork of Smiley Face Part I

A smiling face is drawn in yellow with black outlines: a circular head, two eyes, and a curved mouth. The visualization is built using React and rendered as SVG. The code leverages D3’s `arc` function to generate the mouth’s path, while circles and path elements are defined directly in JSX. The composition is centered with all coordinates calculated relative to the middle of the canvas. No data source is used.

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