Skip to main content
SimilarExport ZIP
100%

Let's make a face hahaha!

✓ Published0🌍 Public
FFriVanilla
Last edited Nov 2, 2020
Created on Nov 2, 2020

This example presents an interactive face constructed from SVG shapes, rendered inside a 960 by 500 canvas. The page uses a minimal setup with an empty `<svg>` element and CSS to hide page margins and overflow, focusing entirely on the graphic. While the current code does not yet draw any facial features, the embedded YouTube link suggests inspiration for the final composition. The implementation relies on standard SVG and HTML APIs, with no external libraries like D3 or Three.js visible in the provided files.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face

A blank SVG canvas awaits construction as a face. The visualization uses raw SVG elements within an HTML page, styled by an external CSS file that removes margins and hides overflow. The code provides an empty `<svg>` tag with a width of 960 pixels and height of 500 pixels, leaving the drawing entirely to runtime interaction. No JavaScript libraries or APIs are used; the example relies solely on static SVG and CSS structure, presenting an unfinished template for a face-making activity.

Kkwame2
88% match
Loading thumbnail…

Let's make a face

This example demonstrates how to build a simple, blank SVG face using D3 version 3, with a 960-by-500 pixel canvas. It shows only the basic setup of an HTML page, an SVG container, and a script that logs the D3 object to the console, with CSS hiding page margins and overflow. The code does not yet draw any facial features or interactive elements, serving instead as a starting template for adding shapes and styling. The rendering relies on the selection of the SVG element and is ready for subsequent D3 methods, though no data or visual output is currently generated.

BBartłomiej Czyżewski
87% match
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
87% match
Loading thumbnail…

Let's make a face with D3

This example demonstrates a playful SVG face created from basic shapes, showing how D3 can assemble and style elements on a canvas. The code uses `d3.select` to target the SVG container and applies a background color via the `style` method. Although the sketchy setup includes an embedded YouTube tutorial link, the visible implementation itself only loads D3 v5 and initializes a blank 960×600 SVG, ready for further drawing instructions. The face is not yet rendered in the provided code; instead, it serves as a starting point for interactive construction.

Hhairibung
87% match
Loading thumbnail…

Let's make a face

This example demonstrates a playful construction of a face using SVG shapes, built with D3 v5. The visualization uses a blank SVG canvas and dynamically assembles facial features such as eyes, nose, and mouth. It leverages D3’s selection and manipulation methods to position elements based on simple coordinate logic. The rendered output is a static, stylized face generated entirely through code, with styling handled by an external CSS file using the Ubuntu font.

KKwadwo 'Que' Amankwa
87% match
Loading thumbnail…

Let's make a face

This example builds a face from scratch using SVG shapes and D3.js version 5, demonstrating basic selection and manipulation of SVG elements. The code logs the D3 object to the console and sets up a blank 960x500 SVG canvas with minimal styling. While the current implementation only initializes the visualization framework, it serves as a foundation for adding facial features programmatically. The example uses standard D3 selections and SVG coordinate systems, with the YouTube video embedded in the README providing additional context on the technique.

SSH
86% match
Loading thumbnail…

Let's Make a Face Part I (HTML, CSS, SVG)

This example demonstrates how to construct a simple, stylized face using only HTML, CSS, and SVG, with no external JavaScript libraries. The page contains an empty `<body>` element, while the face’s visual elements are defined entirely through inline SVG markup within the HTML structure. The video embedded in the README provides guidance on the step-by-step drawing process, but the code itself does not include any interactive behavior or data-driven rendering. It serves as a minimal, static illustration of basic SVG shape composition and CSS styling within a single web document.

440detectives
86% match
Loading thumbnail…

Let's make a face with d3.js!

A playful SVG face built from geometric shapes demonstrates how D3.js coordinates discrete visual elements, with eyes, nose, and mouth arranged on a 960×500 canvas. The rendering uses D3.js v3’s core selection and attribute methods to position and style each facial feature, while the page’s CSS removes default margins for a full-bleed display. The example emphasizes basic SVG group and shape creation rather than data mapping, showing how D3’s low-level drawing primitives can assemble a recognizable composite figure.

Ssdilbaz
86% match