01_02_Face Part I

100%

01_02_Face Part I

✓ Published0🌍 Public

Last edited Sep 23, 2020

Created on Sep 1, 2020

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.

AI-generated description

This is an excersice to smail face part 1 by usding HTML and CSS format this is an amazing start to data Visualisation

MIT Licensed

Similar vizzes

Loading thumbnail…

01_First Face

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.

AAbdul Salam Almadani

89% match

Loading thumbnail…

Make a Face Part I

A static SVG face built from three circles: a large yellow head with a black outline and two smaller unfilled circles for eyes. The code defines the SVG canvas directly in HTML, positioning the head at the center of a 960 by 500 viewport and placing the eyes symmetrically on either side. The rendering relies on raw SVG circle elements with explicit coordinates and stroke properties. The example demonstrates basic geometric composition and styling within an inline HTML document.

PPatrick Hebner

87% match

Loading thumbnail…

Let's Make a Face Part I

This example shows the initial stage of constructing a face with simple geometric shapes, featuring a large yellow circle for the head and two smaller circles for eyes, all rendered directly in SVG. The code uses plain HTML and SVG element declarations within an inline `<svg>` tag, setting explicit coordinates and radii for each circle. The face is centered on a 960×500 canvas, with the head’s stroke and fill colors specified inline. No JavaScript libraries or data sources are involved; the visualization relies solely on static, hard-coded SVG markup to create the basic facial structure.

Llakalia@wpi.edu

86% match

Loading thumbnail…

Lets Make a Face Part 1

A bare SVG face composed of three circles forms the entire visualization: two smaller black circles serve as eyes, while a large yellow circle with a black outline acts as the head. The example demonstrates static SVG rendering with fixed coordinates and styling, using no JavaScript or external libraries. The circles are positioned at absolute pixel values within a 960-by-500 viewport, and the SVG markup is embedded directly in the HTML. This is a minimal illustration of primitive shape composition rather than a data-driven chart, as no data source or dynamic behavior is present.

Mmdummett

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

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

86% match

Loading thumbnail…

Lets Make A Face Part I

This visualization shows a simple cartoon face made of three black circles for the eyes and a large yellow circle for the head, all outlined with a thick black stroke. The SVG elements are positioned using fixed pixel coordinates within a 960-by-500 viewport. The code uses raw SVG circle elements and CSS to hide page margins, rendering the face directly without any JavaScript libraries or external data.

AAyamSrivastava

85% match

Loading thumbnail…

Let's Make a Face Part I

A static SVG face composed of three circles: a large yellow head with a black stroke, and two smaller black eyes positioned symmetrically. The circles are drawn using raw SVG elements, with coordinates and radii hardcoded directly in the markup. This example uses plain HTML and CSS, with no JavaScript libraries or data sources, to demonstrate basic shape composition and styling within an SVG canvas.

Jjwlam83

85% match