Skip to main content
SimilarExport ZIP
100%

Pink Face

✓ Published1🌍 Public
AAsrar Al Qassem
Last edited Mar 6, 2024
Created on Feb 24, 2024

A pink smiley face rendered in SVG animates its blinking eyes, shifting eyebrows, and a mouth that opens and closes. Built with D3.js v5, the example demonstrates core DOM manipulation through selections, shapes, and chained transitions. It uses `transition.attr` and `transition.attrTween` with the `arc` and `interpolate` helpers to animate the mouth’s angles and eyebrow position, while a recursive `blink` function cycles eye radii via timed transitions.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pink Face

A pink smiley face is drawn in an SVG canvas, with a large pink circle outlined in red serving as the face and two smaller black circles as eyes. The visualization is midway to completion, as the mouth is only half drawn, appearing as a pink arc created using D3's `arc` generator. The code selects the SVG element with `d3.select` and appends a group, then uses the `arc` function from D3 v7 to generate the mouth path with specified inner and outer radii and angular start and end points.

AAkrutiKhurana2103
88% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face is drawn with SVG shapes, including pink circles for the head and eyes, rectangles for eyebrows, and an arc for the mouth. The eyebrows animate by moving downward and upward repeatedly using chained `transition()` calls with `duration(1000)`. The example demonstrates basic DOM manipulation with `d3.select`, shape generation via `d3.arc`, and attribute setting on SVG elements.

Ggrandbleu916
86% match
Loading thumbnail…

Make a Face

A pink SVG face with blinking eyebrows and animated facial features responds to simple D3 transitions. The code builds the face by nesting grouped shapes—circles for the head, eyes, and nose, plus rectangles for the eyebrows and an arc-generated path for the mouth—within a central `<g>` element using D3 v6 selection and `arc` API methods. Eyebrows slide and stretch through chained `.transition()` calls, creating a playful, looping expression. All shapes are positioned relative to the group, keeping the face centered as it animates.

Cchrisdreece
85% match
Loading thumbnail…

make a face with D3.js!

A pink smiley face rendered with D3.js animates by moving its eyebrows up and down. The example shows fundamental DOM manipulation, drawing a circle for the head, arcs for the mouth, and rectangles for the brows, all positioned with translation transforms. It uses `d3.select` and `d3.arc` from d3.v7, with chained `transition().duration()` calls to create the eyebrow animation.

Rradiohead-lgl
85% match
Loading thumbnail…

Let's make a face with D3.js!

An animated smiley face is built from basic SVG shapes, with eyes that blink and eyebrows that raise and lower in a looping transition. The example demonstrates fundamental D3.js DOM manipulation by selecting the SVG canvas, appending a group, and positioning circles, rectangles, and a path for the mouth. Using chained `transition()` calls, the code animates the eyebrow’s transform attribute and the eye’s radius over two-second durations. The mouth is drawn with D3’s `arc` generator, and all elements are centered via SVG group transforms.

Zztawil
84% match
Loading thumbnail…

Smily Face

The example shows a green smiling face constructed from SVG shapes, which winks by animating its eyebrows and changing its mouth’s color and orientation. The face is built using d3.select and append to add circles, rectangles, and an arc-generated path, with d3.arc defining the mouth’s curved form. Animations are driven by chained transition calls on SVG attributes, such as transform, to move the eyebrows and rotate the mouth.

CChristine Lanser
83% match
Loading thumbnail…

face

A smiley face rendered in SVG slowly raises and lowers its blue eyebrows. The animation is created with D3.js v5 transitions, which adjust the vertical transform of an eyebrow group over two one-second durations. The static face parts—pink head, green eyes, and a mouth arc—are built using D3's `select`, `append`, and `arc` APIs on the SVG canvas.

PPallaviManupati
83% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn in SVG animates as its eyebrows bounce upward and settle back down. The example demonstrates fundamental D3.js DOM manipulation by constructing the face from appended shapes—circles for the eyes and head, rectangles for the eyebrows, and a path generated with the `arc` helper for the mouth. A chained `transition` with a two-second duration moves the eyebrow group twice, creating the animation. The code uses D3 v5 selections and attributes on a static SVG canvas.

Eevesshaw
83% match