Sad Face

100%

✓ Published1🌍 Public

Last edited Feb 20, 2022

Created on Feb 20, 2022

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.

AI-generated description

Half way towards a Smiley Face

MIT Licensed

Similar vizzes

Loading thumbnail…

Sad Face

A simple SVG face built with React and D3, rendered as a green circle with orange stroke, two black eyes, and an orange mouth arc. The eyes sit at symmetric offsets above the center, while the mouth is drawn separately using a D3 `arc` path generator positioned lower on the canvas. The code defines geometric constants for size and placement, then constructs the face from basic SVG shapes. It demonstrates combining React components for layout with D3’s `arc()` API to generate path data for the sad expression.

Vvarun-030

93% match

Loading thumbnail…

Sad Face

A sad face rendered as an SVG using React and D3's arc generator. The code draws a red circle head with a black stroke, two small circular eyes, and a downward-curving mouth created by an arc path rotated 180 degrees. The face is centered on a 960 by 400 pixel canvas, with all shapes positioned using D3's arc and React's JSX syntax.

Aavinash021997

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

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

93% match

Loading thumbnail…

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

KKolliSaiTeja

91% match

Loading thumbnail…

Sad

This example renders a minimalist, sad-faced emoji as a static SVG graphic. A large yellow circle forms the head, outlined in black, with two smaller black circles positioned as eyes and a crescent-shaped path as a downturned mouth. The visualization is built using React and d3.v7, leveraging d3’s `arc` generator to construct the mouth’s path geometry with specified inner and outer radii and angular spans. The SVG elements are composed within a React component, using precise coordinates and transforms to place facial features symmetrically around the canvas center.

JJosh Zalcman

89% match

Loading thumbnail…

Face 3

A smiling face rendered as an SVG using React and D3, with a yellow circular background, two black eyes, and a curved mouth. The D3 arc generator defines the mouth's shape by setting inner and outer radii and start and end angles. React components structure the drawing, with a BackgroundCircle component and an Eyes component placed inside a translated group element, while D3 v6 provides the arc path calculation.

Eequiilibriumdigital

89% match

Loading thumbnail…

Saddy Face

A yellow circle spans the SVG canvas, serving as a saddy face with a curved, downward mouth and two arc-shaped eyes. The face is constructed using D3’s `arc` generator to define the mouth and eye paths, while React renders the SVG elements. The mouth arc uses a negative start angle and positive end angle to create a frown, and the eye arcs are positioned on either side of the face. The background circle is drawn with a yellow fill and black stroke, and the entire composition is centered via SVG transforms.

Yyastika

88% match