Skip to main content
SimilarExport ZIP
100%

Sad Face

✓ Published0🌍 Public
KKolliSaiTeja
Last edited Feb 20, 2022
Created on Feb 20, 2022
Forked from Not so Smiley 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.

AI-generated description

Half way towards a Smiley Face

MIT Licensed

Similar vizzes

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
95% match
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
93% match
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
91% 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
90% 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
89% 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
88% 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
86% match
Loading thumbnail…

sad

This example draws a simple sad face in SVG using D3.js v7, depicting a yellow circle with eyes, eyebrows, and a frown-shaped arc mouth. The animation shows the eyebrows moving up and down repeatedly via chained `transition()` calls with duration and `.attr()` updates. The geometry is built with D3’s `arc` generator for the mouth and basic SVG shapes like `circle` and `rect`, all centered within a 960×500 viewport.

Ddharmithila2002@gmail.com
86% match