Skip to main content
SimilarExport ZIP
100%

Smiley Face Part 1

✓ Published1🌍 Public
KKazSoftwareEngineer
Last edited Jun 5, 2022
Created on Jun 5, 2022
Forked from HTML Starter

A yellow circle with a black stroke and two smaller black circles forms a smiley face on a 960 by 500 pixel SVG canvas. The example uses raw HTML and SVG elements, explicitly setting circle positions with `cx` and `cy` attributes and styling through inline CSS properties like `fill` and `stroke-width`. It demonstrates basic vector shape composition without JavaScript or external libraries.

AI-generated description

Working with HTML, CSS, and SVG

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley face part 1

A yellow circle with a black outline and two smaller black circles forms a simple smiley face on an SVG canvas. The example uses raw SVG elements—`circle` tags for the face and eyes—positioned via fixed `cx` and `cy` coordinates, with inline styling for stroke and fill. It renders statically in an HTML page styled by a basic CSS reset, demonstrating basic vector shape composition without any interactive or data-driven behavior.

SSyed Mohsin Raza Naqvi
95% match
Loading thumbnail…

Smiley Face Part 1

A yellow circle with a black outline serves as a face, containing two smaller black circles positioned as eyes on an SVG canvas. The code uses raw SVG elements (`circle`) within an HTML document, setting fixed `cx`, `cy`, and `r` attributes to render the shapes. The rendering is static, providing a half-finished smiley face without a mouth. The example demonstrates basic SVG drawing without external libraries, using a 960 by 500 pixel canvas and hardcoded coordinates for each component.

Cconorflood96
94% match
Loading thumbnail…

Smiley face part 1

A yellow circle with a black outline forms the head of a smiley face, accompanied by two smaller black circles positioned as eyes. The example uses basic SVG shapes, created directly within an HTML document using inline `circle` elements. The rendering is static, with no interactive behavior or data binding, relying solely on SVG’s declarative syntax for positioning and styling. The code sets explicit `cx`, `cy`, and `r` attributes to place the shapes on a 960 by 500 canvas, demonstrating foundational SVG drawing without any JavaScript libraries.

Mmustafatalat
93% match
Loading thumbnail…

Smiley Face Part 1

A static SVG smiley face rendered on a yellow circle with a black stroke, featuring two smaller black circles as eyes. The page uses raw SVG elements (`<circle>` tags) with explicit `cx`, `cy`, and `r` attributes to position shapes. The thick stroke and background are set via SVG presentation attributes. This example demonstrates basic vector drawing without any JavaScript libraries or data sources.

TtrwMK
93% match
Loading thumbnail…

Smiley Face part 1

This example shows a simple yellow smiley face built with three black circles on a 960 by 500 SVG canvas. The large yellow circle forms the face, while two smaller black circles serve as the eyes, all rendered directly with inline SVG elements. The code uses the HTML5 `<svg>` element and its `<circle>` API, styling shapes via the `fill` and `stroke` attributes, with a black `stroke-width` of 5 for the face outline. No external data or JavaScript libraries are used, relying purely on static markup.

MMuhammad Faizan Khurshid
93% match
Loading thumbnail…

Smiley face part - 1

A smiley face begins to take shape with two large yellow and black-striped circles drawn on an SVG canvas. The code uses raw SVG circle elements to render a yellow face and two black eyes, with explicit cx, cy, r, fill, and stroke attributes. The example demonstrates basic geometric composition in a 960 by 500 viewport, using SVG’s built-in shape rendering without any JavaScript libraries or data binding.

JJasleen-debug
93% match
Loading thumbnail…

Smiley Face Part 1

A yellow circle with a thick black outline forms the base of a smiley face, accompanied by two smaller black circles positioned as eyes on an SVG canvas. The example demonstrates basic SVG shape rendering using the native `circle` element, with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The canvas is 960 by 500 pixels, and the face’s center is offset slightly upward to account for the stroke width. This is the first step toward a fuller smiley face, showing only the head and eyes without a mouth or other features. The rendering uses static, hardcoded coordinates rather than any data-driven or interactive logic.

JJjavellana
93% match
Loading thumbnail…

Smiley Face Part 1

A yellow circle with a black outline and two smaller black circles forms a simple smiley face on an SVG canvas. The example demonstrates basic SVG shape rendering, using circle elements to construct the face. It relies on HTML, CSS, and inline SVG attributes, with the SVG canvas set to 960 by 500 pixels. The code does not include a mouth or any interactive behavior, showing only the static facial features.

MMorgan Worrell
93% match