Skip to main content
SimilarExport ZIP
100%

D3

✓ Published1🌍 Public
Aantoinecarto
Last edited Jul 4, 2019
Created on Jul 4, 2019

A smiling face is drawn in yellow with black outlines, featuring two eyes, animated eyebrows that move up and down, and a curved mouth. The animation is built with D3 v5 transitions, where the eyebrow group’s transform attribute is tweened over two seconds to shift vertically, then returns. The SVG is centered using a translated `<g>` element, and the mouth’s arc path is generated with the `d3.arc()` helper, while circles and rectangles define the other facial features.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Face

A smiling face is drawn as a yellow circle with eyes, eyebrows, and a mouth, and the eyebrows perform a repeated up-and-down animation. The SVG is generated using D3 v5, with circles for the face and eyes, rectangles for the eyebrows, and an `arc` path for the mouth. A D3 transition with a 2000-millisecond duration drives the eyebrow movement, translating the group along the y-axis.

Rrdeichert
94% match
Loading thumbnail…

d3js

A yellow smiley face with black outlines and animated eyebrows is drawn in a 960x500 SVG canvas using D3 v5. The face comprises circles for the head and eyes, rectangles for eyebrows, and a path generated with the D3 `arc` function for the mouth. The `d3.select` and `d3.transition` APIs animate the eyebrow group’s vertical position over two seconds, creating a blinking effect. All shapes are appended to a central group, with code structured for clarity.

Ppei9223
92% match
Loading thumbnail…

D3 Face

A yellow circle with black outlines forms a face, featuring two eyes, rectangular eyebrows, and a half-circle mouth. The eyebrows animate by moving upward over two seconds and then returning to their original position. The visualization is built with D3 v7, using SVG shapes within a root group, and the mouth is drawn with the `d3.arc` path generator. The animation relies on chained `transition().duration()` calls, offering a simple, playful demonstration of D3's selection and transition methods.

Hhenryspradlin
91% match
Loading thumbnail…

D3 Face

A cartoon face rendered in SVG uses D3 v5 to build a yellow circle head with black eyes and an arc-based mouth. Eyebrows, drawn as rectangles, animate vertically through chained `transition` calls on a group element. The code leverages D3’s `select` and `arc` APIs, with static attributes for positioning and a repeated eyebrow movement lasting two seconds per phase, demonstrating basic SVG construction and timed animation.

Ttenghaoman
91% match
Loading thumbnail…

D3.js

A smiley face rendered in SVG animates by raising and lowering its eyebrows. The yellow circular head, black eyes, and mouth are drawn using D3 v6 shape generators and SVG primitives. The code uses `arc()` for the mouth, `circle` and `rect` elements for facial features, and chained `transition().duration()` calls to move the eyebrow group up and down over two-second intervals.

SSerena Fang
91% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black facial features forms a smiley face on an SVG canvas. Two eyes and a mouth are drawn using D3 shapes, while a pair of dark eyebrows animate vertically in a looping transition, moving up and then back down. The face is centered via a group transform, with the mouth created using the d3.arc path generator. The animation uses chained transition calls on an SVG group element to shift the eyebrows repeatedly.

HHasideluxe
91% match
Loading thumbnail…

Face with D3

A yellow smiley face rendered in SVG with D3 v6. The example shows eyebrows that animate up and down indefinitely using chained `transition.duration` calls. It builds the face with basic shapes: circles for the head and eyes, rectangles for brows, and an `arc()`-generated path for the mouth. D3's `select` and `arc` functions handle SVG creation and geometry.

AAshutosh Singh
91% match
Loading thumbnail…

D3

A yellow circle with eyes, eyebrows, and a mouth forms a smiling face, rendered as SVG elements. The right eyebrow animates upward and back down over four seconds using D3 transitions. The face is centered in a 960×500 viewport, with the mouth drawn via the `arc` generator and all shapes grouped and translated using D3's `select` and `append` methods. The animation runs in an infinite loop, triggered by chained `transition().duration()` calls on the eyebrow rectangle.

JJeffrey Miiller
91% match