Skip to main content
SimilarExport ZIP
100%

Animated happy to evil face (click to see transformation)

✓ Published0🌍 Public
Mmgweiner
Last edited Dec 13, 2020
Created on Dec 10, 2020
Forked from Hello HTML

A D3.js v6 SVG animation transforms a cheerful, orange face into an evil one. The face features blue eyes that turn red, eyebrows that rotate and translate, and a mouth that changes from a smile to a frown. The user initiates the transformation with a click, triggering sequential `transition()` chains that animate eye color, brow rotation, and the mouth's arc path. The code uses `d3.arc()` for mouth shapes, `d3.interpolateString` for rotations, and `attrTween` implicitly via transitions.

AI-generated description

An innocent and happy to evil face!

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Lets make a face

A cheerful cartoon face drawn with SVG animates its features using D3 transitions. The code selects an SVG element and uses D3’s `arc` generator to morph a mouth from an open grin to a filled shape over three seconds. Eyes blink by scaling their radius, while rectangular eyebrows shift vertically in sync. Built with React and D3 v5, the example leverages chained `transition().duration()` calls to create simple, looping motion between states.

11995ana
84% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

A cheerful SVG smiley face, rendered in orange with a red arc for a mouth and two circular eyes, demonstrates animated eyebrow movement. The animation uses two chained `transition().duration(2000)` calls on a group element to shift the eyebrows up and then back down. The face is constructed with D3.js v5 by appending SVG shapes—`circle`, `rect`, and `path`—to a central group, with the mouth’s arc computed via the `d3.arc()` function.

Rrajeshathakur
83% match
Loading thumbnail…

Let's make a face with D3.js!

A cheerful yellow face emerges from a collection of SVG shapes, with red eyes, gray eyebrows, and a fixed arc-based mouth. The example demonstrates D3.js animation through chained `transition().duration()` calls, which sequentially reposition the eyes and eyebrows to create a subtle, shifting expression. The face is built using primitive SVG elements—`circle`, `rect`, and `path`—positioned relative to a central group, with the mouth defined by the `arc()` helper and its properties for inner and outer radius and angle ranges.

LLouis
83% 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
83% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to build an animated smiley face with SVG elements, demonstrating fundamental DOM manipulation and transitions. Circles form the yellow head and eyes, while rectangles serve as eyebrows that move via chained `transition` calls. A black mouth is drawn using `d3.arc`, with its shape morphing between smile and frown through `attrTween` and an interpolator. The code relies on D3 v5’s selection methods, `arc`, and transition API to animate the facial features in sequence.

KKrister
83% match
Loading thumbnail…

face with D3.js!

This example demonstrates how to build an animated smiley face using D3.js, manipulating SVG elements such as circles, rectangles, and paths. The face has two eyes and eyebrows that move up and down in a looping transition, while a fixed mouth is drawn using a D3 arc generator. The code uses D3 selections and the `transition` API with `duration` to animate the eyebrow group’s transform attribute, showcasing fundamental DOM manipulation. Rendered entirely in SVG, the face is centered within a 960×500 viewport, with styling defined in a separate CSS file.

RRena Patel
83% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js v5, with its eyebrows and mouth animating through a series of transitions. The code builds the face by appending circles for the eyes and a path for the mouth, generated with the `d3.arc` helper, while rectangles form the eyebrows. A `transition` on the eyebrow group moves them up and down over two seconds, and the mouth path rotates 180 degrees. This demonstrates fundamental DOM manipulation, attribute updates, and chained transitions with D3 selections.

LLittledevil7
83% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn with SVG shapes animates its eyebrows upward and back down in a looping transition. The example demonstrates fundamental D3.js DOM manipulation by building a green circle, white eyes, rectangular eyebrows, and an arc-based mouth using `d3.select` and `d3.arc`. Animated with chained `transition.duration` calls, the eyebrows shift via `attr` transforms. Rendered in an SVG container sized 960 by 500, the code uses D3 v5 and imports `select` and `arc` directly from the library.

SSyed Azeem Akhter
82% match