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="o27" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libo27" opacity="0">
  <text id="mo27" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">15</text>
</g>
<path id="m25" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libm25" opacity="0">
  <text id="mm25" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">13</text>
</g>
<path id="l23" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libl23" opacity="0">
  <text id="ml23" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">12</text>
</g>
<path id="k21" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libk21" opacity="0">
  <text id="mk21" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">11</text>
</g>
<path id="s19" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libs19" opacity="0">
  <text id="ms19" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">19</text>
</g>
<path id="r17" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libr17" opacity="0">
  <text id="mr17" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">18</text>
</g>
<path id="q15" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libq15" opacity="0">
  <text id="mq15" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">17</text>
</g>
<path id="p13" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libp13" opacity="0">
  <text id="mp13" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">16</text>
</g>
<path id="n11" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libn11" opacity="0">
  <text id="mn11" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">14</text>
</g>
<path id="a9" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="liba9" opacity="0">
  <text id="ma9" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">1</text>
</g>
<path id="d7" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libd7" opacity="0">
  <text id="md7" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">4</text>
</g>
<path id="b5" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 0 L0 0 Z" />
<g id="libb5" opacity="0">
  <text id="mb5" x="0" y="0" dx="-5" dy="-5"  fill="rgb(0,0,0)">2</text>
</g>
<path id="g3" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M0 10 L0 0 Z" />
<g id="libg3" opacity="0">
  <text id="mg3" x="0" y="5" dx="-5" dy="-5"  fill="rgb(0,0,0)">7</text>
</g>
<g id="E1" opacity="0">
  <circle id="cE1" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coE1" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">E</text>
</g>
<animateMotion xlink:href="#E1" begin="0ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 0 10" />
<animate xlink:href="#E1" attributeName="opacity" from="0" to="1" dur="1000ms" begin="0ms" fill="freeze"/>
<g id="F2" opacity="0">
  <circle id="cF2" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coF2" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">F</text>
</g>
<g id="C4" opacity="0">
  <circle id="cC4" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coC4" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">C</text>
</g>
<g id="G6" opacity="0">
  <circle id="cG6" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coG6" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">G</text>
</g>
<g id="B8" opacity="0">
  <circle id="cB8" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coB8" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">B</text>
</g>
<g id="K10" opacity="0">
  <circle id="cK10" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coK10" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">K</text>
</g>
<g id="H12" opacity="0">
  <circle id="cH12" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coH12" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">H</text>
</g>
<g id="L14" opacity="0">
  <circle id="cL14" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coL14" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">L</text>
</g>
<g id="M16" opacity="0">
  <circle id="cM16" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coM16" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">M</text>
</g>
<g id="S18" opacity="0">
  <circle id="cS18" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coS18" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">S</text>
</g>
<g id="J20" opacity="0">
  <circle id="cJ20" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coJ20" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">J</text>
</g>
<g id="A22" opacity="0">
  <circle id="cA22" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coA22" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">A</text>
</g>
<g id="I24" opacity="0">
  <circle id="cI24" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coI24" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">I</text>
</g>
<g id="D26" opacity="0">
  <circle id="cD26" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
  <text id="coD26" 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="-463 -445 918 848" begin="1000ms" dur="1000ms" fill="freeze" />
<animate xlink:href="#a9" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-214 -19 L-423 -122 Z" />
<animateMotion xlink:href="#liba9" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -318 -70" />
<animate xlink:href="#a9" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#liba9" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bia9" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#p13" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M67 62 L80 332 Z" />
<animateMotion xlink:href="#libp13" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 73 197" />
<animate xlink:href="#p13" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libp13" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bip13" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#n11" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-214 -19 L67 62 Z" />
<animateMotion xlink:href="#libn11" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -73 21" />
<animate xlink:href="#n11" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libn11" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bin11" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#o27" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M67 62 L239 256 Z" />
<animateMotion xlink:href="#libo27" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 153 159" />
<animate xlink:href="#o27" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libo27" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bio27" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#m25" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-66 -405 L-268 -377 Z" />
<animateMotion xlink:href="#libm25" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -167 -391" />
<animate xlink:href="#m25" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libm25" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bim25" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#g3" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 10 L0 0 Z;M-383 328 L-200 363 Z" />
<animateMotion xlink:href="#libg3" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -291 340" />
<animate xlink:href="#g3" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libg3" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#big3" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#r17" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M273 -91 L278 -307 Z" />
<animateMotion xlink:href="#libr17" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 275 -199" />
<animate xlink:href="#r17" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libr17" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bir17" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#b5" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-200 363 L-319 161 Z" />
<animateMotion xlink:href="#libb5" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -259 262" />
<animate xlink:href="#b5" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libb5" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bib5" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#d7" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M-319 161 L-214 -19 Z" />
<animateMotion xlink:href="#libd7" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -266 71" />
<animate xlink:href="#d7" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libd7" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bid7" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#q15" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M67 62 L273 -91 Z" />
<animateMotion xlink:href="#libq15" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 170 -14" />
<animate xlink:href="#q15" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libq15" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#biq15" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#s19" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M273 -91 L415 53 Z" />
<animateMotion xlink:href="#libs19" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 344 -19" />
<animate xlink:href="#s19" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libs19" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bis19" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#k21" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M67 62 L16 -202 Z" />
<animateMotion xlink:href="#libk21" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l 41 -70" />
<animate xlink:href="#k21" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libk21" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bik21" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#l23" begin="1000ms" fill="freeze" attributeName="d" dur="1000ms" values="M0 0 L0 0 Z;M16 -202 L-66 -405 Z" />
<animateMotion xlink:href="#libl23" begin="1000ms" dur="1000ms" fill="freeze" path="m 0 0 l -25 -303" />
<animate xlink:href="#l23" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#libl23" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animate xlink:href="#bil23" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#J20" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 16 -202" />
<animate xlink:href="#J20" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#A22" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -66 -405" />
<animate xlink:href="#A22" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#M16" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 278 -307" />
<animate xlink:href="#M16" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#K10" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 67 62" />
<animate xlink:href="#K10" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#E1" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 10 l -383 318" />
<animate xlink:href="#cE1" attributeName="stroke" from="rgb(0,0,255)" to="rgb(128,139,150)" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#S18" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 415 53" />
<animate xlink:href="#S18" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#F2" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -200 363" />
<animate xlink:href="#F2" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#D26" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 239 256" />
<animate xlink:href="#D26" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#C4" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -319 161" />
<animate xlink:href="#C4" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#B8" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -423 -122" />
<animate xlink:href="#B8" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#H12" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 80 332" />
<animate xlink:href="#H12" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#G6" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -214 -19" />
<animate xlink:href="#G6" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#I24" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l -268 -377" />
<animate xlink:href="#I24" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
<animateMotion xlink:href="#L14" begin="1000ms" dur="1000ms"
                    fill="freeze" path="m 0 0 l 273 -91" />
<animate xlink:href="#L14" attributeName="opacity" from="0" to="1" dur="1000ms" begin="1000ms" fill="freeze"/>
</svg>
  </body>
</html>