Skip to main content
SimilarExport ZIP
100%

moodchange

✓ Published2🌍 Public
MMert Gürkan
Last edited Jul 8, 2020
Created on Jul 8, 2020
Forked from HTML Starter

This example shows a yellow smiley face that transitions from a neutral to a changed mood over two seconds. The eyes and mouth shift downward while the entire SVG rotates 180 degrees, creating a visual mood change. Built with React and D3 v5, the code selects an SVG element and uses `arc()` for the mouth path and chained `transition().duration()` calls to animate the eye group, mouth transform, and overall rotation. The rendering approach uses SVG with animated attribute changes.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 and SVG smile

This example shows a smiling face built with SVG shapes and animated with D3 transitions. A red background frames a yellow circle with a black stroke, while two small circles form the eyes and an arc path creates the mouth. The eyebrows are rectangles that move up and down using chained `transition()` calls with 500-millisecond durations. The code selects the SVG element with `d3.select`, sets its dimensions and background, and uses `d3.arc()` to generate the smile path, all within a React-compatible setup using D3 v6.

GGattu-Abhinay
83% match
Loading thumbnail…

smiley face

A yellow smiley face is drawn on an SVG canvas, with a circular head, two eyes, and a curved mouth created using D3’s `arc` path generator. The animation moves the eyebrows upward and back down over a four-second sequence using `transition.attrTween`. The scene is built with D3 v5 selections and transitions within a React framework, using hardcoded dimensions and offsets to position the facial features on a 960 by 500 viewport.

KKeerthipriyaBankuru
83% match
Loading thumbnail…

HTML Starter

This example shows a yellow smiley face rendered as an SVG, with animated eyebrows and a mouth that shifts between a filled arc and a thin outline. The face is centered using a translated group element, with circles for eyes and an arc-generated path for the mouth. Built with D3 v6 in a React framework, it uses `select`, `arc`, and chained `transition().duration()` calls to animate the eyebrow position and mouth shape over two seconds. The code demonstrates basic SVG attribute manipulation and data-free geometric drawing.

LLuisEnrique-Naica
82% match
Loading thumbnail…

Smily to Sad Face

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.

Ppursho1999
82% match
Loading thumbnail…

smiley face

A yellow circle with black outlines forms a smiley face, complete with eyes, eyebrows, and a smiling mouth. The eyebrows animate by moving upward and then returning to their original position over four seconds. Built with React and D3.js v5, the visualization uses SVG shapes like circles and rectangles, with the mouth drawn via the `arc` function. The animation is achieved through chained `transition` calls that modify the eyebrow group's transform attribute.

MMichael Milano
82% 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
82% match
Loading thumbnail…

first_svg_manipulation

This example shows an animated smiley face constructed from SVG shapes, including a yellow circle head, eyes, eyebrows, and a nose, with a mouth drawn using D3’s `arc` generator. The eyebrows animate up and down through chained `transition().duration()` calls, moving the group containing them via the `transform` attribute. The code imports `select` and `arc` from D3 v5, uses an SVG canvas with React as the framework, and manually positions all elements based on the SVG’s width and height attributes.

Ddjgundrum
82% match
Loading thumbnail…

Smile

A yellow smiling face with eyes and a curved mouth is drawn using SVG circles and a path generated with D3's `arc` generator. The left and right eyes animate independently over four sequential transitions, changing their radius and fill color to dark red and green, respectively. Built with D3 v6 and React, the visualization uses `select`, `arc`, and chained `transition` calls to modify SVG attributes dynamically.

DDiego Javier Zea
82% match