Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Lets make a face

✓ Published0🌍 Public
EEsteLima
Last edited Feb 23, 2021
Created on Feb 23, 2021

A yellow face with black outlines is drawn on an SVG canvas using D3 v6. The animated eyebrows move up and down via chained `transition().duration()` calls. The face is constructed from primitive shapes: circles for the head and eyes, and a path generated with the `arc()` API for the mouth. The code imports `select` and `arc` directly from D3.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Lets make a face

This example shows a simple yellow cartoon face with eyes, eyebrows, and a mouth, built entirely with D3.js v6 and rendered as SVG. The eyebrows animate by moving up and down repeatedly over two-second transitions. The face is centered using a group translation, and the mouth is drawn with the `d3.arc` path generator. The code uses `select` and `arc` from the D3 library, with hardcoded dimensions for spacing and radius, displaying a looping motion without any external data source.

EEsteLima
95% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This animated SVG face shows a yellow circle with two eyes, eyebrows, and a mouth, and the eyebrows move up and down over time. The code uses D3 v5 to manipulate the DOM, appending SVG shapes and applying a chained `transition().duration(2000).attr('transform', ...)` to animate the eyebrow group’s vertical position. It imports `select` and `arc` from D3 to select the SVG element and generate the mouth’s path with an annular arc geometry.

Nnsatyaprakash22
94% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This animated SVG face shows a yellow circle with two eyes, eyebrows, and a mouth, and the eyebrows move up and down over time. The code uses D3 v5 to manipulate the DOM, appending SVG shapes and applying a chained `transition().duration(2000).attr('transform', ...)` to animate the eyebrow group’s vertical position. It imports `select` and `arc` from D3 to select the SVG element and generate the mouth’s path with an annular arc geometry.

Nnsatyaprakash22
94% match
Loading thumbnail…

Fork of Let's make a face with D3.js

A yellow circle face with black eyes, eyebrows, and a mouth is drawn in SVG using D3 v6. The mouth is generated with the `arc` generator, while the eyes and eyebrows are circles and rectangles. Eyebrows animate vertically via chained `transition().duration()` calls, moving down and then back up, using D3's selection and transition methods.

SSerena Fang
94% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js

This example draws a cartoon face in SVG using D3 version 5. It builds the head, eyes, eyebrows, and mouth from primitive shapes, positioning them with coordinate math and an SVG transform. The code uses D3’s `select` to target the element, `arc` to generate the mouth path, and a chained `transition()` call to animate the eyebrows up and down over two seconds. A yellow circle, black eye circles, and gray eyebrow rectangles are styled via attributes.

Jjlspangl
94% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow face with black-outlined eyes and brows animates its eyebrows upward and back downward over four seconds. The figure is drawn with D3 selections, using SVG `circle` elements for the face and eyes, `rect` elements for the brows, and a `path` generated by the `d3.arc()` helper for the mouth. The brow motion relies on chained `transition.attr` calls targeting a transformed group, all rendered in a single SVG canvas.

Ppriyankabpally@gmail.com
93% match
Loading thumbnail…

Fork of Let's make a face with D3.js

A yellow SVG face is drawn with D3.js v5, featuring two large eyes and an open mouth rendered as an arc path. The face uses `d3.select` and `d3.arc` to construct the shapes on an SVG canvas. The code includes a commented-out animated eyebrow section that would use `transition` to move eyebrows up and down, though the active version shows only static features. All elements are positioned using SVG transform attributes, with the face centered on a 960×500 viewport.

Jjlspangl
93% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js

A smiling face built from yellow and black SVG shapes animates its eyebrows upward and downward in a looping motion. The example constructs the face with D3 v6 selections, positioning eyes as circles, eyebrows as rectangles, and a mouth as a path generated by the `arc` generator. Transitions chain two 2-second `transition` calls on the eyebrow group to move it vertically, creating the expressive blink-like effect within the fixed 960×500 viewport.

JJorrr2
93% match