Surprised Face (HTML)

100%

Surprised Face (HTML)

✓ Published0🌍 Public

Last edited May 31, 2021

Created on May 28, 2021

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.

AI-generated description

Surprised face built with HTML.

MIT Licensed

Similar vizzes

Loading thumbnail…

HTML Face

This example shows a simple face rendered as a yellow circle with two eyes using SVG elements. The code draws three circles directly in the SVG markup: a large yellow face with a black outline, and two smaller black eyes positioned symmetrically. It uses basic SVG circle elements with attributes for coordinates, radius, fill, and stroke. The page is styled with CSS to center the graphic and remove margins, while the SVG canvas is set to 960 by 500 pixels. JavaScript is present but unused, and React is listed as the framework though the standalone HTML relies solely on native SVG.

MMark Lam

79% match

Loading thumbnail…

face

A static SVG face rendered directly in HTML shows three circles: a large yellow head with an orange outline, and two smaller black eyes with white outlines. The code uses no JavaScript libraries or data sources, relying solely on hardcoded SVG circle elements with explicit coordinates, radii, and stroke properties. The rendering is fixed within a 960 by 550 pixel viewport, with the face positioned toward the left side of the canvas.

MMiguel A Palma

79% match

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

79% match

Loading thumbnail…

Hello HTML face

A simple SVG face drawn with three circles on a yellow background, illustrating fundamental HTML and SVG markup. The example uses raw SVG elements—a large yellow circle for the head and two smaller black circles for eyes—positioned via explicit `cx` and `cy` coordinates within an inline `<svg>` tag. No JavaScript or external libraries are employed; the rendering relies entirely on static SVG shapes embedded directly in the HTML document.

CCamiloGuevara19

79% match

Loading thumbnail…

Hello HTML

A minimalist SVG face rendered entirely with basic HTML markup and inline SVG elements. The visualization uses two black-outlined circles for the eyes, which appear as empty outlines on a large yellow circular head. The code creates the face manually with `<circle>` tags inside an SVG canvas, setting coordinates and dimensions directly in the markup. This example demonstrates fundamental SVG shape creation and styling through attributes like `fill`, `stroke`, and `stroke-width`, without relying on any JavaScript libraries or external data.

Cchristhchild28

79% match

Loading thumbnail…

new face

A static SVG face is drawn with a large yellow circle for the head, complete with a black stroke, and two smaller filled circles for eyes. The composition is left incomplete, with the mouth and other facial features omitted, matching its half-way-to-a-smiley title. The example uses raw SVG elements—`circle` tags with attributes for positioning and styling—inside an HTML page, with body margin and overflow set to zero for a clean display. No JavaScript libraries or dynamic data are involved, only inline markup.

Uumarghumman

79% match

Loading thumbnail…

Hello HTML

This example shows a simple yellow face drawn with a black outline and two black eyes on a blank canvas. The visualization uses an inline SVG element with fixed dimensions of 960 by 600 pixels, placing three circles via the SVG `circle` element. The largest circle serves as the face, with two smaller circles positioned as eyes, all styled directly through SVG attributes like `fill`, `stroke`, and `stroke-width`. The page is minimal HTML with CSS that removes body margins and hides overflow, ensuring the graphic fills the viewport without scrolling. No external libraries or data sources are involved; the rendering relies entirely on native SVG markup.

SShidrath Rahman Haider

79% match

Loading thumbnail…

Hello HTML

This example shows a simple yellow circle with two black eyes, forming a basic smiley face on a blank white background. The SVG drawing uses two overlapping circle elements for the face and eyes, all rendered with explicit stroke and fill attributes. The code defines three separate `<circle>` tags inside a fixed 960×500 SVG viewport, with the body’s CSS removing margins and hiding overflow. No JavaScript libraries are used; the visualization relies entirely on plain HTML and SVG markup.

Iijavierja

78% match