Skip to main content
SimilarExport ZIP
100%

When you are excited about the long weekend but its still Wednesday!

✓ Published1🌍 Public
MMukund Khandelwal
Last edited Aug 29, 2018
Created on Aug 29, 2018

A green, SVG-rendered smiley face with red eyes and black glasses sits against a dark frame. The character’s eyebrows animate upward, then settle back down, conveying the emotional arc of anticipating a long weekend. The code uses D3 v5 with `select`, `arc`, and chained `transition` calls to move the eyebrow group. Static shapes like circles, rectangles, and lines define the face, while the mouth is drawn with a D3 arc path generator.

AI-generated description

Smiley Face from Mukund Khandelwal

Understood rotation of eyebrows from Jonathan Wang.

MIT Licensed

Similar vizzes

Loading thumbnail…

When you are excited about the long weekend but its still Wednesday!

A green smiley face with red eyes, thick black glasses, and a partial arc mouth sits on a white canvas. The eyebrows rotate slightly outward, then animate upward and back down, conveying a mood of tired anticipation. Built with D3 v5, the visualization uses SVG shapes—circles, rectangles, lines, and an arc path—and applies a chained `transition` to animate the eyebrow group’s transform over four seconds. The code constructs each facial feature by translating groups relative to the SVG’s center.

MMukund Khandelwal
96% match
Loading thumbnail…

Smiling face with D3.js!

This example animates a cheerful smiley face drawn entirely with SVG shapes, with its eyebrows moving up and down in a looping motion. The face itself is constructed using basic D3.js selections to append a yellow circle, two eye circles, rectangular eyebrows, and an arc-based mouth. The animation is driven by chained `transition().duration()` calls that alter the eyebrow group’s transform attribute, moving it vertically. The code imports `select` and `arc` from D3 v5, and positions all elements relative to the SVG’s center by applying a translate transform to a container group.

KKamalabot
78% match
Loading thumbnail…

11506566 - Smiley face

A cartoon smiley face with animated eyebrows and a mustache, beard, ears, teeth, and hair is rendered in SVG. The face is constructed using D3 selections and shape generators, including `arc` for the mouth and `line` with `d3.curveBasisClosed` for the mustache and beard. Eyebrows animate via chained `transition().duration(2000)` calls that move them up and down. The example demonstrates fundamental DOM manipulation with D3 v5, building all elements from hardcoded coordinates and attributes rather than external data.

EEshwarreddyt
78% match
Loading thumbnail…

Let's make a face with D3.js!

The visualization demonstrates a smiley face constructed from SVG primitives, with animated eyebrows that raise and lower over a four-second cycle. It shows how D3.js v5 manipulates the DOM by appending circles, rectangles, and a path formed with the `arc` generator to build the face. A chained `transition` call on the eyebrows group animates the vertical offset, first lifting then lowering the brows. The code imports `select` and `arc` from the D3 library and uses the `transition().duration()` API to create the timed motion.

SSirikanyaR
78% match
Loading thumbnail…

Happy face :)

A cheerful, hand-drawn-style face rendered as a yellow circle with black outlines, two eyes, and a curved smile, all built with D3 v5. The eyebrows blink repeatedly via chained `transition().duration()` calls that move them up and down every two seconds. The smile is drawn using the `d3.arc` path generator with specified inner and outer radii and angles. This static SVG animation demonstrates basic shape composition and timed attribute transitions in D3.

Nnobbak
78% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn in SVG animates as its eyebrows bounce up and down. Built with D3.js v5, the example constructs circles for the eyes and a path using the `arc` generator for the mouth, then applies chained `transition()` calls to shift the eyebrow group’s transform. The code demonstrates core DOM selection and manipulation via `d3.select`, plus attribute setting and SVG grouping, with no external data source.

BBrett Cunningham
78% 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
78% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG shapes has animated eyebrows that move up and down in a looping transition. The example demonstrates fundamental D3.js DOM manipulation, building the face with `select`, `append`, circles, rectangles, and a mouth path generated using the `arc` helper. Eyebrow motion is created through chained `transition().duration()` calls on a group element, while the face is centered using an SVG `transform`. The code uses D3 v5 modules and relies on static shape attributes rather than data binding.

MMMoronto
78% match