make_face_yy

100%

✓ Published0🌍 Public

Last edited Jan 17, 2023

Created on Jan 17, 2023

Three yellow circles with dark outlines on a white canvas form a partial smiley face. The largest circle serves as the face, and two smaller, identical circles positioned symmetrically above its center represent the eyes. The visualization is built with static SVG elements, using explicit pixel coordinates for the center and radius of each circle. The headless HTML file includes an embedded YouTube video in its README, but the rendered output itself is a simple, non-interactive graphic.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

make_face_yy

A static SVG drawing depicts a stylized face midway to completion, featuring a large yellow circle with a black outline as the head, and two unfilled circles as eyes positioned symmetrically around the center. The rendering uses raw SVG elements, specifically `<circle>` tags, with coordinates and dimensions hardcoded in the HTML file. The face lacks a mouth, leaving the expression unfinished, while the simple geometric composition highlights the initial steps of constructing a smiley face. The example relies on inline SVG within an HTML document, with no external libraries or data sources.

YYan Yan

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

84% match

Loading thumbnail…

smily face part i

This visualization displays a simple smiley face composed of three circles: one large yellow circle with a black outline for the face, and two smaller circles without fill for the eyes. The SVG (Scalable Vector Graphics) markup defines the canvas at 960 by 500 pixels, with the face centered at coordinates (480, 250) and a radius of 245 pixels. The eyes are positioned symmetrically at x-coordinates 350 and 600, both with a radius of 50. The code uses basic SVG elements (`<circle>`, `fill`, `stroke`, `stroke-width`) directly within an HTML page.

IIrene-zou

84% match

Loading thumbnail…

smile face p 1

A yellow smiley face rendered as a static SVG composition shows three circles: a large outlined head and two smaller solid eyes. The code uses raw SVG elements (`<circle>`) with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes, embedded directly in an HTML page via inline markup. No JavaScript libraries or data sources are involved; the image is purely declarative, with the head centered at (480, 250) and eyes positioned symmetrically, producing a simple, fixed visual without interaction or animation.

YYanzeWang

83% match

Loading thumbnail…

smiley face

A single yellow circle with a thick black outline forms the face, centered on a plain SVG canvas. Two smaller black circles sit at the center of the face, creating the eyes and mouth in a simple, iconic smiley pattern. The visualization uses raw SVG elements—`circle` tags with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—rendered directly in the HTML document. No JavaScript libraries or data processing are involved; the graphic is purely static and defined entirely in markup. The page sets the body margin to zero and hides overflow for a clean, full-window presentation.

DDeepak Nautiyal

83% match

Loading thumbnail…

face

A yellow smiley face is drawn as an SVG circle with black-stroked eyes and an arc-shaped mouth. Using D3.js v5, the code selects and appends SVG elements to a 960x500 canvas, centering the face via a translation. The eyebrows, rendered as rectangles, animate upward and downward through chained `transition` calls with a 2000-millisecond duration, demonstrating fundamental DOM manipulation and data-join-free animation.

Mmyoung1032

83% match

Loading thumbnail…

Let's Make a Face Part I

A single yellow circle with a black outline forms the base of a smiley face. Two smaller black circles serve as eyes, positioned symmetrically on either side of the face's vertical center. The code uses raw SVG elements—a `<circle>` for the face and two additional `<circle>` elements for the eyes—directly embedded in an HTML document. The fixed 960 by 500 viewport and manual coordinate calculations for the eye positions are visible in the source.

Ddreesmpk

83% match

Loading thumbnail…

smiley face part one

A yellow smiley face drawn with three SVG circles: a large yellow circle with a black stroke forms the head, and two smaller black circles serve as eyes. The SVG elements are positioned explicitly with `cx`, `cy`, and `r` attributes within a fixed 960 by 500 viewport. The rendering uses raw SVG markup directly in HTML, with no JavaScript libraries or data sources involved. The face is incomplete, as it lacks a mouth.

VVictor Ukpe

82% match