Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Looping Transitions Example

Public visualization

Looping Transitions Example

1 star1🌍 Public
CCurran Kelleher
Last edited Oct 5, 2018
Created on Sep 10, 2018

This example animates a simple face, including an elliptical head, eyes, pupils, eyebrows, and a mouth, with the eyebrows looping up and down in a continuous cycle. The loop is achieved by chaining two D3 transitions—one moving the eyebrow group down, the next moving it up—and invoking the same function again in the `transition.on("end")` callback. The SVG is rendered using D3 v5, with shapes drawn via `.append()` for ellipses, circles, polylines, and an arc, and all positioning handled through `transform` attributes.

AI-generated description

An example of looping transitions.

Forked from Ming Zhang's Face.

Comments

Sign in to join the discussion.

MIT Licensed