Skip to main content
SimilarExport ZIP
100%

Anguish

✓ Published0🌍 Public
KK V VINITHA
Last edited Feb 17, 2022
Created on Feb 17, 2022

This interactive data-visualization piece renders an anguished face using React and SVG, combining a yellow circular face with custom-designed eyes and a mouth. The eyes feature layered ellipses, pupils, and highlights, while the smile contains complex path shapes with multiple color fills. The visualization is built with React 16.9.0, using functional components like `Eyes.js` and `Smile.js`, and imports ReactDOM to render the SVG elements onto the page. The code applies CSS classes for styling and transforms to position the facial features.

AI-generated description

Smiley face implementation with React.

MIT Licensed

Similar vizzes

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

Data Visualization

A red circular face with black outlines is rendered in SVG, featuring exaggerated cartoon eyes and a wide smiling mouth. The visual is composed of two React components, `Eyes` and `Smile`, which are nested inside an SVG element created with React and ReactDOM. The components use SVG ellipses, paths, and circles to draw detailed, stylized facial features, with the overall layout positioned and scaled using SVG `transform` attributes.

PPriyakongani
81% match
Loading thumbnail…

Untitled

A yellow face is drawn as an SVG circle with white eyes and black pupils, a curved mouth, and small blue tear circles. The visualization is implemented in D3 v5 within a React framework, using `d3.select` to reference the SVG and appending elements like circles, rects, and a `d3.arc`-constructed path for the mouth. The eyebrows, styled as rectangles, animate downward over 2 seconds via D3 transitions, creating a frowning expression. The code specifies fixed pixel dimensions and positions for all facial features, rendering statically with no external data source.

PPatilShruti20
80% match
Loading thumbnail…

Data Visualization

A yellow circle with two black eye dots forms a simple smiley face, missing only the mouth to complete the expression. The visualization is rendered as static SVG shapes inside a fixed 960-by-500 viewport. It uses React 18, loaded via a UMD script tag, though the drawing itself is plain SVG markup rather than React-generated elements. The composition relies only on three circle elements, with no animation or interaction.

LLittlegreen8
79% 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
79% 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
79% match
Loading thumbnail…

Angry Face

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.

Gguangxinhu
78% match