Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published1🌍 Public
AAveryBurke
Last edited Jan 16, 2019
Created on Jan 13, 2019
Forked from bars!

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Untitled

A yellow circle face with black-outlined eyes, animated eyebrow rectangles, and an arc-based mouth is rendered in SVG. The eyebrows slide downward and back upward over two sequential two-second transitions using D3's `transition` method. The visualization is built with React, uses D3 v6 functions `select` and `arc`, and centers all facial features via SVG group transforms.

RReekMajumder
87% match
Loading thumbnail…

Untitled

This example shows a simple, stylized face built entirely from SVG primitives, with yellow circular head, black-outlined features, and a red background. A group element centers the face on the canvas, while nested groups position eyes and eyebrows relative to each other. The eyebrows animate vertically using two chained `transition` calls with a duration of 1000 milliseconds each, creating a continuous up-and-down motion. The code uses D3 v6’s `select`, `append`, and `attr` methods, and the mouth is generated using the `arc` shape generator with specified inner and outer radii and angle parameters.

Bbicyclecode
87% 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
86% 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
86% match
Loading thumbnail…

Untitled

A red SVG face with a green outline, yellow eyes, and a cyan arc-shaped mouth is drawn on a red background. The code uses d3.select to access the SVG element, sets numeric attributes from its width and height, and applies d3.arc to generate the mouth path with specified inner and outer radii and angle ranges. Circles are positioned using cx and cy attributes relative to a centered group.

Ttechie448
85% match