Skip to main content
SimilarExport ZIP
100%

Lets make a face!

✓ Published2🌍 Public
PPrayagvin
Last edited Jul 28, 2020
Created on Jul 28, 2020

A smiling face made of SVG shapes animates its eyebrows upward and downward in a loop. The yellow circular head, two eyes, and arc-shaped mouth are drawn with D3 selections and an `arc()` path generator. Eyebrow motion uses chained `transition().duration(2000)` calls to shift the group’s `transform` attribute. The example runs in React, rendering static SVG elements with D3 v5.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Lets make a face

A smiling face constructed from D3 shapes animates its eyebrows upward and downward in a repeating cycle. The yellow circular head, black-outlined eyes, and arc-based mouth are drawn as SVG elements using D3's `select`, `append`, and `arc` APIs. The face’s components are positioned via translation transforms, while the eyebrow motion relies on D3’s `transition` with a two-second duration. This React-framework example demonstrates animated SVG composition with D3 v5.

HHaifan Li
94% match
Loading thumbnail…

Let's Make a Face

A smiling face drawn with SVG shapes animates its eyebrows upward in a repeating loop. The example uses D3 v5 selections to append a yellow circle for the head, two dark circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrow group transitions vertically via `transition.attr` with a duration of 1000 milliseconds, creating a subtle bouncing effect. All elements are centered using a translated SVG group, with hardcoded pixel values for spacing and geometry.

Aaurelio-david
94% match
Loading thumbnail…

Lets make a face!

This example builds a smiling cartoon face on a yellow circle, animating its expressive eyebrows. Using React and SVG, the face is constructed with D3 selection methods to append a face circle, eyes, eyebrows, and an arc-based mouth. The code applies a chained `transition().duration(2000)` to the eyebrows group, moving it up and then back down to create a winking-like motion. All facial features are centered within an SVG canvas using a translated group, with D3’s `arc()` function generating the mouth’s curved path.

BBhavyatulasi
93% match
Loading thumbnail…

Let's Make a Face

A cartoon face composed of SVG shapes animates its eyebrows up and down. The yellow face, red-outlined circle, and black eyes and mouth are built with D3 selections and the `arc()` generator for the smile. Eyebrow motion uses chained `transition().duration(1000)` calls on a group, moving it vertically. The React starter code wraps a static D3 v5 setup, rendering into a centered SVG group on a 960 by 500 canvas.

Aaurelio-89
93% match
Loading thumbnail…

Lets make a face

A smiling cartoon face is rendered as a yellow circle with black-outlined features, including eyes, eyebrows, and an arc-shaped mouth. The eyebrows animate by moving upward and then back down over two seconds. The example uses D3.js v5 with React, building SVG shapes with `select`, `append`, and `arc` for the mouth path. Transitions are applied via `transition().duration()` to create the eyebrow movement.

Ggoshashi
93% match
Loading thumbnail…

Lets make a face

A smiling face is drawn with D3.js in an SVG, featuring a yellow circle head, two eyes, and a mouth arc. The code uses basic SVG shapes like `circle` and `rect`, and the `d3.arc()` function to generate the mouth path. The eyebrows are animated with chained `transition()` calls, moving up and down over 500ms intervals. This example is built with React and D3 v5, with the face centered and scaled based on the SVG’s dimensions.

Llukastieber
93% match
Loading thumbnail…

Lets make a face with d3

A smiling yellow face rendered in SVG is built from geometric primitives using D3 selections, with animated eyebrows that repeatedly raise and lower. The code constructs circles for eyes, rectangles for brows, and a path generated by the `d3.arc` API for the mouth, all grouped and positioned via SVG transforms. The eyebrow animation uses chained `transition().duration()` calls to toggle the y-offset between states. The example relies on D3 v5 and vanilla SVG.

SSurya Teja Parnampedu
92% match
Loading thumbnail…

Let's make a face with D3.js!

This example displays a yellow, cartoon-style face built with SVG shapes, including two eyes, rectangular eyebrows, and a smiling mouth. The eyebrows continuously move upward and downward through a two-stage chained animation cycle. The face is constructed in D3 v5 using `d3.select` and `d3.arc`, with shape attributes set directly. A React starter is available, but the primary implementation uses plain D3 with SVG transitions to animate the eyebrow group’s translate transform.

CCyc-Evelyn
92% match