Skip to main content
SimilarExport ZIP
100%

D3 Haha Emoji

✓ Published1🌍 Public
JJezwin Varghese
Last edited Nov 16, 2019
Created on Nov 12, 2019

A yellow emoji face with black-outlined features animates its eyebrows in a looping up-and-down motion. The SVG is constructed using D3 v5 selections, with `d3.arc` generating the wide open laughing mouth path. The left and right eyebrows are rectangles that use chained `transition().duration()` calls to move vertically between two positions repeatedly. The static elements include a large yellow circle for the head and two black eye circles, positioned with explicit coordinates.

AI-generated description
MIT Licensed

Similar vizzes

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

Face With D3

A yellow smiley face is rendered in SVG, with two eyes, animated eyebrows, and a mouth formed by a semicircular arc. The face is centered within a 960 by 500 SVG canvas, with all facial features positioned and styled using D3 selections. The eyebrows use chained D3 transitions to move up and down over two-second intervals, creating a blinking or winking effect. The code imports `select` and `arc` from D3 v5, demonstrating the use of D3's shape generator for the mouth path.

Ssagarknt97
85% match
Loading thumbnail…

D3.js

A smiley face drawn with D3.js animates its eyebrows in a looping vertical motion. The SVG face uses simple shapes: a yellow circle for the head, two circles for the eyes, rectangles for the eyebrows, and a D3 arc for the mouth. The animation is driven by chained `transition().duration()` calls on the eyebrow group, moving it up and down. The code demonstrates fundamental DOM manipulation via `select` and `append`, with hardcoded dimensions for the 960×500 viewport.

PPrathyusha Jampala
85% match
Loading thumbnail…

D3

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.

Aantoinecarto
85% match
Loading thumbnail…

D3.js Intro

This example displays a simple yellow smiley face rendered in SVG, with animated eyebrows that move up and down over time. The face is constructed using D3.js v5 selection methods to append circles, rectangles, and an arc-generated mouth path. The code uses the `arc` API from D3 to define the mouth shape, while `transition` and `duration` create the eyebrow animation. The static SVG container is sized at 960 by 500 units, and the face is centered using a translated group element.

Zzjutkarma
84% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with D3.js that animates its eyebrows in a continuous up-and-down motion. The face is rendered as SVG elements, including circles for the eyes and an arc-generated path for the mouth, all positioned within a central group. Using D3 selections and the `transition().duration()` method, the eyebrows—drawn as rectangles—move in a two-step sequence that repeats once. The code imports `select` and `arc` from the D3 v5 library to create the shapes.

SSimon Fei
84% match