Surprised Emoji for submission

100%

Surprised Emoji for submission

✓ Published1🌍 Public

Last edited Mar 12, 2021

Created on Mar 12, 2021

This visualization displays a surprised emoji constructed with SVG shapes in a React application, using D3’s `arc` generator to form raised eyebrows. The face is built from layered circles for the head, eyes, and pupils, with an ellipse for an open mouth, all positioned via D3’s `arc` path. React renders the SVG, while D3 v6 calculates the curved eyebrow paths. The code leverages React’s `ReactDOM.render` to mount the component and D3’s `arc` API for precise arc geometry.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Surprised Emoji for submission

This visualization shows a stylized surprised emoji face rendered as SVG, with a yellow circular head, white eyes, black pupils, and an open mouth composed of two arcs. Built with React and D3 v6, the code uses D3’s `arc()` generator to create the mouth paths and React’s `ReactDOM.render` to mount the SVG to the DOM. The design hardcodes geometric values for radii, stroke widths, and positions, presenting a half-finished smiley face as a step toward a fuller expression.

Hharika-1929

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

79% match

Loading thumbnail…

Surprise face with D3

A yellow circle with black outlines forms a cartoon face composed of simple geometric shapes: two eyes, rectangular eyebrows, and a smile. Built with D3 v5, the visualization uses SVG elements, with the face centered via a transformed group. The eyebrows animate by transitioning their vertical position over two seconds, moving up and then settling back, creating a surprised expression. The mouth is drawn as an arc path using D3's `arc` API, and the animation is driven by the `transition().duration()` method.

EecoBela

79% match

Loading thumbnail…

emoji-like face with mouth (D3)

This example draws a yellow emoji-like face with two eyes and an open mouth in a circle, centered within an SVG canvas. The face is constructed entirely with React and D3’s `arc` generator for the mouth path, while the circle elements for the head and eyes use standard SVG properties. The visualization uses a fixed layout with computed constants for offsets and radius, and renders via React’s `ReactDOM.render`, with D3 loaded as a UMD module from unpkg.

Mmundembe

77% match

Loading thumbnail…

Surprised Face (HTML)

A surprised face rendered as a simple five-circle SVG drawing. The face consists of a yellow circular head with a black outline, two small black eyes, and an open white mouth with a black border. Built with inline SVG elements inside an HTML document, the visualization uses no external libraries. The code defines each circle with explicit `cx`, `cy`, and `r` attributes for positioning, while styling appears through fill and stroke properties. The page sets its body margin to zero and hides overflow, keeping the graphic centered within a 960-by-500 viewport.

SSonja Ek

77% match

Loading thumbnail…

React Starter

A cheerful cartoon face rendered in SVG shows a large yellow circle, two black eyes, and a dark arc-shaped mouth. The rectangular eyebrows animate upward and then back down over two seconds using chained D3 transitions. Built with React as the framework, the visualization uses D3 v5 selection methods, the `arc` generator for the mouth path, and `transition.attr` to update the eyebrow group’s transform.

Ddistortedlights

77% match

Loading thumbnail…

emoji-face with (D3)

This example renders a stylized emoji face as a scalable vector graphic using D3 and React. The face consists of a red circle with a yellow stroke, two black eyes, and a D3-generated arc path for the mouth. The drawing is centered within an SVG canvas using a group transformation, with all geometric properties defined as constants. The code demonstrates integrating D3’s `arc` generator with React components to produce declarative, data-driven SVG shapes in a 960×500 viewport.

Vvidhyanamini

77% match

Loading thumbnail…

Hello HTML

This example displays a classic smiley face rendered as an SVG graphic within a React application, using D3 for one shape. A yellow circle forms the head, with two black circles for eyes and a D3 arc path creating the mouth, all positioned via SVG transforms. The code leverages `d3.arc()` for the mouth geometry, while React manages the component structure and renders the SVG elements directly, combining both libraries in a single visualization.

MMuhammad Ahmad

77% match