Angry Face

100%

✓ Published0🌍 Public

Last edited Sep 19, 2019

Created on Sep 5, 2019

A pink angry face is drawn as an SVG graphic centered on a 960-by-500 canvas. The face uses a large circle for the head, ellipses for eyes, and an arc to create a frown, while red cubic Bézier paths form slanted eyebrows. The visualization is built with React, rendering SVG elements, and relies on the `arc` generator from D3 v5 to compute the mouth shape. Static, hardcoded coordinates define each facial feature.

AI-generated description

By learning the basic knowledge of data visualization and the basic application of D3, I simply made a pink angry face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Angry Face

A stylized angry face built with React and D3 v7 rendered as SVG. D3’s `arc` generator creates the frown-shaped mouth, while React elements define the red circular head, black stroke, angled eyebrows, and pink blush details. The face is centered using SVG groups and transforms, with all geometry computed from fixed constants rather than external data.

Bbenpedroscott

92% match

Loading thumbnail…

Angry face

A yellow, angry face rendered with custom SVG shapes shows furrowed brows, menacing eyes with detailed irises and highlights, and a wide, clenched-teeth grimace. The face is built from React components, including separate `Eyes` and `Smile` modules, which are composed within an SVG canvas. Styling relies on CSS classes defining fills, while React renders the structure using JSX elements like `ellipse`, `path`, and `circle`.

KK V VINITHA

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

85% match

Loading thumbnail…

face

This example displays a stylized smiley face rendered as an SVG graphic, featuring a pink circular head, green eyes with pupils, and a black arc-shaped mouth. Built with React and D3 v7, it uses the `d3.arc()` API to generate the mouth path, while positioning all other facial elements—including circles, ellipses, and lines—through hard-coded coordinates. The face is centered within a fixed 900×500 viewport, with facial features arranged symmetrically to create a playful, static illustration.

Aachalasam

84% match

Loading thumbnail…

Happy Face

Built with React and rendered as SVG, this example shows a cheerful cartoon face—a yellow circle with black outlines, white-and-black eyes, a nose arc, and a smiling mouth—centered on a 960-by-500 canvas. The face is composed of modular React components (BackgroundCircle, Eyes, Nose, Mouth) that accept properties like eyeOffset and mouthRadius, while a FaceContainer uses an SVG group transform to position everything. D3’s `arc()` generator creates the mouth and nose paths, and the graph also relies on D3 v7, React 16.9, and inline SVG attributes like `stroke-width` for styling.

JJenna Hamza

84% match

Loading thumbnail…

Angry Red Metal Face

This example shows a stylized angry face rendered as an SVG, with two eyes and a curved mouth on a red circular head. D3.js v5 manipulates the DOM by selecting the SVG element and appending grouped shapes, including circles for the face and eyes, rectangles for the eyebrows, and a path generated with the `d3.arc` API for the mouth. The code uses explicit attribute setters like `.attr()` to position and style each element, creating a static, geometric portrait.

Ssyedhaliz

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

84% match

Loading thumbnail…

An Excited face

A smiley face is rendered as a static SVG graphic, with a pink circular head, white eyes with blue-outlined black pupils, a red nose, green-outlined mouth, and multi-colored lines for eyebrows and hair. The face conveys an excited expression through its raised brow lines and open mouth shape. Built with React and D3 v7, the visualization uses D3's `arc` generator to create the mouth path and SVG primitives like `circle`, `ellipse`, and `line` for all other features. All elements are positioned relative to the center using SVG transforms.

AAnanyaSamala

84% match