Skip to main content
SimilarExport ZIP
100%

Making a face

✓ Published1🌍 Public
Nnishanthh19
Last edited Sep 22, 2023
Created on Sep 22, 2023

This example uses D3 v7 to construct a cartoon-like face from scratch. The visualization draws a green circle as the head, then adds black circles for eyes and a curved path, created with the `d3.arc` API, for the mouth. Two rectangles serve as eyebrows, which animate vertically using `transition` methods, moving up and then back down over two seconds each. The code demonstrates SVG shape creation and grouping, using D3's `select` to target the SVG element and `attr` to set positions and dimensions for each facial feature.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's Make a Face with D3.js

This example animates a simple cartoon face built entirely with SVG shapes in D3.js. Shown head-on, the face consists of a circular head, two eyes, rectangular eyebrows, and an arc-based mouth, all centered within an SVG canvas. The eyebrows repeatedly bounce upward and downward using chained `transition` calls with a two-second duration each. The code leverages D3 v5’s `select`, `arc`, and `transition` APIs, constructing the face by appending circles, rectangles, and paths to a translated group element.

Tthespiraltree
91% match
Loading thumbnail…

Fork of Making a face

This example animates a simple cartoon face built entirely from SVG shapes. A green circle serves as the head, with two black circles for eyes, a dark arc for the mouth, and two rectangles for eyebrows. The eyebrows move up and down repeatedly in a looping animation using chained `transition().duration()` calls. The visualization is constructed with D3 v7, using `select` to target the SVG, `arc()` to generate the mouth path, and SVG primitives like `circle` and `rect`.

Nnishanthh19
90% match
Loading thumbnail…

Let's make a face with D3.js

This D3.js example builds a cartoon face entirely out of SVG primitives—circles for eyes and the head, rectangles for eyebrows, and an arc path for the mouth. The face is centered in an SVG canvas using a group transform. The code animates the eyebrows with sequential `transition().duration(2000)` calls, moving them upward and back down. It relies on standard D3 v5 methods like `select`, `append`, and `attr`, using the `arc` helper to generate the mouth’s path data within the SVG.

WWhatTheFork85
90% match
Loading thumbnail…

Let's make a face with D3.js

This D3.js example builds a cartoon face entirely out of SVG primitives—circles for eyes and the head, rectangles for eyebrows, and an arc path for the mouth. The face is centered in an SVG canvas using a group transform. The code animates the eyebrows with sequential `transition().duration(2000)` calls, moving them upward and back down. It relies on standard D3 v5 methods like `select`, `append`, and `attr`, using the `arc` helper to generate the mouth’s path data within the SVG.

WWhatTheFork85
90% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v6 to draw a cartoon face with black circular head, red eyes, eyebrows, and mouth. Built with SVG elements, the face includes animated eyebrows that shift upward and back using chained `transition().duration()` calls. The code imports `select` and `arc` from D3, using the `arc()` generator to create the brow and mouth shapes with specified inner/outer radii and angles. Static circle elements form the eyes, while grouped paths handle the animated facial features.

MMustafa Shaheer Hamid
89% match
Loading thumbnail…

Let's Make a Face with D3.js!

This example demonstrates how to construct a simple cartoon face using SVG primitives created with D3.js v5. A yellow circle forms the head, with two smaller circles for eyes, rectangular eyebrows, and a path generated by the `arc` function for the mouth. The code leverages D3’s selection and creation API, including `select`, `append`, and attribute setting, while a chained `transition().duration(2000)` animation repeatedly moves the eyebrows up and down. The face is centered within an SVG canvas, with styling provided by an external CSS file.

Iimmanentdomain
89% match
Loading thumbnail…

Making a face

This example uses D3.js version 6 to construct a cartoon emoji face entirely from SVG shapes. The code builds the face by appending circles for the head, eyes, and blush, while using arcs from the D3 `arc` generator for the mouth, nose, eyebrows, and cheek curves. Lines add the nose bridge and tongue, and all elements are positioned relative to the SVG's width and height attributes. The rendered output is a static, stylized face on a red background, demonstrating basic SVG drawing with D3's selection and shape APIs.

SSharvariPhadke
89% match
Loading thumbnail…

Let's make a face with D3.js

This example builds a cartoon face out of basic SVG shapes—circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth—all centered within an SVG canvas using D3.js v5. The code imports `select` and `arc` from the D3 library to append elements and compute the mouth’s path. A chained `transition().duration(2000)` sequence animates the eyebrows up and down, creating a winking expression. The layout uses fixed numeric constants for spacing and offsets, with no external data source.

Rracoo
89% match