My first html artpiece!

100%

My first html artpiece!

✓ Published0🌍 Public

Last edited Apr 14, 2021

Created on Apr 14, 2021

A cheerful face drawn entirely with SVG circles fills the viewport: a large yellow head with black eyes, a red nose, pink cheeks, and round ears. The composition is static and playful, using simple geometric shapes to create a character. Rendered directly in an HTML document, the artwork relies on SVG circle elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes, styled by minimal CSS to remove margins and hide overflow.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's Make a Face Part 1

A cheerful yellow face composed of simple geometric shapes sits centered on a plain white canvas, with two small black-outlined circles serving as eyes against a larger circular head. The SVG drawing, rendered directly in an HTML page using the inline `<svg>` element, demonstrates basic vector graphics through primitive shape elements like `circle` with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The page structure relies purely on standard web standards without any external libraries, showing how static visualizations can be constructed entirely through hand-written markup and styled by minimal embedded CSS.

Ssrzadran

79% match

Loading thumbnail…

Hello HTML

This example draws the first step of a smiley face using raw SVG primitives inside an HTML document. Three circles form the head and two eyes, with the face’s outline and features styled through SVG presentation attributes such as `fill` and `stroke`. The markup defines a static 960×500 canvas without any scripting or external libraries, relying solely on the browser’s native SVG rendering. The visualization is a simple, self-contained illustration of vector graphics construction, with the head circle filled yellow and black-bordered, while the eye circles remain unfilled.

RRambo Talabong

78% match

Loading thumbnail…

My First Face

A yellow smiley face drawn with SVG circles and a mouth arc takes center stage. The code uses React to render the SVG structure and the d3 `arc` generator to create the mouth path. Each eye is placed using simple coordinate offsets, while the face radius and stroke width are derived from the chart dimensions. The entire face group is translated to the center of a 960 by 500 viewport, with the mouth arc configured between specified start and end angles.

TTHB-account

77% match

Loading thumbnail…

01_First Face

This example presents a simple, static SVG face composed of a large yellow circle with a black outline and two smaller black circles for eyes. It shows how basic geometric shapes can be combined to create a recognizable figure. The visualization is built using raw SVG elements directly in an HTML file, with coordinates explicitly set for each circle’s center and radius, demonstrating a low-level, manual approach to positioning without any JavaScript libraries or data source.

AAbdul Salam Almadani

77% match

Loading thumbnail…

yellow_face_1

A large yellow circle dominates the frame, serving as a blank face, with two smaller black circles positioned as eyes. The piece is a minimalist, static SVG composition that uses basic geometric shapes to create a simple facial representation. The code directly uses the SVG `circle` element within an inline HTML document, with styling applied via CSS for the background and the yellow fill, black stroke, and thick border of the face. This example demonstrates a straightforward, non-interactive rendering approach using only native SVG and HTML.

VVanessa

77% match

Loading thumbnail…

Untitled

A yellow circle with a black outline and two black eyes sits centered on a blank SVG canvas, presenting the first stage of a smiley face. The static composition uses two small black circles positioned symmetrically above the center of the large yellow face. The rendering is achieved through raw SVG elements in an HTML file, with no JavaScript or external libraries involved. The circle shapes are defined directly with `cx`, `cy`, and `r` attributes, while the stroke and fill properties are set inline.

Llinkshady

77% match

Loading thumbnail…

Let's Make a Face Part I

Two yellow circles with black outlines serve as eyes for an unfinished face drawn on an SVG canvas. A large yellow circle with a thick black stroke forms the head, while two smaller solid yellow circles sit symmetrically to the left and right of center. The code uses raw SVG elements—`circle` with `cx`, `cy`, `r`, `fill`, and `stroke` attributes—embedded directly in HTML, with no JavaScript libraries or data binding. The visualization is a static, hand-coded step toward a smiley face.

Pp-d-c

77% match

Loading thumbnail…

Hello HTML

A static SVG smiley face rendered directly in HTML displays a large yellow circle with two smaller black circles as eyes. The drawing uses raw SVG elements—`<circle>` tags for the face and eyes—positioned via explicit `cx` and `cy` coordinates within a 960-by-500 viewport. The face and eye circles have no fill for the eyes, while the main circle uses a yellow fill and black stroke. No JavaScript libraries or data sources are involved; the example relies solely on inline SVG markup.

Kkpmaurice

76% match