dynalgo 1.1.0

A tiny library designed to produce animated SVG images that can illustrate graph algorithms in action.
Documentation

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="cache-control" content="no-cache, must-revalidate">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Dynalgo - BFS</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #svg_dynalgo {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100vh;
    }
    </style>
    <script>
        function pause(svg) {
            if (svg.animationsPaused()) {
                svg.unpauseAnimations();
            } else {
                svg.pauseAnimations();
            }
        }
    </script>
  </head>
  <body>
<svg id="svg_dynalgo" onclick="pause(this)" viewBox="-40 -30 80 80" preserveAspectRatio="xMidYMid meet">
<path id="z41" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libz41" opacity="0">
  <text id="mz41" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">26</text>
</g>
<path id="w39" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libw39" opacity="0">
  <text id="mw39" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">23</text>
</g>
<path id="y37" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="liby37" opacity="0">
  <text id="my37" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">25</text>
</g>
<path id="x35" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libx35" opacity="0">
  <text id="mx35" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">24</text>
</g>
<path id="g33" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libg33" opacity="0">
  <text id="mg33" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">7</text>
</g>
<path id="m31" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libm31" opacity="0">
  <text id="mm31" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">13</text>
</g>
<path id="v29" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libv29" opacity="0">
  <text id="mv29" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">22</text>
</g>
<path id="d27" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libd27" opacity="0">
  <text id="md27" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">4</text>
</g>
<path id="a25" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="liba25" opacity="0">
  <text id="ma25" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">1</text>
</g>
<path id="h23" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libh23" opacity="0">
  <text id="mh23" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">8</text>
</g>
<path id="l21" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libl21" opacity="0">
  <text id="ml21" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">12</text>
</g>
<path id="u19" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libu19" opacity="0">
  <text id="mu19" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">21</text>
</g>
<path id="n17" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libn17" opacity="0">
  <text id="mn17" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">14</text>
</g>
<path id="o15" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libo15" opacity="0">
  <text id="mo15" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">15</text>
</g>
<path id="k13" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libk13" opacity="0">
  <text id="mk13" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">11</text>
</g>
<path id="p11" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libp11" opacity="0">
  <text id="mp11" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">16</text>
</g>
<path id="r9" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libr9" opacity="0">
  <text id="mr9" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">18</text>
</g>
<path id="t7" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libt7" opacity="0">
</g>
<path id="q5" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libq5" opacity="0">
  <text id="mq5" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">17</text>
</g>
<path id="s3" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 10 L0 0 Z" />
<g id="libs3" opacity="0">
  <text id="ms3" x="0" y="5" dx="-5" dy="-5"  fill="rgb(0,0,0)">19</text>
</g>
<g id="S1" opacity="0">
  <circle id="cS1" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coS1" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">S</text>
</g>
<animateMotion xlink:href="#S1" begin="0ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 0 10" />
<animate xlink:href="#S1" attributeName="opacity" from="0" to="1" dur="1000ms" begin="0ms" fill="freeze"/>
<g id="L2" opacity="0">
  <circle id="cL2" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coL2" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">L</text>
</g>
<g id="K4" opacity="0">
  <circle id="cK4" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coK4" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">K</text>
</g>
<g id="O6" opacity="0">
  <circle id="cO6" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coO6" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">O</text>
</g>
<g id="M8" opacity="0">
  <circle id="cM8" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coM8" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">M</text>
</g>
<g id="H10" opacity="0">
  <circle id="cH10" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coH10" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">H</text>
</g>
<g id="J12" opacity="0">
  <circle id="cJ12" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coJ12" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">J</text>
</g>
<g id="D14" opacity="0">
  <circle id="cD14" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coD14" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">D</text>
</g>
<g id="G16" opacity="0">
  <circle id="cG16" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coG16" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">G</text>
</g>
<g id="N18" opacity="0">
  <circle id="cN18" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coN18" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">N</text>
</g>
<g id="A20" opacity="0">
  <circle id="cA20" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coA20" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">A</text>
</g>
<g id="F22" opacity="0">
  <circle id="cF22" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coF22" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">F</text>
</g>
<g id="B24" opacity="0">
  <circle id="cB24" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coB24" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">B</text>
</g>
<g id="C26" opacity="0">
  <circle id="cC26" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coC26" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">C</text>
</g>
<g id="P28" opacity="0">
  <circle id="cP28" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coP28" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">P</text>
</g>
<g id="I30" opacity="0">
  <circle id="cI30" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coI30" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">I</text>
</g>
<g id="E32" opacity="0">
  <circle id="cE32" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coE32" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">E</text>
</g>
<g id="R34" opacity="0">
  <circle id="cR34" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coR34" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">R</text>
</g>
<g id="T36" opacity="0">
  <circle id="cT36" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coT36" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">T</text>
</g>
<g id="Q38" opacity="0">
  <circle id="cQ38" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coQ38" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">Q</text>
</g>
<g id="U40" opacity="0">
  <circle id="cU40" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coU40" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">U</text>
</g>
<animate attributeName="viewBox" from="-40 -30 80 80" to="-676 -378 982 942" begin="1000ms" dur="1000ms" fill="freeze" />
<animate xlink:href="#g33" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M134 -188 L266 -83 Z" />
<animateMotion xlink:href="#libg33" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 200 -135" />
<animate xlink:href="#g33" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libg33" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#big33" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#n17" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-60 198 L-85 -93 Z" />
<animateMotion xlink:href="#libn17" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -72 52" />
<animate xlink:href="#n17" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libn17" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bin17" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#q5" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-267 336 L-60 198 Z" />
<animateMotion xlink:href="#libq5" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -163 267" />
<animate xlink:href="#q5" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libq5" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#biq5" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#l21" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M103 34 L252 154 Z" />
<animateMotion xlink:href="#libl21" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 177 94" />
<animate xlink:href="#l21" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libl21" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bil21" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#a25" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-85 -93 L-155 -305 Z" />
<animateMotion xlink:href="#liba25" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -120 -199" />
<animate xlink:href="#a25" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#liba25" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bia25" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#d27" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-85 -93 L-11 -305 Z" />
<animateMotion xlink:href="#libd27" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -48 -199" />
<animate xlink:href="#d27" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libd27" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bid27" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#m31" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M252 154 L209 328 Z" />
<animateMotion xlink:href="#libm31" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 230 241" />
<animate xlink:href="#m31" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libm31" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bim31" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#x35" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-542 -43 L-546 193 Z" />
<animateMotion xlink:href="#libx35" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -544 75" />
<animate xlink:href="#x35" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libx35" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bix35" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#o15" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-60 198 L-74 441 Z" />
<animateMotion xlink:href="#libo15" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -67 319" />
<animate xlink:href="#o15" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libo15" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bio15" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#t7" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-267 336 L-329 145 Z" />
<animateMotion xlink:href="#libt7" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -298 240" />
<animate xlink:href="#t7" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libt7" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bit7" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#u19" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-329 145 L-356 -60 Z" />
<animateMotion xlink:href="#libu19" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -342 42" />
<animate xlink:href="#u19" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libu19" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#biu19" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#k13" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-60 198 L103 34 Z" />
<animateMotion xlink:href="#libk13" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 21 116" />
<animate xlink:href="#k13" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libk13" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bik13" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#y37" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-542 -43 L-485 -235 Z" />
<animateMotion xlink:href="#liby37" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -513 -139" />
<animate xlink:href="#y37" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#liby37" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#biy37" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#p11" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-60 198 L53 390 Z" />
<animateMotion xlink:href="#libp11" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -3 294" />
<animate xlink:href="#p11" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libp11" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bip11" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#z41" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-485 -235 L-336 -338 Z" />
<animateMotion xlink:href="#libz41" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -410 -286" />
<animate xlink:href="#z41" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libz41" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#biz41" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#h23" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M103 34 L134 -188 Z" />
<animateMotion xlink:href="#libh23" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 118 -77" />
<animate xlink:href="#h23" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libh23" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bih23" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#w39" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-542 -43 L-636 98 Z" />
<animateMotion xlink:href="#libw39" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -589 27" />
<animate xlink:href="#w39" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libw39" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#biw39" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#s3" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 10 L0 0 Z;M-267 524 L-267 336 Z" />
<animateMotion xlink:href="#libs3" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -267 425" />
<animate xlink:href="#s3" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libs3" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bis3" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#v29" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-356 -60 L-542 -43 Z" />
<animateMotion xlink:href="#libv29" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -449 -51" />
<animate xlink:href="#v29" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libv29" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#biv29" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#r9" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-267 336 L-452 414 Z" />
<animateMotion xlink:href="#libr9" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -359 375" />
<animate xlink:href="#r9" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libr9" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bir9" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#I30" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 209 328" />
<animate xlink:href="#I30" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#H10" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 53 390" />
<animate xlink:href="#H10" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#S1" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 10 l -267 514" />
<animate xlink:href="#cS1" attributeName="stroke" from="rgb(0,0,255)" to="rgb(128,139,150)" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#F22" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 134 -188" />
<animate xlink:href="#F22" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#G16" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -85 -93" />
<animate xlink:href="#G16" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#C26" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -11 -305" />
<animate xlink:href="#C26" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#B24" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -155 -305" />
<animate xlink:href="#B24" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#U40" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -336 -338" />
<animate xlink:href="#U40" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#L2" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -267 336" />
<animate xlink:href="#L2" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#M8" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -452 414" />
<animate xlink:href="#M8" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#A20" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 252 154" />
<animate xlink:href="#A20" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#P28" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -542 -43" />
<animate xlink:href="#P28" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#E32" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 266 -83" />
<animate xlink:href="#E32" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#R34" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -546 193" />
<animate xlink:href="#R34" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#N18" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -356 -60" />
<animate xlink:href="#N18" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#D14" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -74 441" />
<animate xlink:href="#D14" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#T36" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -485 -235" />
<animate xlink:href="#T36" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#Q38" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -636 98" />
<animate xlink:href="#Q38" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#O6" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -329 145" />
<animate xlink:href="#O6" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#K4" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -60 198" />
<animate xlink:href="#K4" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#J12" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 103 34" />
<animate xlink:href="#J12" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
</svg>
  </body>
</html>