Skip to main content
SimilarExport ZIP
100%

Tweak a Face Assignment!

✓ Published0🌍 Public
KKCachel
Last edited Nov 5, 2018
Created on Aug 28, 2018

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.

AI-generated description

Kathleen Cachel Face tweak

I went for a very pink design! I really like the eyes of Heric's and Jonathan's faces. I tried something similiar and added eyelashes and a nose element.

MIT Licensed

Similar vizzes

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

Make a Face

A pink SVG face with blinking eyebrows and animated facial features responds to simple D3 transitions. The code builds the face by nesting grouped shapes—circles for the head, eyes, and nose, plus rectangles for the eyebrows and an arc-generated path for the mouth—within a central `<g>` element using D3 v6 selection and `arc` API methods. Eyebrows slide and stretch through chained `.transition()` calls, creating a playful, looping expression. All shapes are positioned relative to the group, keeping the face centered as it animates.

Cchrisdreece
85% match
Loading thumbnail…

Tweak a Face - Assignment

This example shows a stylized face built from basic SVG shapes, including a head, eyes, pupils, nose, mouth, and angular eyebrows, with additional line-based accents on either side. All elements are rendered in a single SVG canvas using React components. The code defines the face’s geometry with D3’s `arc` generator for the mouth and eyebrows, and uses fixed coordinates and radii for the circles and lines. It demonstrates a straightforward combination of React’s declarative JSX with D3 shape utilities to produce a static vector illustration.

FFelipe Mejías
84% 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
84% match