Skip to main content
SimilarExport ZIP
100%

Laugh Cry Emoji

✓ Published2🌍 Public
CChen Ding
Last edited Oct 24, 2019
Created on Aug 28, 2019

A laughing-crying emoji face rendered as an SVG using React and D3 v5. The code builds the face from circles, lines, ellipses, and arcs, with the mouth and tongue created via D3’s `arc` generator. Tears are positioned using rotated ellipses, while eyebrow strokes and a white eye overlay add expression. The chart is hardcoded, not data-driven, and rendered through ReactDOM.

AI-generated description

Laugh Cry face implementation with React & D3.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Laugh Cry Emoji

A laughing-crying emoji face rendered in SVG with React and D3 v5. The component draws a bisque circular face with black stroke outlines, including stylized eyes, eyebrows, a wide open mouth arc, and a white-toothed smile. It uses D3’s `arc` generator to create the mouth and tongue shapes, while tears are ellipses and the tongue appears as rotated salmon-colored arcs. The rendering relies on React DOM to mount the SVG tree, with all coordinates and radii defined as constants for clear geometric composition.

NNikhilchiguru-8
92% match
Loading thumbnail…

Fork of Laugh Cry Emoji

This visualization displays a cartoon-style laughing and crying emoji face, constructed with a yellow circle head, closed eyes, a wide open mouth, tongue, and blue tear drops. The face is rendered as SVG elements using React components. The code utilizes D3’s `arc()` generator to create the mouth and tongue shapes, and applies SVG primitives like `circle`, `line`, `ellipse`, and `path` with transforms. The layout is centered on a 960x500 canvas, with all elements positioned relative to the center point.

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

Laughing Face

A field of tiny yellow smiley faces is generated, each with a constant background circle, offset eyes, and an arc-shaped mouth defined using the `d3.arc` API. The nose is a cubic Bézier path, and the entire face is composed through modular React components (`Face`, `BackgroundCircle`, `Eyes`, `Mouth`, `Nose`, `FaceContainer`). Faces are rendered as SVGs and scaled down by a factor of 0.1, with random variation in eye size, producing a playful, repeating pattern across the canvas. The visualization is a React component that maps over 500 values to create each face instance.

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

smiley

This example draws a smiley face as an SVG graphic, combining React components with D3.js to generate the shapes. The face is centered with yellow circular eyes, red pupils, orange eyebrow-like lines, and a blue head. The code uses D3’s `arc` API to form the mouth and eye arcs, and relies on React’s `ReactDOM.render` to display the static composition, with positions and sizes defined as constants.

Cchakritha06
79% match
Loading thumbnail…

emoji-face with mouth (D3)

This example renders a smiley face using SVG elements positioned within a D3 group, centered on a 960 by 500 canvas. The face consists of a yellow circle with a thick red stroke, two black eyes, and a mouth created by a D3 arc path. The code uses React to compose the SVG structure and the D3 `arc` function to generate the mouth’s geometry, with all coordinates defined as constants. The visualization demonstrates basic D3 shape generation and SVG composition within a React framework.

Vvidhyanamini
79% match