Lets make a face

100%

Lets make a face

✓ Published0🌍 Public

Last edited Jun 11, 2020

Created on Jun 11, 2020

An abstract face constructed from basic SVG shapes, including crimson and teal circles for eyes, blue and dark rectangles for a brow, and a pink circle-and-rectangle ear, is drawn with thick purple lines forming a zigzag mouth. The composition uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, grouped and transformed with `translate` and `scale`. Styling is applied via an external stylesheet with the `.lines` class setting stroke color, width, and rounded joins.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face

This example shows how a face is constructed from a collection of geometric SVG elements, including circles, paths, and polygons, to form expressive facial features. The visualization relies on inline SVG markup, with the entire composition rendered as static vector graphics. The code uses raw SVG elements such as `<circle>`, `<path>`, and `<polygon>` within a 960×500 viewport, styled via external CSS. The face emerges from carefully positioned shapes, demonstrating how basic SVG primitives combine to create a recognizable character. No JavaScript libraries or interactive behaviors are present; the result is a purely declarative, presentation-focused graphic.

Wwhitenoise83

86% match

Loading thumbnail…

Lets Make a Face

This example demonstrates how to build an SVG face using basic geometric shapes, with each facial feature drawn as a separate path element. The visualization relies on standard SVG markup within an HTML document, styling the paths with CSS properties like stroke color and line join. The code uses the inline `<svg>` element with a defined width and height, while the CSS classes apply consistent black stroke styling with a custom teal color for path elements. The face is constructed entirely through code rather than importing external image data.

MMark Moesch

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

85% match

Loading thumbnail…

Let's Make a Face Part I

An SVG illustration builds a stylized face from layered vector paths and gradient fills, using precise coordinates and class-based styling to define facial features such as eyes, nose, and mouth. The rendered graphic employs embedded path data with cubic Bézier curves, while transform groups apply translation, rotation, and scaling. The composition relies on hand-coded SVG elements and CSS class definitions, with no external libraries, directly producing the final visual.

CCurran Kelleher

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

84% match

Loading thumbnail…

Let's Make a Face Part I

A simple SVG face built from three circles: a yellow head and two black eyes, drawn directly in HTML markup without JavaScript libraries. The head uses a 245-pixel radius centered at (480, 250), with eyes positioned at (350, 180) and (600, 180), each 50 pixels wide. The face lacks a mouth, matching the "Half way towards a smiley face" note in the README. All styling—fill colors, stroke, and stroke width—is applied via inline SVG attributes.

Ddanrungg

84% match

Loading thumbnail…

Let's Make a Face Part I

Three hand-drawn-style black circles on a yellow SVG face—two blank eyes and an unfinished mouth—suggest the start of a modular facial construction. The page relies solely on raw SVG elements, defining circles with explicit `cx`, `cy`, `r`, and `stroke` attributes within a 960×500 viewport, with no JavaScript or external libraries. The static composition emphasizes geometric primitives and outlines a playful, step-by-step approach to building a character.

RRiccardo De Lucia

84% match

Loading thumbnail…

Let's Make a Face Part 1

A cheerful yellow face composed of simple geometric shapes sits centered on a plain white canvas, with two small black-outlined circles serving as eyes against a larger circular head. The SVG drawing, rendered directly in an HTML page using the inline `<svg>` element, demonstrates basic vector graphics through primitive shape elements like `circle` with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The page structure relies purely on standard web standards without any external libraries, showing how static visualizations can be constructed entirely through hand-written markup and styled by minimal embedded CSS.

Ssrzadran

84% match