Fork of Smiley Face Part I

100%

Fork of Smiley Face Part I

✓ Published0🌍 Public

Last edited Jan 26, 2022

Created on Jan 26, 2022

This example shows a stylized smiley face composed of a yellow circular background, two black eyes, and a curved mouth rendered as a thick arc. The face is built from modular React components, including `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`, which assembles the SVG output. The mouth uses the `d3-shape` library’s `arc()` generator to define its path, while the overall layout is positioned with SVG transformations. The result is a static, data-driven visualization created with React and D3 v7.

AI-generated description

Halfway towards a smiley face.

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 Part V

This example shows a stylized smiley face rendered as an SVG, composed of a yellow circle background, two black eyes, and an arc-shaped mouth. The face is built from modular React components, including `BackgroundCircle`, `Eyes`, and `Mouth`, which are split into separate ES6 module files. The `Mouth` component uses the `d3.arc()` API to generate a path for the smile, while React Fragments allow the `Eyes` component to return multiple sibling circles without extra DOM nodes. All elements are positioned and scaled through React props, with the final SVG drawn inside a React-rendered `<g>` container.

RRob-Colon

96% match

Loading thumbnail…

Fork of Smiley Face Part I

This example shows a stylized smiley face rendered as an SVG graphic. A yellow circle forms the background, with two black eyes positioned symmetrically and a curved mouth drawn using an arc path. The visualization is built with React components, where each facial feature is a separate component (BackgroundCircle, Eyes, Mouth). D3’s `arc` API generates the mouth’s path, while React renders the SVG elements within a transformed coordinate system centered on the canvas.

JJosipa Puljko

95% match

Loading thumbnail…

Fork of Smiley Face Part One

This example shows a stylized smiley face rendered as a static SVG graphic, composed of a yellow background circle, two eyes, and a curved mouth. The face is centered on a 960 by 500 canvas using a React component tree that composes reusable subcomponents for each facial feature. The code leverages React 17 and D3 v7, specifically using the `arc()` generator from the `d3` module to create the mouth’s path. All shapes are drawn with SVG circles and paths, with positions and sizes defined by constants passed as props.

JJosephStalnaker

95% match

Loading thumbnail…

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

Aadante111

95% match

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a stylized smiley face centered in an SVG canvas, composed of a yellow background circle, two black eyes, and a D3-generated arc for the mouth. The React components `BackgroundCircle`, `Eyes`, and `Mouth` each render simple SVG shapes, with the mouth path created using the D3 `arc()` API. The face is positioned via an SVG `<g>` transform, and the code uses React 16 and D3 v5 to assemble the static visualization, with dimensions and offsets defined as constants. The final output is a fixed, non-interactive SVG graphic.

AAoibhinnRed

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

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

95% match