Skip to main content
SimilarExport ZIP
100%

Fork of crying face

✓ Published0🌍 Public
PPatilShruti20
Last edited Oct 9, 2023
Created on Oct 9, 2023

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.

AI-generated description

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

See also React Starter.

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

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

This example shows a crying emoji face with animated eyebrows, wide eyes, a sad mouth, and tear droplets, positioned beside a simple stick-figure person on a blank canvas. D3.js constructs the SVG elements, using `select` to target the `<svg>` and `append` to build the face components with specific attributes. The eyebrows move up and down through a chained `transition` with a 2000-millisecond duration, while `arc()` generates the mouth path. Static tear circles are placed below the eyes to convey the crying emotion.

Sskmriyaz0786@gmail.com
89% match
Loading thumbnail…

Fork of Create a face with d3.js!

This example displays a yellow, cartoon-style face with a crying expression: large circular eyes, rectangular eyebrows, and an arc-shaped mouth drawn on an SVG canvas. Built with D3 v7, it uses `select` and `arc` to construct the facial features, while a chained `transition` animation repeatedly raises and lowers the eyebrows to simulate crying. The face is centered using an SVG group transform, and the code demonstrates local ES6 module imports alongside loading D3 via UNPKG.

AAkash Santosh Kuskar
89% match
Loading thumbnail…

crying face by tanvi

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.

Ttanvisingh649
88% match
Loading thumbnail…

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

A sad smiley face drawn entirely with SVG shapes demonstrates basic D3.js DOM manipulation and animation. The code uses `select` to target the SVG element and `append` to create a yellow circle, eyes, and rectangular eyebrows. A `transition().duration()` sequence moves the eyebrow group down and back, creating a repeated frowning motion. The mouth is generated using the `arc()` generator from D3's shape module with specified inner and outer radii and angle values.

UUpamanyu-ml
87% match
Loading thumbnail…

Fork of D3 Face

A yellow face with black outlines, two eyes, and a frown is rendered in SVG and animated. The eyebrows move up and down through repeated transitions, while the mouth is drawn using an arc path. The code uses D3 v7’s `select`, `arc`, and chained `transition().duration()` methods, with React as the framework. All shapes are positioned via SVG attributes and transforms, centered in a 960×500 viewport.

NNikitha123171
87% match
Loading thumbnail…

crying

This example displays a crying face, built with React and rendered as an SVG. It uses D3’s `arc()` generator to create the mouth path and circle elements for the face, eyes, and outline. The `d3.arc()` API defines the mouth’s inner and outer radii and angular range. React’s JSX syntax positions all shapes within a single translated group element.

PPallaviManupati
86% match
Loading thumbnail…

Fork of D3-1: Making a face

This example uses D3.js v7 to draw a simple sad face as an SVG graphic. It renders a yellow circle for the face, two blue circles for the eyes, a black quadratic curve for the mouth, and two smaller blue dots for tears, all positioned relative to the SVG’s width and height. The code uses `d3.select` to target the SVG element and chain `.append`, `.attr`, and method calls to construct the shapes. No external data is loaded; all geometric values are computed from the hardcoded dimensions.

Gganesha2208
86% match