Skip to main content
100%

Looping Transitions Example

✓ Published1🌍 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.

MIT Licensed

Similar vizzes