main page - page initiale - hauptseite - página principal projects - projets - projekte - proyectos authors - auteurs - autoren - autores papers - exposés - berichte - papeles help - aide - hilfe - ayuda


example for an animated bus track

This example shows the use of SVG animation for the progressive drawing of lines, such as bus-tracks or routing for navigation systems. The SVG keySpline feature allows to simulate acceleration and deceleration effects.

See also declarative animations and path animations.

Files used

Right-click, save ...

Technical Details

Because svg does not know a builtin-feature for progressive drawing of lines one can fake and use an animated dashing, with dash-line-segments as long as the whole path-segment is and a moving dash-offset from the beginning towards the end of the line. This trick was first shown by Michel Hirtzler for the progressive drawing of the french coastline and border.

The following construct shows the path-definitions and the basic setup for dash-animation. Both the path itself and the animation definitions need unique identifiers because their attribute values will be queried and set later with a javascript function. Therefore some initial attribute values in the animation definition are not correct initially.

<g id="bustracks" style="&st47;">
  <path id="busTrack1" d="M296.614,1678.855l-32.901-20.428">
    <animate id="dashAnim1" attributeName="stroke-dashoffset" from="0"
                                     to="0" dur="2s" begin="2s" fill="freeze"
                               keySplines="0 0.5 0.5 1" calcMode="spline"/>
  <path id="busTrack2" d="M263.713,1658.427l-.....0.228-19.745">
    <animate id="dashAnim2" attributeName="stroke-dashoffset" from="0"
                        to="0" dur="10s" begin="dashAnim1.end+2s" fill="freeze"
                                keySplines="0.4 0 0.7 1" calcMode="spline"/>
  <path id="busTrack3" d="M272.563,1371.387........1.735,0.454,51.735">
    <animate id="dashAnim3" attributeName="stroke-dashoffset" from="0" 
                         to="0" dur="10s" begin="dashAnim2.end+2s" fill="freeze"
                                  keySplines="0.3 0 0.7 1" calcMode="spline"/>
  <path id="busTrack4" d="M255.998,1370.934l......,17.019,10.438">
    <animate id="dashAnim4" attributeName="stroke-dashoffset" from="0" 
                   to="0" dur="10s" begin="dashAnim3.end+2s" fill="freeze"
                         keySplines="0.3 0 0.7 1" calcMode="spline"/>
  <path id="busTrack5" d="M270.066,1670.905l12.707,8.171">
   <animate id="dashAnim5" attributeName="stroke-dashoffset" from="0"
                        to="0" dur="2s" begin="dashAnim4.end+2s" fill="freeze"
                             keySplines="0.5 0 1 0.5" calcMode="spline"/>

The whole path is broken into 5 sections, each intersection is a bus-stop where the animations halt for two seconds (see begin="previous_animation.end+2s"). The keySpline-attribute contains the description of a Bézier-curve with two control points in order to control speed effects. Animation one defines an deceleration effect, Animation 2-4 acceleration and deceleration effects, Animation 5 only acceleration. (see also

To reset the start values for the animation we need to replace the dash-array-attribute and from-attribute with the path-segments length. To get the length-value we can use the method .getTotalLength(). The following javascript-code shows how to do this. The function is called with the onLoad-event.

function init() {
  for(var i=1; i<6; i++) {
function setAnimations(number) {
  busTrack.setAttributeNS(null,'stroke-dasharray',trackLength+" "+trackLength);

Credits: Michel Hirtzler for his progressive drawing examples. Olaf Schnabel for fixing the example and adding FakeSmile for Firefox-Support.

Last modified: Tuesday, 10-Dec-2019 21:39:23 CET
© carto:net (andreas neumann & andré m. winter)
original URL for reference: