Fork of Sad Face

100%

Fork of Sad Face

✓ Published1🌍 Public

Last edited Feb 20, 2022

Created on Feb 20, 2022

Forked from Sad Face

A yellow circle with black eyes and a curved mouth forms a static, unhappy face. The visualization uses React to compose SVG elements, including a circle for the head and two offset circles for the eyes. The mouth is drawn using D3’s `arc` generator, which creates a path with specified inner and outer radii and angular start and end points, rendered as an SVG path.

AI-generated description

Half way towards a Smiley Face

MIT Licensed

Similar vizzes

Loading thumbnail…

Sad Face

A sad face rendered in SVG using React and D3. The visualization shows a yellow circle with black outline as the face, featuring two black circular eyes positioned symmetrically, and a downward-curving mouth arc. The code uses `d3.arc` to generate the mouth path, with React components for the background circle and eyes. D3 v6 and React 17 are loaded via UMD, and the final drawing is produced by rendering SVG elements to the DOM.

KKolliSaiTeja

91% match

Loading thumbnail…

Sad Face

A gray circle with a yellow outline serves as the face, featuring two small, colored eyes (red and blue) positioned symmetrically above the center. A separate arc path below creates a frown, representing a sad expression. The visualization uses React with D3’s `arc` generator to compute the mouth path, drawing it with an SVG `<path>` element. The face, eyes, and mouth are rendered as SVG shapes within a React component, using D3’s arc API for the curved mouth geometry.

KKolliSaiTeja

90% match

Loading thumbnail…

Sad Face

A yellow circle with a black outline and two black eyes forms a sad face. The mouth is drawn as an arc using the `d3.arc` API, with its inner and outer radii set via `d3.arc()` and a path element. The face is built with React components rendering SVG elements, including circles for the background and eyes. The `arcCenterX` and `arcCenterY` variables position the mouth separately from the face’s center, while the stroke width is defined as a constant.

KKolliSaiTeja

89% match

Loading thumbnail…

Fork of Fork of smiley face

A yellow smiley face rendered as a static SVG using React and D3. The code creates a face with a yellow circular background, two black eyes positioned symmetrically, and a smiling mouth drawn with D3's `arc` generator. The mouth arc uses specified inner and outer radii and angles to create a half-circle path, translated to the center of the face. The visualization is built with React components and D3's `arc` API, rendered directly into an SVG element within a React application.

KKeerthipriyaBankuru

88% match

Loading thumbnail…

Fork of Fork of smiley face

A yellow smiley face is drawn as a static SVG graphic, centered on a 960 by 500 canvas with a black outline, two black eyes, and a curved mouth. The face is built using React components that return SVG elements, while the mouth’s arc path is generated with the D3 `arc` function using inner and outer radii and specified start and end angles. D3 v7 and React 18 render the visualization, with hard-coded constants for eye offset, radius, and stroke width.

Aavinashchinta99

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

88% match

Loading thumbnail…

Fork of Not so Smiley

This example shows a yellow circle with two black eyes and a curved mouth, creating a partial smiley face where the mouth arc is offset from the center. It is built with React 17 and D3 v6, using the `arc` function from D3 to generate the mouth path. The SVG is rendered with explicit width and height, and elements are positioned using transformation translations. The background circle, eyes, and mouth are drawn as separate SVG shapes, with the mouth placed in a distinct group at a specific coordinate rather than centered with the face.

Kkiruthiga1304

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

88% match