Skip to main content
SimilarExport ZIP
100%

crying face by tanvi

✓ Published0🌍 Public
Ttanvisingh649
Last edited Oct 3, 2023
Created on Oct 3, 2023

A yellow crying face, rendered as an SVG, shows a pair of eyes and a sad, arcing mouth. Its rectangular eyebrows continuously animate up and down over two seconds, using chained D3 transitions with the `transition().duration()` method. The face is built with D3's DOM `select` and `append` APIs, drawing circles, rectangles, and an `arc()` path for the mouth, all centered within a 960x500 viewport.

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 crying face

This example renders a cartoon crying face entirely with SVG shapes, including a yellow head, eyes, eyebrows, and a frowning mouth. The animation makes the eyebrows move downward and back upward in a repeating cycle using D3’s `transition` API, creating a distressed or crying expression. The code uses `d3.select` to access the SVG, `d3.arc` to draw the mouth as a curved path, and leverages the React framework for structure. The face is built from basic geometric elements, with the tears represented as small blue circles.

PPatilShruti20
88% match
Loading thumbnail…

Fork of crying face

This example renders a cartoon crying face entirely with SVG shapes, including a yellow head, eyes, eyebrows, and a frowning mouth. The animation makes the eyebrows move downward and back upward in a repeating cycle using D3’s `transition` API, creating a distressed or crying expression. The code uses `d3.select` to access the SVG, `d3.arc` to draw the mouth as a curved path, and leverages the React framework for structure. The face is built from basic geometric elements, with the tears represented as small blue circles.

PPatilShruti20
88% 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
86% match
Loading thumbnail…

Sad Face

A sad face rendered in SVG using React and D3. The visualization shows a yellow circle with black outline as the face, featuring two black circular eyes positioned symmetrically, and a downward-curving mouth arc. The code uses `d3.arc` to generate the mouth path, with React components for the background circle and eyes. D3 v6 and React 17 are loaded via UMD, and the final drawing is produced by rendering SVG elements to the DOM.

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

sad.js!

A sad yellow SVG face with black eyes and a frowning arc mouth animates its rectangular eyebrows up and down on a blank canvas. Built with D3 v7, the example loads the library via UNPKG and demonstrates importing `select` and `arc` from the `"d3"` module. The code creates circles, rectangles, and a path using SVG attributes, then applies chained `transition().duration(2000)` calls to move the eyebrow group’s transform.

Ddharmithila2002@gmail.com
84% 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
84% 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
84% match