Skip to main content
SimilarExport ZIP
100%

Making a face

✓ Published4🌍 Public
Ccornshoots
Last edited Mar 12, 2021
Created on Mar 12, 2021

A yellow cartoon face is drawn on an SVG canvas, with eyes, eyebrows, and a mouth formed by D3 shape primitives. The eyebrows animate upward and downward in a looping transition, while the mouth is rendered using the `d3.arc` path generator. The example demonstrates importing `select` and `arc` from the D3 v5 module, manipulating SVG attributes, and applying chained `transition` calls with a two-second duration.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Making a face

A yellow circle face with two eyes and eyebrows is rendered in SVG, with the right eyebrow animating upward and downward over two seconds. The mouth is drawn as a half-circle arc using the `d3.arc` helper. Built with D3 v5, the code uses `select`, `attr`, and chained `transition` calls to control the animation, positioning elements via SVG transforms.

Rrcumani
94% match
Loading thumbnail…

Making a face

A yellow circle with eyes, eyebrows, and a mouth forms a face using D3 v5 selections and SVG shapes. The right eyebrow animates upward and back down via chained `transition().attr()` calls over two seconds each, while the mouth is drawn with `d3.arc()`. All elements are positioned relative to a centered group, with eyes offset by fixed pixel distances, creating a simple, animated cartoon face.

Ttlrdevere
93% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with two eyes, animated eyebrows, and an arc-shaped mouth forms a cartoon face in an SVG canvas. The eyebrows move up and down repeatedly via chained `transition().duration()` calls. Built with D3 v5, the example uses `select`, `append`, and `arc()` to construct the face, positioning elements with SVG transforms and hard-coded dimensions.

Jjesramyep1263
93% match
Loading thumbnail…

Making a face

A yellow circle face with black eyes and rectangular eyebrows is drawn in the center of an SVG canvas. The face is followed by a smile-shaped path generated using the `d3.arc` function, though only the arc’s initial frame is rendered. All shapes are appended to a group translated to the canvas midpoint, with dimensions and positions defined by constants. The example uses D3 v5’s `select` and `arc` methods, with static SVG elements—no animation or data binding is visible.

DDarshanil
93% match
Loading thumbnail…

making a face

A yellow circle with black features forms a simple face, with two eyes and a mouth drawn using an SVG path. The eyebrows are animated rectangles that move down and back up over four seconds. The visualization uses D3 v6 selections to append SVG shapes and the `arc` generator from D3 to create the mouth path. The `transition` method handles the eyebrow animation, while the SVG coordinate system positions features around a central group.

Jjwu534@gmail.com
92% 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
92% match
Loading thumbnail…

Make a Face

A yellow circle face with eyes, eyebrows, and a mouth is drawn using D3 v5 SVG primitives. The code uses `d3.select`, `d3.arc`, and `transition.attr` to animate the eyebrows downward and back upward over two seconds. All shapes are positioned relative to the SVG center via a translated group, with the mouth rendered as an arc path. The visualization demonstrates basic shape composition and chained transitions.

Aalibabagalaxy
92% match
Loading thumbnail…

Make a face with D3.js

A smiling face made of SVG shapes is drawn with D3.js v5. The face uses a yellow circle, black-outlined eyes, rectangular eyebrows, and an arc-based mouth. A chained `transition` repeatedly raises and lowers the eyebrows over two-second intervals. The code imports `select` and `arc` from the D3 library, positions elements with SVG attributes, and animates the eyebrow group via `transition.attr`. The example demonstrates basic SVG composition and D3 transitions on a 960×500 canvas.

TTapiwa Lason
92% match