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 - DFS</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="o41" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libo41" opacity="0">
  <text id="mo41" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">15</text>
</g>
<path id="a39" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="liba39" opacity="0">
  <text id="ma39" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">1</text>
</g>
<path id="c37" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libc37" opacity="0">
  <text id="mc37" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">3</text>
</g>
<path id="b35" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libb35" opacity="0">
  <text id="mb35" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">2</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="i31" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libi31" opacity="0">
  <text id="mi31" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">9</text>
</g>
<path id="m29" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libm29" opacity="0">
  <text id="mm29" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">13</text>
</g>
<path id="l27" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libl27" opacity="0">
  <text id="ml27" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">12</text>
</g>
<path id="k25" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libk25" opacity="0">
  <text id="mk25" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">11</text>
</g>
<path id="s23" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libs23" opacity="0">
  <text id="ms23" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">19</text>
</g>
<path id="x21" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libx21" opacity="0">
  <text id="mx21" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">24</text>
</g>
<path id="z19" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libz19" opacity="0">
  <text id="mz19" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">26</text>
</g>
<path id="y17" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="liby17" opacity="0">
  <text id="my17" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">25</text>
</g>
<path id="w15" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libw15" opacity="0">
  <text id="mw15" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">23</text>
</g>
<path id="v13" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libv13" opacity="0">
  <text id="mv13" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">22</text>
</g>
<path id="u11" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libu11" opacity="0">
  <text id="mu11" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">21</text>
</g>
<path id="t9" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libt9" opacity="0">
</g>
<path id="r7" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libr7" opacity="0">
  <text id="mr7" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">18</text>
</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="p3" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 10 L0 0 Z" />
<g id="libp3" opacity="0">
  <text id="mp3" x="0" y="5" dx="-5" dy="-5"  fill="rgb(0,0,0)">16</text>
</g>
<g id="H1" opacity="0">
  <circle id="cH1" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coH1" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">H</text>
</g>
<animateMotion xlink:href="#H1" begin="0ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 0 10" />
<animate xlink:href="#H1" attributeName="opacity" from="0" to="1" dur="1000ms" begin="0ms" fill="freeze"/>
<g id="K2" opacity="0">
  <circle id="cK2" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coK2" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">K</text>
</g>
<g id="L4" opacity="0">
  <circle id="cL4" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coL4" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">L</text>
</g>
<g id="M6" opacity="0">
  <circle id="cM6" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coM6" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">M</text>
</g>
<g id="O8" opacity="0">
  <circle id="cO8" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coO8" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">O</text>
</g>
<g id="N10" opacity="0">
  <circle id="cN10" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coN10" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">N</text>
</g>
<g id="P12" opacity="0">
  <circle id="cP12" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coP12" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">P</text>
</g>
<g id="Q14" opacity="0">
  <circle id="cQ14" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coQ14" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">Q</text>
</g>
<g id="T16" opacity="0">
  <circle id="cT16" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coT16" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">T</text>
</g>
<g id="U18" opacity="0">
  <circle id="cU18" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coU18" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">U</text>
</g>
<g id="R20" opacity="0">
  <circle id="cR20" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coR20" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">R</text>
</g>
<g id="S22" opacity="0">
  <circle id="cS22" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coS22" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">S</text>
</g>
<g id="J24" opacity="0">
  <circle id="cJ24" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coJ24" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">J</text>
</g>
<g id="A26" opacity="0">
  <circle id="cA26" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coA26" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">A</text>
</g>
<g id="I28" opacity="0">
  <circle id="cI28" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coI28" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">I</text>
</g>
<g id="E30" opacity="0">
  <circle id="cE30" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coE30" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">E</text>
</g>
<g id="F32" opacity="0">
  <circle id="cF32" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coF32" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">F</text>
</g>
<g id="C34" opacity="0">
  <circle id="cC34" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coC34" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">C</text>
</g>
<g id="B36" opacity="0">
  <circle id="cB36" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coB36" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">B</text>
</g>
<g id="G38" opacity="0">
  <circle id="cG38" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coG38" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">G</text>
</g>
<g id="D40" opacity="0">
  <circle id="cD40" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coD40" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">D</text>
</g>
<animate attributeName="viewBox" from="-40 -30 80 80" to="-448 -514 975 918" begin="1000ms" dur="1000ms" fill="freeze" />
<animate xlink:href="#v13" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-20 -47 L-200 152 Z" />
<animateMotion xlink:href="#libv13" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -110 52" />
<animate xlink:href="#v13" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libv13" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#biv13" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#t9" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M256 -224 L59 -248 Z" />
<animateMotion xlink:href="#libt9" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 157 -236" />
<animate xlink:href="#t9" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libt9" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bit9" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#y17" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-200 152 L-388 55 Z" />
<animateMotion xlink:href="#liby17" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -294 103" />
<animate xlink:href="#y17" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#liby17" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#biy17" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#z19" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-388 55 L-408 -136 Z" />
<animateMotion xlink:href="#libz19" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -398 -40" />
<animate xlink:href="#z19" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libz19" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#biz19" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#u11" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M59 -248 L-20 -47 Z" />
<animateMotion xlink:href="#libu11" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 19 -147" />
<animate xlink:href="#u11" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libu11" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#biu11" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#m29" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M276 339 L89 364 Z" />
<animateMotion xlink:href="#libm29" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 182 351" />
<animate xlink:href="#m29" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libm29" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bim29" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#s23" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M256 -224 L375 -341 Z" />
<animateMotion xlink:href="#libs23" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 315 -282" />
<animate xlink:href="#s23" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libs23" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bis23" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#a39" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-187 -423 L-16 -474 Z" />
<animateMotion xlink:href="#liba39" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -101 -448" />
<animate xlink:href="#a39" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#liba39" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bia39" 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;M352 -21 L256 -224 Z" />
<animateMotion xlink:href="#libq5" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 304 -122" />
<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="#r7" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M256 -224 L193 -426 Z" />
<animateMotion xlink:href="#libr7" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 224 -325" />
<animate xlink:href="#r7" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libr7" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bir7" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#x21" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-200 152 L-119 364 Z" />
<animateMotion xlink:href="#libx21" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -159 258" />
<animate xlink:href="#x21" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libx21" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bix21" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#k25" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M352 -21 L416 179 Z" />
<animateMotion xlink:href="#libk25" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 384 79" />
<animate xlink:href="#k25" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libk25" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bik25" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#c37" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-280 -273 L-187 -423 Z" />
<animateMotion xlink:href="#libc37" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -233 -348" />
<animate xlink:href="#c37" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libc37" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bic37" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#l27" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M416 179 L276 339 Z" />
<animateMotion xlink:href="#libl27" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 346 259" />
<animate xlink:href="#l27" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libl27" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bil27" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#p3" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 10 L0 0 Z;M487 -114 L352 -21 Z" />
<animateMotion xlink:href="#libp3" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 419 -72" />
<animate xlink:href="#p3" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libp3" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bip3" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#i31" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M89 364 L-17 165 Z" />
<animateMotion xlink:href="#libi31" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 36 264" />
<animate xlink:href="#i31" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libi31" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bii31" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#g33" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-17 165 L-188 -68 Z" />
<animateMotion xlink:href="#libg33" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -102 48" />
<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="#w15" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-200 152 L-304 290 Z" />
<animateMotion xlink:href="#libw15" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -252 221" />
<animate xlink:href="#w15" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libw15" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#biw15" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#o41" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M352 -21 L274 152 Z" />
<animateMotion xlink:href="#libo41" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 313 65" />
<animate xlink:href="#o41" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libo41" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bio41" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#b35" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-188 -68 L-280 -273 Z" />
<animateMotion xlink:href="#libb35" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -234 -170" />
<animate xlink:href="#b35" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libb35" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bib35" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#U18" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -408 -136" />
<animate xlink:href="#U18" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#I28" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 89 364" />
<animate xlink:href="#I28" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#A26" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 276 339" />
<animate xlink:href="#A26" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#D40" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 274 152" />
<animate xlink:href="#D40" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#Q14" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -304 290" />
<animate xlink:href="#Q14" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#L4" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 256 -224" />
<animate xlink:href="#L4" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#N10" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -20 -47" />
<animate xlink:href="#N10" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#J24" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 416 179" />
<animate xlink:href="#J24" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#M6" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 193 -426" />
<animate xlink:href="#M6" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#E30" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -17 165" />
<animate xlink:href="#E30" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#F32" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -188 -68" />
<animate xlink:href="#F32" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#C34" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -280 -273" />
<animate xlink:href="#C34" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#G38" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -16 -474" />
<animate xlink:href="#G38" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#K2" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 352 -21" />
<animate xlink:href="#K2" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#B36" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -187 -423" />
<animate xlink:href="#B36" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#S22" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 375 -341" />
<animate xlink:href="#S22" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#T16" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -388 55" />
<animate xlink:href="#T16" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#H1" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 10 l 487 -124" />
<animate xlink:href="#cH1" attributeName="stroke" from="rgb(0,0,255)" to="rgb(128,139,150)" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#P12" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -200 152" />
<animate xlink:href="#P12" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#O8" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 59 -248" />
<animate xlink:href="#O8" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#R20" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -119 364" />
<animate xlink:href="#R20" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
</svg>
  </body>
</html>