Skip to main content
SimilarExport ZIP
100%

sad smile

✓ Published0🌍 Public
AAakash Santhosh Kumar
Last edited Sep 21, 2023
Created on Sep 21, 2023
Forked from D3 Face

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

Sad smiley face with D3.js

This example shows a simple, static sad smiley face rendered as a yellow circle with black eyes and a downward-curving arc for a mouth, all drawn in SVG. The face is centered in a 960×500 viewport, with the eyes and mouth positioned using translate transforms. Built with D3 v5, the code uses `d3.select` to target the SVG and `d3.arc` to generate the mouth path, while circle elements are appended directly for the head and eyes. No animation or interaction occurs; the visual is purely geometric.

Aabdulmoin9624
90% match
Loading thumbnail…

smile face

A yellow smiley face is drawn in SVG, with black eyes, eyebrows, and a semi-circular mouth. The eyebrows animate by shifting their vertical position using chained D3 transitions. The face is constructed with D3 selections, using `circle` and `rect` elements for the features, and a `path` created with the `d3.arc` generator for the mouth. The entire group is centered and scaled, with the animation triggered on page load.

YY-oringe
89% match
Loading thumbnail…

Sad smiley face with D3.js

A yellow circle with black outlines forms a sad smiley face, its mouth rendered as an inverted arc and eyes positioned with a fixed offset. The example demonstrates basic D3.js v5 shape generation and SVG manipulation, using `d3.select` to target the SVG element and `d3.arc` to construct the downward-curved mouth path. All facial features are centered via group transformations, with dimensions derived from the SVG's width and height attributes.

Aabdulmoin9624
88% match
Loading thumbnail…

Sad smiley face with D3.js

A yellow circle with black outlines forms a sad smiley face, its mouth rendered as an inverted arc and eyes positioned with a fixed offset. The example demonstrates basic D3.js v5 shape generation and SVG manipulation, using `d3.select` to target the SVG element and `d3.arc` to construct the downward-curved mouth path. All facial features are centered via group transformations, with dimensions derived from the SVG's width and height attributes.

Aabdulmoin9624
88% match
Loading thumbnail…

sad

This example draws a simple sad face in SVG using D3.js v7, depicting a yellow circle with eyes, eyebrows, and a frown-shaped arc mouth. The animation shows the eyebrows moving up and down repeatedly via chained `transition()` calls with duration and `.attr()` updates. The geometry is built with D3’s `arc` generator for the mouth and basic SVG shapes like `circle` and `rect`, all centered within a 960×500 viewport.

Ddharmithila2002@gmail.com
88% match