Datavis 2020 - Let's Make a Face

100%

Datavis 2020 - Let's Make a Face

✓ Published0🌍 Public

Last edited Dec 26, 2021

Created on Dec 26, 2021

This example draws a simple face using basic SVG shapes directly in an HTML page, with no external JavaScript libraries. It shows a yellow circle as the head, and two smaller black circles as eyes, all positioned within a fixed 960 by 500 viewport. The rendering relies solely on inline SVG elements like `<circle>` and standard attributes such as `cx`, `cy`, `r`, and `fill`, with stroke properties for outlines. The page’s CSS sets `overflow: hidden` to prevent scrolling, and the static composition uses hardcoded coordinates rather than any data-driven generation or interaction.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Dataviz 1 - Face (HTML, CSS, SVG)

This example shows a simple cartoon face made of three SVG circles: a large yellow head and two smaller black eyes. The visualization uses static, hand-coded SVG elements within an HTML page, with CSS setting the body margin to zero and hiding overflow. It renders directly in the browser without any JavaScript libraries or data processing, relying solely on the SVG circle elements and their fill, stroke, and stroke-width attributes.

RRyAlpha

89% match

Loading thumbnail…

Data | Make a Face with HTML, CSS, SVG

A simple SVG face is drawn with three circles: a yellow head with a black stroke and two black eyes. The example demonstrates basic SVG shape rendering within an HTML page, using a fixed 960 by 500 canvas and hardcoded coordinates. No JavaScript or external libraries are used; only the SVG `circle` element and inline CSS control the layout and hide page overflow. The face is static, with no interaction or animation, serving purely as a minimal illustration of vector graphics markup.

AAndreRGunawan

88% match

Loading thumbnail…

Lets Make a Face Learn

This example shows a static SVG face composed of a yellow circle with a black stroke for the head, two unfilled circles for eyes, and an implied smile that remains unfinished. The rendering uses basic SVG elements—`<svg>`, `<circle>`, and inline styling—within an HTML document. Data is hardcoded in the markup, positioning the head at center (480, 250) with a radius of 245, and eyes offset to the left and right. The page sets body margins to zero and hides overflow, focusing attention on the face. No dynamic libraries or interactive behavior are present.

Vvochi2025

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

86% match

Loading thumbnail…

Let's Make a Face

This example shows a simple face constructed from three SVG circles against a yellow background. The face comprises two small black circles for eyes and a larger yellow circle for the head, with a black outline defining its boundary. The visualization is created using a static SVG canvas with fixed coordinates and styling properties like fill color and stroke width, all implemented directly in the HTML markup. The code relies solely on the native SVG API within the browser, without any external libraries or interactive behavior.

Ttshardey

86% match

Loading thumbnail…

Let's make a face: part 1

A static SVG face is drawn with a yellow circular head, a black outline, and two black eyes. The example demonstrates basic SVG shape rendering with hard-coded coordinates and attributes. The code uses native SVG elements (`<svg>`, `<circle>`) with inline styling for fill, stroke, and stroke-width. Both eyes are positioned symmetrically relative to the face’s center, with the head centered at (480, 250) and a radius of 245. No JavaScript libraries or dynamic data are involved, relying entirely on declarative markup.

Rrvdv

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

86% match

Loading thumbnail…

Lets make a face

This example shows a simple, hand-coded SVG face with a large yellow circular head and two smaller black eyes positioned symmetrically. It renders entirely through static SVG elements—a head circle with a black stroke and two eye circles—without any interactivity or animation. The code uses raw SVG markup inside an HTML file, setting geometric attributes like `r`, `cx`, and `cy` directly, with no JavaScript libraries or data sources involved. The face is halfway to a smiley, lacking a mouth or other features.

Kkeitheade

85% match