Skip to main content
SimilarExport ZIP
100%

let's make a face

✓ Published0🌍 Public
Ppengming0807
Last edited Jan 7, 2022
Created on Oct 14, 2021

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.

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 with d3.js

A yellow circle with black eyes and an arc-based mouth forms a simple cartoon face in an SVG canvas. The code uses d3-selection to append and position the circles, while the mouth is drawn with d3.arc() using inner and outer radii plus start and end angles. All shapes are rendered directly as SVG elements, with dimensions derived from the SVG attributes. The face is centered within a 680×500 viewport, demonstrating basic geometric composition without data binding or interaction.

RRoque Luís Pina
93% match
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
93% 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
93% 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
93% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to construct a simple cartoon face using D3.js v7 with SVG rendering. It draws a yellow circular head, two black eyes, and an arc-shaped mouth using basic shape primitives and the `d3.arc` generator. The face is assembled by appending SVG circles and a path to an SVG canvas, with the mouth’s arc defined by inner and outer radii and start/end angles. Positional attributes like `cx`, `cy`, and `r` are set explicitly, while a group element applies a translation transform to center the head.

Ppengyugatech
93% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to draw a simple, static cartoon face on an SVG canvas. It shows a yellow circular head, two colored eyes (dodger blue and tomato), and a black mouth created with an arc path. The code uses D3's `select` to target the SVG element, `append` with `circle` and `path`, and the `arc` generator to define the mouth’s geometry based on inner/outer radii and angle ranges. Positions are computed relative to the canvas center, and styling is applied via SVG attributes.

WWill Bainton
92% match
Loading thumbnail…

Let's make a face with D3.js

A simple D3.js example draws a cartoon face using SVG shapes. The code selects an SVG element and appends a yellow circle for the face, two black circles for eyes, and a path for the mouth. The mouth uses `d3.arc()` to generate a partial ring based on specified inner and outer radii and start and end angles. The example demonstrates importing `select` and `arc` from the d3 module and loading D3 v7 via UNPKG.

Cccocco1
92% match