Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
YYash G
Last edited May 26, 2020
Created on May 26, 2020

A smiling face composed of yellow SVG shapes sits at the center of the page, built with D3 v5. Its circular head, two black eyes, and an arc-based mouth are all drawn using D3's `select` and `arc` helpers, positioned via SVG attributes. The visual is embedded within a styled button element, which features a neumorphic design with layered box shadows and a command icon, all styled through CSS. The interaction is minimal, limited to a pressed state effect on the button when clicked.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A yellow face with black-outlined eyes and a smiling mouth is drawn using D3.js v6 SVG primitives within a React project. The face is centered on an SVG canvas, with circles for the eyes and an arc-generated path for the mouth. Animated eyebrows, also created with D3's arc API, transition vertically over two seconds, moving up and then back down, demonstrating the use of `transition().duration()`. The visualization showcases fundamental D3 selections, attribute manipulation, and SVG path generation through the `arc` function.

RReekMajumder
83% match
Loading thumbnail…

Untitled

A yellow face is drawn as an SVG circle with white eyes and black pupils, a curved mouth, and small blue tear circles. The visualization is implemented in D3 v5 within a React framework, using `d3.select` to reference the SVG and appending elements like circles, rects, and a `d3.arc`-constructed path for the mouth. The eyebrows, styled as rectangles, animate downward over 2 seconds via D3 transitions, creating a frowning expression. The code specifies fixed pixel dimensions and positions for all facial features, rendering statically with no external data source.

PPatilShruti20
83% match
Loading thumbnail…

Untitled

A yellow smiley face with black features animates on a blank canvas. D3.js transitions move both rectangular eyebrows up and down in a repeating two-second cycle, while the eyes and an arc-shaped mouth remain static. The code uses D3’s `select`, `arc`, and chained `transition` with `duration` to manipulate SVG elements, specifying positions and dimensions via hardcoded constants for the face’s geometry. The rendering is a pure SVG animation driven entirely by D3’s DOM manipulation and transition methods.

Iiperalta94
82% match
Loading thumbnail…

Untitled

A yellow circle with a black outline represents a face, featuring two black eyes and rectangular eyebrows. The eyebrows animate vertically, moving down and back up over two seconds each, creating a surprised or blinking expression. The visualization is built with SVG primitives and animated using D3 v7's transition methods. The mouth is drawn as an arc path using D3's arc generator, and the layout is positioned using explicit coordinates.

Hharshb863
82% match
Loading thumbnail…

Untitled

A large, yellow smiley face rendered as an SVG fills the viewport. The face is composed of a main circle for the head, two smaller circles for eyes, and a mouth drawn using a d3.arc path, all positioned with hard-coded coordinates in a React component. The visualization uses React for the component structure and d3.arc to generate the mouth's path, with a fixed width and height of 960 by 500 pixels.

Rrayspyisback
81% match
Loading thumbnail…

Untitled

A yellow circle with a black outline, positioned at the center of an SVG canvas, gradually transitions its fill to red and back to yellow over a five-second animation. The circle is styled as a face with two eyes, rectangular eyebrows, and a mouth drawn using D3's `arc` path generator with a semicircular inner and outer radius. The code uses `d3.select` and `transition.style` to animate the fill, while all facial features are appended as SVG elements within a centered group.

AAveryBurke
81% match
Loading thumbnail…

Untitled

A yellow circle with a black outline, positioned at the center of an SVG canvas, gradually transitions its fill to red and back to yellow over a five-second animation. The circle is styled as a face with two eyes, rectangular eyebrows, and a mouth drawn using D3's `arc` path generator with a semicircular inner and outer radius. The code uses `d3.select` and `transition.style` to animate the fill, while all facial features are appended as SVG elements within a centered group.

AAveryBurke
81% match
Loading thumbnail…

Untitled

A smiling face rendered as an SVG data visualization, built with React and D3. The face consists of a red circle with a blue stroke as the background, two black eyes, and a D3 `arc`-generated mouth path. React components manage the SVG elements, while D3's `arc` function calculates the mouth's curved shape using specified inner and outer radii and start and end angles. The layout positions elements around a central coordinate, with fixed offsets for the eyes and mouth radius.

BbetoAR506
81% match