Skip to main content
SimilarExport ZIP
100%

01_First Face

✓ Published0🌍 Public
AAbdul Salam Almadani
Last edited Sep 23, 2020
Created on Sep 1, 2020

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.

AI-generated description

Halfway towards a smiley face. this is an amazing start to data Visualisation

MIT Licensed

Similar vizzes

Loading thumbnail…

First Face

A yellow circle with a black outline forms the base of a simple face, accompanied by two smaller circles representing eyes. The visualization is a minimal, static example composed directly within an SVG element using basic shape tags. It relies on the native SVG API for rendering, with the face centered on a 960 by 500 pixel canvas. The code does not include a data source or interactivity, focusing instead on illustrating fundamental vector graphics construction.

Ddumbdataguy@gmail.com
92% match
Loading thumbnail…

Face

This example displays a simple, static face constructed from three SVG circles on a yellow background. The face consists of a large yellow circle for the head, outlined in black, and two smaller black circles positioned as eyes. The rendering uses raw SVG elements defined directly in the HTML, with hardcoded coordinates and attributes. The visualization does not involve any data processing or interaction, serving as a basic demonstration of shape composition.

Jjameshodev
89% match
Loading thumbnail…

01_02_Face Part I

This example shows a simple cartoon face constructed with nested SVG circle elements. A large green circle forms the head, with white and black circles for the eyes, a red circle for the nose, and a yellow circle for the mouth. The static composition uses raw SVG markup embedded directly in an HTML file, with coordinates positioned along a 1000 by 500 canvas. The code relies on basic SVG shape elements—primarily `circle` and `line`—with attributes controlling fill color, stroke color, and stroke width. No external data source or JavaScript library is used; the visualization is purely declarative HTML/SVG markup.

AAbdul Salam Almadani
89% match
Loading thumbnail…

Create_A_Face_1

A simple hand-coded SVG face drawn with circular elements forms the core of this example. The primary circle, rendered in yellow with a thick black stroke, represents the head, while additional circle elements are intended for facial features. The code uses raw SVG markup within an HTML page, defining shapes with attributes like `cx`, `cy`, and `r` for positioning and radius. The rendering is static, with no JavaScript libraries or data binding involved, relying solely on SVG's native drawing capabilities to construct the visual.

Hhamburger21
87% match
Loading thumbnail…

first

This example shows a simple static face made of three SVG circles: a large yellow circle for the head and two smaller black circles for eyes, all centered within the viewport. The code uses raw SVG elements—`circle` with attributes for position, radius, fill, and stroke—written directly in the HTML structure. No JavaScript libraries or data sources are involved; it relies purely on inline SVG markup and minimal CSS to remove page margins and hide overflow.

Mmohammedmakhouf78
87% match
Loading thumbnail…

Making a Face

A simple SVG face built with basic shapes offers a playful introduction to static data visualization. The yellow head is a large circle with a black outline, while two smaller unfilled circles serve as eyes, all rendered directly in the HTML markup without any JavaScript libraries. This example demonstrates fundamental SVG drawing through declarative elements like `circle` and `stroke` attributes, showing how raw geometric primitives can compose a recognizable figure. The code uses plain SVG within an embedded `svg` tag, with no external dependencies.

MMateusGaldinoLG
87% match
Loading thumbnail…

Let's make a face

A static SVG face built from primitive shapes demonstrates basic geometric composition in a web page. Three circles form a yellow head with a black outline and two dark eyes, all positioned using fixed Cartesian coordinates. The example uses raw SVG elements inside an HTML document, with no JavaScript libraries or data sources. It serves as a minimal introduction to vector graphics rendering in the browser, where each shape is defined directly in the markup.

IIvan Efremov
87% match
Loading thumbnail…

Face part 1

This example displays a simple, static visualization of a yellow face: a single circle with a black outline centered on a light background. The visualization uses only an inline SVG element, with the circle’s position, size, and colors set directly via attributes like `cx`, `cy`, `r`, `fill`, and `stroke`. The page is minimal, containing no external JavaScript libraries or data sources, and the SVG is rendered without animation or interactivity.

AAhmed Naveed Asif
87% match