make a face

100%

✓ Published0🌍 Public

Last edited Mar 27, 2020

Created on Mar 27, 2020

Forked from Shapes and Colors with SVG and CSS

This example demonstrates how to build a face from scratch using SVG and D3, where users can manipulate facial features by dragging points on the screen. It employs D3’s force simulation to position nodes that define the face’s geometry, with lines and circles rendered as SVG elements. The face’s shape updates dynamically as users interact with the control points, showcasing an interactive, physics-based approach to constructing a simple portrait.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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

86% match

Loading thumbnail…

Let's make a face with D3.js

This example builds an animated face from scratch using D3.js v5 and SVG. It shows how basic geometric elements can be combined into a playful character, with each facial feature positioned and styled through D3’s data-binding and attribute manipulation. The code uses `d3.select` to target the SVG container and appends shapes like circles and paths, while `d3.forceSimulation` is not present; instead, simple static coordinates and CSS transitions animate the features. The face appears centered on a 960×500 canvas, with the stylesheet hiding page margins for a clean presentation.

Ffredferramenta

86% match

Loading thumbnail…

let's make a face with d3.js

This example constructs a face using a node-link diagram generated with the D3.js library’s force-directed layout. Each facial feature, such as eyes, nose, and mouth, is formed by a distinct set of circles (nodes) connected by links, with their positions determined by a physical simulation. The SVG rendering uses `d3.forceSimulation` to iteratively solve for node placement, creating a recognizable face from the structured network. The code is a minimal HTML page with an empty SVG canvas and embedded JavaScript that defines the graph structure and applies the force algorithm.

Aantoinecarto

85% match

Loading thumbnail…

Make a Face

This visualization demonstrates the construction of a simple face using direct SVG manipulation. The code accesses the SVG element via `select` from the `d3` library, reading its width and height attributes. It renders a minimalist face graphic within an empty SVG canvas, relying on the `d3.v5` API. The example showcases basic SVG drawing and attribute handling in a D3.js context, with the face’s appearance determined solely by the HTML structure and CSS styling. The rendering is purely SVG-based without any data source.

Ccpsshan

85% match

Loading thumbnail…

let's make a face with D3.js

This example builds a playful human face using D3.js v5, rendered as an SVG composed of circles, ellipses, and curved paths. It demonstrates how to assemble facial features—eyes, pupils, a mouth, and eyebrows—through declarative SVG shape elements positioned with computed coordinates. The code uses D3 selections and scale functions to map data values to visual attributes like position and size, with a static, interaction-free layout. The result shows how raw geometric primitives can be orchestrated into a recognizable character using only standard D3 utilities and inline styling.

CClement Yan

85% match

Loading thumbnail…

Make a Face with D3.js

A playful interactive face is assembled from draggable geometric shapes, with eyes that track the pointer and a mouth that reacts. The example builds the face using SVG elements positioned with D3’s data-join, then applies forces via `d3.forceSimulation` to gently jostle the features. Pointer events drive the pupil movement through `d3.pointer`, while a timer updates the jaw’s position. The code demonstrates layered selections, transition methods like `transition.attrTween`, and event handling for a touch of character.

AAveryBurke

85% match

Loading thumbnail…

Let's make a face by D3

This example demonstrates how to construct a stylized face using SVG shapes and D3.js. The visualization uses `d3.forceSimulation` to position facial elements like eyes, nose, and mouth, while `d3.select` and `d3.append` build the SVG structure. The code references D3 v5 via a CDN and relies on SVG’s native attributes for styling, with a linked CSS file controlling page margins. The face emerges from stacked geometric primitives, showcasing D3’s utility for layout-driven SVG composition rather than interaction or data binding.

Aalshami52

84% match

Loading thumbnail…

Lets make a face with d3.js

This example assembles a friendly face from basic geometric shapes—circles form the eyes, and arcs create the smile—rendered as SVG elements on a 960×500 canvas. The page loads d3.v5 from a CDN and uses standard d3 selections and shape generators to position each facial feature relative to the center of the viewport. No data or interaction is involved; the face is static, with the code simply demonstrating how d3’s coordinate system and SVG primitives combine to construct a recognizable illustration.

AAvijit Roy Karmakar

84% match