SVG — SMIL Scene Choreography

A scene is many animations sequenced in time. SMIL's begin="other.end" syncbase timing lets the SVG choreograph itself — no JavaScript clock.

a self-playing sunrise scene

good morning
the choreography is in the begin attributes
<animate id="a_sky"  begin="0s"          .../>        <!-- t = 0      -->
<animate id="a_sun"  begin="a_sky.end"   .../>        <!-- after sky  -->
<animateTransform id="a_cloud1" begin="a_sun.end" .../> <!-- after sun  -->
<animate id="a_title" begin="a_cloud1.end" .../>     <!-- after clouds-->
<!-- sky also restarts on "a_title.end+1.2s" → the whole scene loops -->

Each step starts when the previous one ends — begin="a_sun.end". Change one duration and everything after it reflows automatically. The Replay button just calls svg.setCurrentTime(0).