Skip to main content
SimilarExport ZIP
100%

Making a face with Curran's help

✓ Published2🌍 Public
RRamon96
Last edited Nov 15, 2019
Created on Nov 13, 2019

A yellow SVG face with animated eyebrows demonstrates basic D3 v5 shape and transition APIs. The code uses `d3.select`, `d3.arc`, and chained `transition().duration()` calls to move the brow rectangles up and down over two seconds. Eyes and brows are positioned with explicit `attr` values for spacing and offsets, while the mouth is drawn as a half-arc path. The face is centered by translating a group element to the middle of the 960×500 SVG canvas.

AI-generated description

An example including some commonly used features of SVG.

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

Fork of Making a face with Curran's help

This example illustrates how to construct a simple cartoon face from basic SVG shapes. A yellow circle forms the head, with two eyes and animated eyebrows that move up and down over time, and an arc path for a mouth. The code uses the D3.js library, specifically the `select`, `append`, `attr`, and `transition` APIs, to build and manipulate the SVG elements. It employs a transition duration of 2000 milliseconds to create the brow animation, and an arc function to define the mouth’s path.

AAamir Hameed mir
89% match
Loading thumbnail…

Making a face

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.

Ccornshoots
89% match
Loading thumbnail…

SVG Face

A smiling yellow SVG face with animated eyebrows demonstrates basic D3 shape and transition techniques. The face is centered using SVG groups and transforms, with circles for eyes, rectangles for eyebrows, and a path generated by D3’s `arc` function for the mouth. The eyebrows move upward and return via chained `transition().duration()` calls. The example uses d3-v5 select and arc APIs to build the static face and animate its expressions purely through SVG attribute interpolation.

Rrams211
89% match
Loading thumbnail…

SVG Face

A smiling yellow SVG face with animated eyebrows demonstrates basic D3 shape and transition techniques. The face is centered using SVG groups and transforms, with circles for eyes, rectangles for eyebrows, and a path generated by D3’s `arc` function for the mouth. The eyebrows move upward and return via chained `transition().duration()` calls. The example uses d3-v5 select and arc APIs to build the static face and animate its expressions purely through SVG attribute interpolation.

Rrams211
89% 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
89% 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
88% 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
88% match