Skip to main content
SimilarExport ZIP
100%

Smily to Sad Face

✓ Published1🌍 Public
Ppursho1999
Last edited Oct 5, 2023
Created on Oct 5, 2023

A yellow smiley face rendered in SVG with D3 v5 animates its eyebrows to shift between smiling and sad expressions. The face is built from circles for the eyes, rectangles for the eyebrows, and a path generated with the d3 `arc` helper for the mouth. A chained `transition().duration(2000)` moves the eyebrow group vertically over two seconds, then returns it, creating a looping mood change. The code uses `select`, `attr`, and `append` utilities for DOM manipulation.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smily to Sad Face

A yellow smiley face with black facial features animates its eyebrows up and down, shifting between a smiling and sad expression. The example demonstrates fundamental SVG manipulation with D3.js, using `d3.select` and `d3.arc` to construct the head and mouth. Eyebrow movement is achieved through chained `transition` calls with a 2000-millisecond duration, while circles and rectangles form the eyes and brows within nested groups. The rendering relies on an SVG container and D3 v5.

Ppursho1999
93% match
Loading thumbnail…

sad face

A yellow smiley face with animated eyebrows is displayed on a black background. Built with D3.js v5, the SVG face’s eyes and mouth are static, while the eyebrows alternate between two vertical positions over two seconds using chained `transition().attr()`. The rendering relies on SVG primitives like `circle`, `rect`, and `path` created via `d3.select` and `d3.arc`.

Iiamsrihari28
92% match
Loading thumbnail…

Smily Face

A yellow smiley face is drawn with SVG shapes, including circles for the eyes and an arc-based mouth, centered on a blank canvas. The code uses D3 v6 to construct the face and animates the eyebrows and mouth with chained `transition().duration()` calls, shifting their transforms over two-second intervals. The mouth path is generated using `d3.arc`, and the animation cycles the eyebrows up and down while rotating and recoloring the mouth. The example demonstrates basic SVG styling, grouping, and transition sequencing in D3.

CChristine Lanser
91% match
Loading thumbnail…

Smiley face

A yellow smiley face rendered in SVG animates its eyes, eyebrows, and mouth in a looping sequence. The face is built with D3 v5 selections and shapes, including circles for the eyes and an `arc` path for the mouth, all centered within an SVG of 960 by 500 pixels. The animation uses chained `transition` calls to move the eye group horizontally and shift the eyebrows vertically, creating a playful, winking expression. The code defines all dimensions and offsets as variables, and the rendering is fully client-side with no external data source.

Ssoniyaa-dv
91% match
Loading thumbnail…

sad smile

A sad smiley face rendered in SVG shows a yellow circle with a frowning mouth and animated eyebrows. The eyebrows move down and back up repeatedly using chained D3 transitions over two seconds each. Built with React and D3 v7, the code uses D3’s `select`, `arc` for the mouth path, and geometric constants for eye and eyebrow placement. The animation runs on page load.

AAakash Santhosh Kumar
91% match
Loading thumbnail…

smile sad

This example renders a yellow, black-outlined smiley face using D3.js version 7, loaded via UNPKG. The face is composed of circles for the eyes and a path built with the `arc` function for the mouth. An animated sequence uses chained `transition()` calls with a 2-second duration to move the eyebrows down and then back up, creating a toggle between a sad and happy expression. The SVG output is centered within a 960 by 500 canvas.

LLogeshwaran104
91% match
Loading thumbnail…

no smile smiley

A yellow smiley face with black outlines animates its eyebrows and mouth to express shifting emotions, using an SVG rendering with D3.js v5. The code creates the face via `d3.arc` for the eyebrows and simple circle/rect shapes, then applies chained `transition().duration(2000)` calls to move the eyebrow group upward and alter the mouth’s width. The expression shifts through two sequential states, with animated rotations and translations handling the directional cues.

TThijs Verhagen
90% match
Loading thumbnail…

Smiley Face

A yellow smiley face rendered in SVG animates its eyebrows up and down. The face is drawn with a large yellow circle, two smaller black circles for eyes, and a mouth using an SVG path. Eyebrows are rectangles that move via chained D3 transitions. The code uses D3 v5 selections to build and style the SVG elements, and `d3.arc` to generate the mouth path. The background is a light green-gray, and the animation repeats once on load.

Aazrinsani
90% match