Skip to main content
SimilarExport ZIP
100%

Let's make a face

✓ Published1🌍 Public
PPUUDI
Last edited Aug 7, 2020
Created on Jul 28, 2020
Forked from 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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face

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.

AAndrew Babilonia
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…

Let's make a face

This example uses D3.js (v6) to draw a simple, stylized face on an SVG canvas. A yellow circle forms the head, with two black eyes and rectangular eyebrows positioned symmetrically, and a mouth created using the `d3.arc` path generator. The face is centered within the 960x500 viewport via a translated group element. All shapes are appended directly using D3 selection methods, with hardcoded pixel values for spacing and dimensions.

OOnur
94% match
Loading thumbnail…

Let's make a face

A yellow circle forms a face with two black eyes and a wide arc-based mouth, all rendered as SVG elements. The example demonstrates basic D3.js v5 selection and shape generation, using `d3.select` to append circles and set positional attributes, and `d3.arc` to create a mouth path from inner and outer radii plus start and end angles. All geometry is computed from the SVG’s width and height attributes, with no external data.

KKwadwo 'Que' Amankwa
94% match
Loading thumbnail…

Let's make a face

This example draws a simple cartoon face in SVG using D3.js version 5. It composes a yellow circle for the head, two black circles for eyes, and an arc-based path for the mouth, all centered within an SVG canvas. The code uses D3’s `select` method to target the SVG element, `append` to add shapes, and the `arc` generator from D3 to create the mouth’s curved path. Eyebrow rectangles are also included, though their reference to an undefined `eyebrowsG` group indicates incomplete wiring in the provided source.

PPUUDI
94% match
Loading thumbnail…

Let's make a face

This example draws a simple cartoon face in SVG using D3.js version 5. It composes a yellow circle for the head, two black circles for eyes, and an arc-based path for the mouth, all centered within an SVG canvas. The code uses D3’s `select` method to target the SVG element, `append` to add shapes, and the `arc` generator from D3 to create the mouth’s curved path. Eyebrow rectangles are also included, though their reference to an undefined `eyebrowsG` group indicates incomplete wiring in the provided source.

PPUUDI
94% match
Loading thumbnail…

Let's make a face with D3.js

This example draws a simple yellow face in an SVG canvas using D3.js v5. It centers a circle for the head, then positions two smaller circles for eyes and an arc-generated path for a mouth. The code uses D3's `select` to target the SVG element, `attr` for setting dimensions, and the `arc` API from D3's shape utilities to define the mouth path.

BBryan Liu
93% match
Loading thumbnail…

Lets make a face

This example shows a yellow circle face created with SVG, built using D3 v5 selection and attribute methods. The code appends circles to an SVG canvas, setting radius, position, fill color, and stroke properties directly through `.attr()`. It uses `d3.select` to target the SVG and reads its width and height attributes to center the face. The partially completed code includes a commented placeholder for a left eye, and the page loads D3 from a CDN with a separate stylesheet that hides overflow.

DDaniel Piqué
93% match