Make a face

100%

✓ Published0🌍 Public

Last edited Feb 25, 2021

Created on Feb 25, 2021

Forked from Shapes and Colors with SVG and CSS

This example shows a simple cartoon face made from SVG shapes: a yellow circle for the head, two black circles for eyes, and an arc for the mouth. The face is centered within a 960×500 SVG canvas, with eye positions calculated relative to the center. The code uses D3 v6 selections to append and style each SVG element, and the `arc` generator from D3’s shape module to create the mouth path with specified inner and outer radii and angle ranges. All styling is applied directly via attributes.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Make a Face with D3.js

This example uses D3.js v7 to draw a simple cartoon face in an SVG canvas. The code creates a yellow circle for the head, two black circles for eyes positioned symmetrically around the center, and a mouth rendered as an arc path using D3's `arc()` generator. The example demonstrates basic SVG shape creation and attribute manipulation, with fixed pixel coordinates for the face features. The mouth is drawn with an inner and outer radius, spanning a half-circle angle range, and is translated to the face's center point.

CCarloWK1202

93% match

Loading thumbnail…

Let's Make A Face

A cartoon face is drawn entirely with SVG shapes, using a yellow circle for the head, black circles for eyes, and a curved path for the mouth created with the D3 `arc` generator. The code uses D3 v7 selections to append elements to an SVG canvas, with explicit attribute setters like `.attr('cx', ...)` and `.attr('d', ...)` to position the eyes and compute the mouth's arc geometry. Elements are grouped in a `<g>` element translated to the canvas center.

Mmuddcohd

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

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

92% match

Loading thumbnail…

Let's Make a Face

A yellow circle with two black eye circles and an arc-based mouth forms a simple face on an SVG canvas. The example uses d3.select to target the SVG element and d3.arc to generate the mouth path with specified inner and outer radii. The rendering is done through D3 v5's SVG manipulation, positioning each shape with absolute coordinates in a 960-by-500 viewport.

Ssalvar2134

92% match

Loading thumbnail…

Lets Make a Face

This example constructs a cartoon face using D3.js v7 and SVG elements. The face consists of a yellow circular head, two black eyes positioned symmetrically, and a mouth drawn with an arc path using the `arc()` function from D3’s shape module. The SVG canvas is 960 by 500 pixels, with elements centered via a translation. Positions for the eyes and head are calculated from the SVG’s width and height attributes, and the mouth uses specified inner and outer radii with start and end angles. The code imports `select` and `arc` from D3.

Ggabrielribeirob

92% match

Loading thumbnail…

make a face

This example draws a simple cartoon face using D3.js v5 and SVG. A yellow circle forms the head, two black-outlined circles serve as eyes, and an arc path creates a smiling mouth. The code uses d3.arc to generate the mouth’s path with specified inner and outer radii and angles, while d3.select appends circles and a group element to the SVG. The face is positioned using fixed coordinates and the viewBox dimensions are read from the SVG attributes.

Jjiayuansun

92% match

Loading thumbnail…

Making a face

A yellow circle face with black eyes and rectangular eyebrows is drawn in the center of an SVG canvas. The face is followed by a smile-shaped path generated using the `d3.arc` function, though only the arc’s initial frame is rendered. All shapes are appended to a group translated to the canvas midpoint, with dimensions and positions defined by constants. The example uses D3 v5’s `select` and `arc` methods, with static SVG elements—no animation or data binding is visible.

DDarshanil

92% match