Skip to main content
SimilarExport ZIP
100%

Let's make a face

✓ Published0🌍 Public
AAndrew Babilonia
Last edited Jul 2, 2021
Created on Jul 2, 2021

A simple SVG face is drawn with D3 v7, composed of a yellow circular head, two black eyes, and a mouth. The code uses D3 selections and the `arc` generator to create the mouth path, while circles are positioned relative to the SVG's width and height. The example demonstrates common SVG attributes like `cx`, `cy`, `r`, `fill`, and `stroke`, rendered directly to the SVG canvas in a fixed 960x500 viewport.

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 draws a simple yellow face using SVG shapes. It demonstrates basic D3.js selections and attribute manipulation by creating a large circle for the head, two smaller circles for eyes, and an arc for the mouth. The code uses d3.select to append elements, parse SVG width and height attributes, and a d3.arc path generator with inner and outer radii plus start and end angles. The right eye is positioned using an SVG group with a transform translation, while the left eye and mouth use direct coordinates.

PPUUDI
94% 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
94% match
Loading thumbnail…

let's make a face

This example draws a simple cartoon face using SVG primitives styled with D3 v7. It shows a yellow circle head with two eyes, purple elliptical eye sockets, and a red arc-based mouth. The code uses D3 selections and the `d3.arc` shape generator to construct the mouth path, while positioning elements via explicit `x` and `y` attributes on a 1000×500 SVG canvas.

Ppengming0807
94% match
Loading thumbnail…

Let's make a face

A simple SVG face is drawn with a large yellow circle for the head and two smaller black circles for eyes. Built with D3 v5, the example uses `select` to target the SVG element, then appends and styles the circles with chained `attr` calls for position, radius, fill, and stroke. The coordinates are derived from the SVG’s `width` and `height` attributes to center the face, while a plain CSS file resets the page margin and hides overflow.

PPUUDI
94% match
Loading thumbnail…

Lets make a face

A simple face is drawn entirely with SVG shapes in a 960-by-500 viewport, using a yellow circle for the head, two black circles for eyes, and a path generated by `d3.arc()` for the mouth. The code selects the SVG element with `d3.select` and sets each shape’s attributes—`r`, `cx`, `cy`, `fill`, and `stroke`—explicitly. The mouth is positioned relative to a `<g>` group translated to (250,200), and the arc spans from angle 0 to π. This example demonstrates basic SVG rendering with static D3 v5 selections, without data binding or interaction.

Ppvhch
94% match
Loading thumbnail…

Lets make a face

A simple face is drawn entirely with SVG shapes in a 960-by-500 viewport, using a yellow circle for the head, two black circles for eyes, and a path generated by `d3.arc()` for the mouth. The code selects the SVG element with `d3.select` and sets each shape’s attributes—`r`, `cx`, `cy`, `fill`, and `stroke`—explicitly. The mouth is positioned relative to a `<g>` group translated to (250,200), and the arc spans from angle 0 to π. This example demonstrates basic SVG rendering with static D3 v5 selections, without data binding or interaction.

Ppvhch
94% match
Loading thumbnail…

Let's make a face

A yellow circle with black outlined eyes forms a simple face, with a curved mouth drawn as an arc. The visualization uses D3 v6 selections to append SVG circles for the face and eyes, and an SVG path for the mouth. The `arc` generator from D3 creates the mouth’s semicircular shape, positioned using explicit pixel coordinates for the eyes and a translation for the mouth group. All elements are rendered directly onto an SVG canvas with fixed dimensions.

Mmaximus2581
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
93% match