Skip to main content
SimilarExport ZIP
100%

Let's make a face

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

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

Let's make a face with D3.js!

This example builds a cartoon face out of simple SVG shapes, including circles for the head and eyes, rectangles for the eyebrows, and a path for the mouth. The code uses D3.js v5’s `select` and `arc` functions, with the mouth generated via an arc generator based on specified inner and outer radii and angles. The eyebrow group animates up and down using chained `transition()` calls with a two-second duration, moving the transform attribute. All elements are centered within a yellow, black-stroked head on a 960×500 SVG canvas.

Rruubi0807@gmail.com
93% match
Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v5 to draw a simple cartoon face in an SVG canvas, assembling circles and an arc path with basic shape attributes. The face is constructed with a yellow head circle, black eye circles spaced symmetrically, and a mouth created using the `d3.arc` generator with specified inner and outer radii and angular bounds. The code imports `select` and `arc` from D3, sets dimensions dynamically from the SVG, and positions elements relative to the viewport center. The rendering approach is purely SVG-based, with static styling applied via attributes and a minimal CSS file.

Aadelgrosso
93% 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
93% 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
93% match
Loading thumbnail…

Let's make a face with D3.js!

This example constructs a simple cartoon face using D3.js v5, rendered as SVG elements. The code uses the `select` function to target the SVG canvas, then appends and positions a yellow circle for the head, two black circles for the eyes, and a path for the mouth. The mouth’s arc shape is generated using the `arc` function, specifying inner and outer radii and angular ranges. All elements are centered through a group translation, using static, hard-coded values for spacing and dimensions.

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