Forkwithk

100%

✓ Published0🌍 Public

Last edited Sep 23, 2023

Created on Sep 23, 2023

A smiling face built from SVG shapes animates its eyebrows upward and downward in a looping motion. Drawn on a yellow circle with black strokes, the face uses separate groups for eyes, eyebrows, and a mouth created with D3's `arc` path generator. The eyebrows animate using the `transition` API with a two-second duration, while the SVG is transformed and centered within a 960 by 500 canvas.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork

A yellow smiley face with animated eyebrows is rendered in SVG using D3 v5. The code builds the face from primitive shapes—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—demonstrating DOM selection and manipulation via `d3.select` and `d3.append`. The eyebrows repeatedly shift vertically using a chained `transition().duration(2000)` sequence. All positioning relies on fixed numeric coordinates and transforms, with no external data source.

Nnsatyaprakash22

91% match

Loading thumbnail…

Fork skirthi

A yellow smiley face rendered in SVG demonstrates animated eyebrow movement. The face is constructed from D3 primitives: a circle for the head, circles for eyes, rectangles for brows, and a path generated with `d3.arc` for the mouth. The eyebrows animate via chained `transition` calls with two-second durations, moving up and then returning to their original position. The code imports `select` and `arc` from D3 v7 and places elements using SVG transform attributes.

Kkiruthiga1304

91% match

Loading thumbnail…

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

A smiling face built from yellow and black SVG shapes animates its eyebrows upward and downward in a looping motion. The example constructs the face with D3 v6 selections, positioning eyes as circles, eyebrows as rectangles, and a mouth as a path generated by the `arc` generator. Transitions chain two 2-second `transition` calls on the eyebrow group to move it vertically, creating the expressive blink-like effect within the fixed 960×500 viewport.

JJorrr2

90% match

Loading thumbnail…

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

A smiling face made of SVG shapes is centered on a yellow background. The face's eyebrows perform a repetitive up-and-down motion, creating a brief animation. Constructed with D3.js v5, the code uses `select`, `append`, and `attr` to build the SVG elements, while chained `transition().duration(2000)` calls animate the eyebrow group's vertical position. The mouth is drawn using `d3.arc()` with specified inner and outer radii and angular ranges.

PPriya Tiwari

90% match

Loading thumbnail…

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

A smiling face is drawn with SVG shapes, with a yellow circle for the head, two eyes, and a mouth formed using the d3.arc path generator. The animated eyebrows, rendered as rectangles, repeatedly transition upward and back down over two-second intervals using D3's transition method. The example demonstrates fundamental DOM selection and manipulation through d3.select, attribute setting, and chained transitions, operating entirely within a 960×500 SVG canvas.

Ddheeraj1509

89% match

Loading thumbnail…

Fork of face

A stylized smiley face built with D3.js v5 combines SVG shapes and transitions to animate raised and lowered eyebrows. The face includes a yellow circle head, black-outlined features, elliptical cheeks and ears, and a curved mouth generated with the `arc()` function. Using `select`, `append`, and `attr`, the code positions eyes, nose, and hair, while a chained `transition().duration(2000)` sequence moves the eyebrow group up and down, creating a surprised or expressive look. The visualization demonstrates fundamental DOM manipulation and animation via D3’s selection and transition APIs, with all elements rendered as SVG inside a fixed 960×500 viewport.

Eenckkipronoh@gmail.com

89% match

Loading thumbnail…

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

A smiling face rendered in SVG animates its eyebrows upward and downward in a looping two-second cycle. The face is constructed entirely through D3.js v5 DOM manipulation, using `select` to target the root `svg` element, then appending and positioning circles for the eyes, rectangles for the eyebrows, and a path built from `arc` for the mouth. The eyebrow animation is driven by chained `transition().duration(2000)` calls that alternately shift the parent group’s `transform` attribute, demonstrating basic tweened state changes on SVG attributes. The composition is centered via a translated group, with hardcoded spacing values for facial features.

VVamshisoleti09

89% match

Loading thumbnail…

Fork of Fork of face

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation using D3.js. The face is built from SVG shapes, including circles for the eyes and head, rectangles for the eyebrows, and an arc-generated path for the mouth. The code uses d3.select and d3.arc, with a chained transition that moves the eyebrow group up and down over two-second intervals, creating a looping eyebrow raise. Static attributes set the face dimensions and positions within a 960 by 500 SVG canvas.

EEbenizerR

89% match