Making a face

100%

✓ Published2🌍 Public

Last edited Jan 13, 2021

Created on Jan 12, 2021

This example uses D3.js version 6 to construct a cartoon emoji face entirely from SVG shapes. The code builds the face by appending circles for the head, eyes, and blush, while using arcs from the D3 `arc` generator for the mouth, nose, eyebrows, and cheek curves. Lines add the nose bridge and tongue, and all elements are positioned relative to the SVG's width and height attributes. The rendered output is a static, stylized face on a red background, demonstrating basic SVG drawing with D3's selection and shape APIs.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a face with D3.js

This example builds a cartoon face from layered SVG shapes using D3.js v5, including eyes, eyebrows, a mouth, nose, blush, ears, earrings, a tongue, hair, and a mole. All elements are drawn with basic shapes like circles, rectangles, and an arc-generated path. The eyebrows animate up and down using chained `transition().duration()` calls, creating a simple facial expression. The code imports `select` and `arc` from the D3 library and constructs the face on a 960×500 SVG canvas with a light steel blue background.

IIsabella Jaya Rani C

90% match

Loading thumbnail…

Making a face

This example uses D3 v7 to construct a cartoon-like face from scratch. The visualization draws a green circle as the head, then adds black circles for eyes and a curved path, created with the `d3.arc` API, for the mouth. Two rectangles serve as eyebrows, which animate vertically using `transition` methods, moving up and then back down over two seconds each. The code demonstrates SVG shape creation and grouping, using D3's `select` to target the SVG element and `attr` to set positions and dimensions for each facial feature.

Nnishanthh19

89% match

Loading thumbnail…

Let's make a face with D3.js

This example shows how to build a cartoon face using D3.js v5 SVG primitives, assembling circles for the head and eyes with rectangles for eyebrows and an arc-generated path for the mouth. The code positions these elements within a centered group using translate transformations, while the d3.arc API calculates the mouth’s curved shape based on specified inner and outer radii and angle ranges. All shapes derive their attributes from explicit numeric constants, demonstrating manual coordinate layout rather than data binding or scales.

DDharmateja

89% match

Loading thumbnail…

Make a face with D3.js

This example builds a cartoon face entirely with D3.js shapes in an SVG. It uses `select` to target the SVG element and appends a yellow circle for the head, two black circles for eyes, and rectangles for eyebrows, all positioned with explicit pixel offsets. A mouth is created using the `arc` generator, which defines an annular sector with inner and outer radii and start/end angles. The face is centered by translating a group element to the middle of the 960 by 500 SVG canvas, demonstrating basic SVG shape construction and transformations in D3 v6.

ZZachery2008

89% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face using D3.js v5 and SVG. The code draws a red circle for the head, two white circles for the eyes with black strokes, and a curved mouth created with the `d3.arc()` generator. All shapes are positioned relative to the SVG’s width and height, with eye offsets and the mouth placed inside a transformed group. The visualization relies entirely on basic SVG shape primitives and D3’s arc path helper, with no external data.

AAndres Crovetto

89% match

Loading thumbnail…

Making a Face

This example shows a simple cartoon face built with D3.js and rendered as an SVG. A yellow circle forms the head, two black circles serve as eyes, and an arc path creates the mouth, all positioned relative to the SVG’s center. The code uses D3’s `select` to target the SVG element and `arc` to generate the mouth’s path, with dimensions and offsets defined as variables. All shapes are drawn using SVG primitives.

AAzollos

89% match

Loading thumbnail…

Let's make a face with D3.js

This example demonstrates how to construct an expressive cartoon face entirely from SVG shapes using D3.js v5. It showcases the foundational drawing capabilities of the D3 API by defining circle elements for features like the eyes and nose, alongside path elements for the mouth and eyebrows, while the provided stylesheet and an empty SVG canvas set the stage. The code relies on D3's selection and attribute manipulation methods to position these primitives, and the rendered output is visible in an embedded video that illustrates the underlying construction process.

HHamidur Rahman

89% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a simple cartoon face using basic SVG shapes and D3.js v5. The code creates a yellow circle for the face, two circles for eyes, rectangles for eyebrows, and a semi-circular arc for the mouth, all positioned within a centered group. It uses D3’s `select` to manipulate the SVG, the `arc` generator from the `d3-shape` module to define the mouth path, and inline attribute chaining to set coordinates and styling. The face is assembled procedurally with hardcoded offsets and dimensions, illustrating fundamental SVG construction with D3.

Sshallowater

89% match