Skip to main content
SimilarExport ZIP
100%

Smiley Face Part I

✓ Published1🌍 Public
JJarrod
Last edited Aug 12, 2021
Created on Aug 12, 2021
Forked from Hello HTML

A yellow circle with a black outline and two smaller black circles for eyes forms a smiley face, rendered as a static SVG. The face is centered on a 960-by-500 canvas, with the main circle at (480, 250) and a radius of 245, while the eyes are placed at (350, 180) and (600, 180), each with a radius of 50. The code uses raw SVG elements—`circle`, `fill`, `stroke`, and `stroke-width`—without any external libraries, and the markup is embedded directly in an HTML page.

AI-generated description

Half way towards a smiley face HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part 1

A yellow circle with a black outline forms the face of a smiley, and two smaller black circles represent the eyes. The face is centered within a 960 by 500 pixel SVG canvas, with the head’s radius calculated to fit within the canvas height and stroke width. The composition is static and minimal, using only three SVG `<circle>` elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The markup is authored directly in `index.html`, with no external libraries or JavaScript beyond the SVG rendering.

AAl Wonder
95% match
Loading thumbnail…

Smiley Face Part I

A single yellow circle with a thick black outline and two smaller black circles inside forms a basic smiley face. The example uses raw SVG elements—specifically `<circle>` tags—within an HTML page to compose the static graphic. The code sets the main face’s radius to 245 pixels, positions the eyes at fixed coordinates, and relies on the browser’s default black fill for the pupils. No JavaScript or external libraries, such as D3, are employed; the rendering is purely declarative SVG markup. The fixed canvas size is 960 by 500 pixels, with the face centered horizontally.

GGregS1290
95% match
Loading thumbnail…

Smiley face Part I

A yellow circle with a black outline and two smaller black circles forms the beginning of a smiley face. The larger circle is centered on an SVG canvas, while the two eye circles are positioned symmetrically on either side of the center. The example uses raw SVG elements—`circle` with `cx`, `cy`, `r`, `fill`, and `stroke-width` attributes—directly in the HTML, with a fixed viewport of 960 by 500 pixels. No JavaScript libraries or data sources are involved; the rendering is purely static SVG markup.

PPakapone Supavarn
95% match
Loading thumbnail…

Smiley Face Part 1

A yellow circle with a black outline and two smaller black circles for eyes forms a simple smiley face on an SVG canvas. The main circle is centered at 480, 250 with a radius of 245, while the eyes are placed at 350, 200 and 610, 200 with a radius of 50 each. The visualization uses raw SVG elements—`circle` tags—with fill, stroke, and stroke-width attributes to define the shapes. No JavaScript libraries are employed; the markup is directly embedded in an HTML page with no interactive or animated behavior.

FFlore
95% match
Loading thumbnail…

Smiley Face Part I

A single yellow circle with a black outline forms the face, while two smaller black circles serve as eyes on a plain SVG canvas. The visualization uses native SVG elements (`circle`) with attributes for positioning, radius, fill, and stroke. The layout is computed directly from the viewport dimensions, centering the face at (480, 250) with a radius of 245, and placing each eye 50 pixels in radius at offsets from the center. This is a static, hand-coded example that does not rely on any JavaScript libraries or data binding.

Aabealam
95% match
Loading thumbnail…

Smiley Face Part I

A yellow circular face with a black outline and two dark eyes is centered on an empty SVG canvas. The eyes are positioned asymmetrically, with the left eye offset from the vertical center. The example uses raw SVG elements—specifically three `circle` tags—with explicit `cx`, `cy`, and `r` attributes to define the shapes. The rendering is static, with no animation or interactivity. The page is contained in a single HTML file with minimal CSS to hide scrollbars, and the SVG viewport is set to 960 by 500 pixels.

JJane
94% match
Loading thumbnail…

Smiley Face Part 1

A yellow circle with a black outline forms the face of a smiley, accompanied by two smaller black circles positioned as eyes on a blank white background. The code uses a static SVG with explicit `circle` elements, setting coordinates and radii directly in the markup. It renders at 960 by 500 pixels without any JavaScript interaction or animation, serving as a foundational step toward the full smiley-face visualization.

Ccaineosborne
94% match
Loading thumbnail…

Smiley Face Part 1

A static SVG drawing of a smiling face appears on a yellow circle with a black outline, flanked by two smaller black circles for eyes. The code uses raw SVG elements—`circle` tags with explicit `cx`, `cy`, and `r` attributes—to construct the shape inside an inline `<svg>` container. The rendering is purely declarative, with no JavaScript libraries or data processing involved. The face is centered horizontally and vertically within a 960×500 viewport.

Ttrashmail
94% match