Exercise 1

100%

✓ Published1🌍 Public

Last edited Jan 16, 2020

Created on Jan 16, 2020

A simple SVG drawing shows a yellow circle with a black outline, accompanied by two smaller black circles positioned as eyes. The graphic represents the start of a smiley face, though a mouth is not yet included. The code uses plain SVG elements—`<circle>`—within an HTML page, rendered directly in the browser. The canvas is 960 by 500 pixels, with the main circle centered and the eyes placed symmetrically. This exercise demonstrates basic SVG shape creation and styling through inline attributes like `fill`, `stroke`, and `stroke-width`.

AI-generated description

Halfway towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape construction with a yellow smiley face drawn on a 960-by-500 canvas. It shows two filled black circles positioned as eyes and a large outlined circle forming the face, with a yellow fill and black stroke. The visualization uses raw SVG elements—`circle` tags, `fill`, `stroke`, and `stroke-width` attributes—with inline HTML styling to center the graphic. This straightforward file illustrates fundamental vector rendering without any external libraries or data sources.

Jjulian.tunstill@gmail.com

87% match

Loading thumbnail…

Smiley face exercise 1

A yellow smiley face drawn as an SVG appears on a white background. Two black circles form the eyes, while no mouth is present. The SVG is hard-coded in HTML with explicit pixel coordinates for the face and eye positions. The visualization uses raw SVG elements—`circle` tags with `fill`, `stroke`, and `stroke-width` attributes—rather than a JavaScript library or data source. The rendering is static and does not respond to interaction. The face is centered at 480 on the x-axis and 250 on the y-axis within a 960-by-500 viewport.

Sshenoy-bhaskar

86% match

Loading thumbnail…

SmileyFace

A yellow circle with a black outline forms the face, and two smaller black circles represent the eyes. The example demonstrates basic SVG shape creation using explicit `<circle>` elements within an `<svg>` container. The code sets the canvas dimensions to 960 by 500 pixels and uses inline SVG attributes for positioning, sizing, fill colors, and stroke properties. No JavaScript or external libraries are used; the visualization relies entirely on static SVG markup to render the simple smiley face composition.

Nngp001

85% match

Loading thumbnail…

Smiley face

A yellow circle with a black outline forms a smiley face, featuring two smaller black circles for eyes on a plain background. The example demonstrates basic SVG shape rendering inside an HTML page, using the `<svg>`, `<circle>`, `fill`, `stroke`, and `stroke-width` attributes directly in markup without any JavaScript libraries. The static visualization is created entirely with inline SVG elements, with no interaction or animation, and serves as a minimal introduction to drawing vector graphics in the browser.

Nnkp1111

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

85% match

Loading thumbnail…

smile face part one

A yellow circle with a thick black outline fills the center of an SVG canvas, while two smaller black circles sit at the upper left and right inside it. The example demonstrates basic SVG shape rendering using inline `<circle>` elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The page uses no external JavaScript libraries, relying solely on static SVG markup within an HTML document. The rendering approach is direct SVG, with a 960 by 500 viewport and no interactive or animated behavior.

Wwl328Weiminli

85% match

Loading thumbnail…

Let's Make a Face Part I

A single yellow SVG circle with a black stroke forms the head of a smiley face, accompanied by two smaller black circles for eyes. The example demonstrates basic SVG shape rendering within an HTML page, using hard-coded `circle` elements positioned via `cx` and `cy` coordinates. It is the first step toward a complete facial expression, with the mouth intentionally omitted. The code relies on standard SVG markup, not any JavaScript visualization library.

JJjavellana

85% match

Loading thumbnail…

smiley face part 1

This example shows a simple smiley face constructed from three SVG circles: a large yellow circle for the head and two smaller black circles for the eyes, all centered on a 960 by 500 canvas. The drawing uses the Scalable Vector Graphics (SVG) API directly within an HTML page, with the `circle` element specifying `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The code does not include a mouth, leaving the smiley face incomplete, and the page’s body margin is set to zero to ensure the SVG fills the viewport.

RRob-Colon

85% match