Assignment 1 Tweak a Face!

100%

Assignment 1 Tweak a Face!

✓ Published1🌍 Public

Last edited Aug 29, 2018

Created on Aug 29, 2018

A stylized face built from SVG shapes animates its eyes and eyebrows in a looping sequence. The yellow circular head stays static while the eye group shifts vertically, followed by a separate eyebrow group that moves after a delay. The mouth is drawn as an arc path using D3's `arc` generator. The code uses D3 v5 selections and chained `transition.attr` calls on the SVG rectangles and groups to create the coordinated motion.

AI-generated description

Author: Weijie Pang

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 1 Tweak a Face!

A yellow face drawn with SVG shapes animates on a dark background, blinking and wiggling its eyebrows. The piece uses D3.js v5's selection API and transition system to create timed, sequential movements of the eye and brow groups. A circular head with a stroked outline is composed of rectangles for features, and an arc path forms the mouth. The animation demonstrates declarative SVG manipulation through chained `transition().attr` calls, altering the group transforms over set durations.

Vveagy

96% match

Loading thumbnail…

Assignment 1 Tweak a Face!

A face built from basic SVG shapes—a yellow circle, rectangular eyes, and a mouth drawn with an arc path—undergoes a sequence of animated tweaks. The eyes and eyebrows slide vertically via chained `transition` calls on their containing groups, shifting the expression over six seconds. The code uses D3 v5 selections and the `arc` generator to construct the mouth. Animations rely on D3's `transition.attr` to adjust `transform` attributes, demonstrating simple, timed state changes without user interaction.

Vveagy

96% match

Loading thumbnail…

Assignment 1 Tweak a Face!

A smiling face drawn with SVG shapes animates its eyebrows upward and back down. The visualization uses D3 v5 to construct and position a yellow circle for the head, rectangles for eyes and eyebrows, and an arc for the mouth. The code relies on D3's `select` and `arc` APIs, plus chained `.transition().attr()` calls to animate the eyebrow group's vertical translation over two seconds.

Vveagy

95% match

Loading thumbnail…

Assignment 1 Tweak a Face!

A cheerful yellow circle with a surprised expression animates its facial features. The face, centered in an SVG canvas, uses rectangles for eyes and eyebrows and an arc path for the mouth. D3 transitions sequentially move the entire eye group downward and the eyebrows upward, creating a playful, winking-like motion. The code builds the face with d3.select, d3.arc, and chained transition().duration() calls, all rendered as static SVG shapes that animate over time.

Vveagy

94% match

Loading thumbnail…

Assignment: Tweak The Face!

A simple, animated face rendered in SVG. The face consists of a yellow circle with black outlines, two white eyes with pupils, and a mouth drawn as a half-circle arc. The left pupil is positioned statically, while the right pupil animates horizontally across the eye using a D3 v5 `transition` and `duration`. The code constructs each shape with D3 selections and attributes, using the `arc` generator for the mouth.

NNikhil Reddy Manda

92% match

Loading thumbnail…

Tweak a Face Assignment!

A stylized, cartoon face built with SVG sits centered on a pink background, featuring large white eyes with pink irises, green rectangular eyebrows, a curved pink mouth, a small nose, and eyelashes. The eyebrows animate vertically over two seconds using chained D3 transitions, moving down and then returning to their original position. The visualization is implemented with D3 v5, using selections and shape generators like `arc()` for the mouth and nose, while all elements are drawn as static SVG shapes within a single `<g>` group.

KKCachel

87% match

Loading thumbnail…

Let's Tweak a Face

A cartoon face animates through a sequence of transformations: its yellow head fades to light blue, the eyes' pupils shift upward, eyebrows rise dramatically, and the mouth cycles through arc-based shapes, shrinking to a dot before expanding into a wide circle. Built with D3 v5, the visualization uses SVG elements and chained transitions, including `transition.attr` and the `arc()` generator to redraw the mouth path. Each facial feature is positioned relative to a central group, with timed delays coordinating the staggered animation effects across the head, eyes, and mouth.

RRobert Curtis

86% match

Loading thumbnail…

lets make a face

A yellow circular face with black outlines is drawn using SVG shapes. Two eyes are represented as simple circles, while two rectangular eyebrows are animated with a timed vertical bounce using chained `.transition().duration()` calls, moving downward then returning. A mouth is formed using an `arc()` path with specified inner and outer radii and angled start/end points. The example demonstrates basic SVG composition and animation within a D3 v5 context, using the `select`, `append`, and `attr` APIs.

Sstefichim

84% match