Skip to main content
SimilarExport ZIP
100%

Assignment: Tweak The Face!

✓ Published0🌍 Public
NNikhil Reddy Manda
Last edited May 6, 2021
Created on May 6, 2021

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.

AI-generated description

Assignment: Tweak The Face!

MIT Licensed

Similar vizzes

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

Assignment 1 Tweak a Face!

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.

Vveagy
92% 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
91% match
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
91% 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
89% 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
86% 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…

Assignment: Tweak the Face

This example shows a stylized smiley face built with React and D3, featuring yellow circular head, two eyes, and a curved mouth. The face is centered within an SVG canvas, with the head drawn as a yellow circle with a black stroke. The mouth is generated using D3’s `arc` generator with specified inner/outer radii and start/end angles, producing a semicircular shape. React renders the SVG elements declaratively, while D3 v7 provides the arc path calculation for the mouth.

Aadamacass
86% match