Skip to main content
SimilarExport ZIP
100%

Sad

✓ Published0🌍 Public
JJosh Zalcman
Last edited Mar 4, 2022
Created on Mar 4, 2022
Forked from Smiley

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.

AI-generated description

A bare minimum HTML page.

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
89% 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
89% 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
88% match
Loading thumbnail…

Sad smiley face with D3.js

This example shows a simple, static sad smiley face rendered as a yellow circle with black eyes and a downward-curving arc for a mouth, all drawn in SVG. The face is centered in a 960×500 viewport, with the eyes and mouth positioned using translate transforms. Built with D3 v5, the code uses `d3.select` to target the SVG and `d3.arc` to generate the mouth path, while circle elements are appended directly for the head and eyes. No animation or interaction occurs; the visual is purely geometric.

Aabdulmoin9624
88% 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
88% 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
88% 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
87% match
Loading thumbnail…

Sad Face

A stylized sad face rendered with D3 v5 draws a large orange circle for the head, adds elliptical eyes with white highlights, and forms a nose using the `d3.arc` path generator. The shape includes a small mouth ellipse, and the eyes animate through a chained `transition` with specified delays and durations, shifting positions before returning. The SVG elements are grouped and positioned within a 900x700 canvas, with the entire face translated upward. This example demonstrates basic SVG shape creation and declarative animation sequencing in D3.

NNita
87% match