<!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 - node_add_fixed example</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="360 360 80 80" preserveAspectRatio="xMidYMid meet">
<path id="δ9" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M277 277 L100 100 Z" />
<g id="libδ9" opacity="0">
</g>
<path id="γ8" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M430 250 L100 400 Z" />
<g id="libγ8" opacity="0">
</g>
<path id="β7" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M392 234 L400 100 Z" />
<g id="libβ7" opacity="0">
</g>
<path id="α6" stroke-width="2" opacity="0" stroke="rgb(0,0,255)" d="M202 -324 L400 400 Z" />
<g id="libα6" opacity="0">
</g>
<g id="A1" opacity="0">
<circle id="cA1" cx="400" cy="400" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
<text id="coA1" x="400" y="400" dx="-6" dy="6" fill="rgb(0,0,0)">A</text>
</g>
<animate xlink:href="#A1" attributeName="opacity" from="0" to="1" dur="1000ms" begin="0ms" fill="freeze"/>
<animate xlink:href="#cA1" attributeName="stroke" from="rgb(0,0,255)" to="rgb(128,139,150)" dur="1000ms" begin="1000ms" fill="freeze"/>
<g id="B2" opacity="0">
<circle id="cB2" cx="400" cy="100" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
<text id="coB2" x="400" y="100" dx="-6" dy="6" fill="rgb(0,0,0)">B</text>
</g>
<animate attributeName="viewBox" from="360 360 80 80" to="360 60 80 380" begin="2000ms" dur="1000ms" fill="freeze" />
<animate xlink:href="#B2" attributeName="opacity" from="0" to="1" dur="1000ms" begin="2000ms" fill="freeze"/>
<animate xlink:href="#cB2" attributeName="stroke" from="rgb(0,0,255)" to="rgb(128,139,150)" dur="1000ms" begin="3000ms" fill="freeze"/>
<g id="C3" opacity="0">
<circle id="cC3" cx="100" cy="400" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
<text id="coC3" x="100" y="400" dx="-6" dy="6" fill="rgb(0,0,0)">C</text>
</g>
<animate attributeName="viewBox" from="360 60 80 380" to="60 60 380 380" begin="4000ms" dur="1000ms" fill="freeze" />
<animate xlink:href="#C3" attributeName="opacity" from="0" to="1" dur="1000ms" begin="4000ms" fill="freeze"/>
<animate xlink:href="#cC3" attributeName="stroke" from="rgb(0,0,255)" to="rgb(128,139,150)" dur="1000ms" begin="5000ms" fill="freeze"/>
<g id="D4" opacity="0">
<circle id="cD4" cx="100" cy="100" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
<text id="coD4" x="100" y="100" dx="-6" dy="6" fill="rgb(0,0,0)">D</text>
</g>
<animate xlink:href="#D4" attributeName="opacity" from="0" to="1" dur="1000ms" begin="6000ms" fill="freeze"/>
<animate xlink:href="#cD4" attributeName="stroke" from="rgb(0,0,255)" to="rgb(128,139,150)" dur="1000ms" begin="7000ms" fill="freeze"/>
<g id="E5" opacity="0">
<circle id="cE5" cx="0" cy="0" r="20" fill="rgb(255,255,255)" stroke="rgb(0,0,255)" stroke-width="2"></circle>
<text id="coE5" x="0" y="0" dx="-6" dy="6" fill="rgb(0,0,0)">E</text>
</g>
<animate attributeName="viewBox" from="60 60 380 380" to="-40 -40 480 480" begin="8000ms" dur="1000ms" fill="freeze" />
<animate xlink:href="#E5" attributeName="opacity" from="0" to="1" dur="1000ms" begin="8000ms" fill="freeze"/>
<animate attributeName="viewBox" from="-40 -40 480 480" to="60 -364 380 804" begin="9000ms" dur="1000ms" fill="freeze" />
<animateMotion xlink:href="#E5" begin="9000ms" dur="1000ms"
fill="freeze" path="m 0 0 l 202 -324" />
<animate xlink:href="#cE5" attributeName="stroke" from="rgb(0,0,255)" to="rgb(128,139,150)" dur="1000ms" begin="9000ms" fill="freeze"/>
<animate xlink:href="#α6" attributeName="opacity" from="0" to="1" dur="1000ms" begin="10000ms" fill="freeze"/>
<animate xlink:href="#libα6" attributeName="opacity" from="0" to="1" dur="1000ms" begin="10000ms" fill="freeze"/>
<animate xlink:href="#biα6" attributeName="opacity" from="0" to="1" dur="1000ms" begin="10000ms" fill="freeze"/>
<animate attributeName="viewBox" from="60 -364 380 804" to="60 60 380 380" begin="11000ms" dur="1000ms" fill="freeze" />
<animate xlink:href="#α6" begin="11000ms" fill="freeze" attributeName="d" dur="1000ms" values="M202 -324 L400 400 Z;M392 234 L400 400 Z" />
<animateMotion xlink:href="#libα6" begin="11000ms" dur="1000ms" fill="freeze" path="m 0 0 l 95 279" />
<animate xlink:href="#α6" attributeName="stroke" from="rgb(0,0,255)" to="rgb(128,139,150)" dur="1000ms" begin="11000ms" fill="freeze"/>
<animateMotion xlink:href="#E5" begin="11000ms" dur="1000ms"
fill="freeze" path="m 202 -324 l 190 558" />
<animate xlink:href="#β7" attributeName="opacity" from="0" to="1" dur="1000ms" begin="12000ms" fill="freeze"/>
<animate xlink:href="#libβ7" attributeName="opacity" from="0" to="1" dur="1000ms" begin="12000ms" fill="freeze"/>
<animate xlink:href="#biβ7" attributeName="opacity" from="0" to="1" dur="1000ms" begin="12000ms" fill="freeze"/>
<animate attributeName="viewBox" from="60 60 380 380" to="60 60 410 380" begin="13000ms" dur="1000ms" fill="freeze" />
<animate xlink:href="#α6" begin="13000ms" fill="freeze" attributeName="d" dur="1000ms" values="M392 234 L400 400 Z;M430 250 L400 400 Z" />
<animateMotion xlink:href="#libα6" begin="13000ms" dur="1000ms" fill="freeze" path="m 95 279 l 19 8" />
<animate xlink:href="#β7" begin="13000ms" fill="freeze" attributeName="d" dur="1000ms" values="M392 234 L400 100 Z;M430 250 L400 100 Z" />
<animateMotion xlink:href="#libβ7" begin="13000ms" dur="1000ms" fill="freeze" path="m 0 0 l 19 8" />
<animate xlink:href="#β7" attributeName="stroke" from="rgb(0,0,255)" to="rgb(128,139,150)" dur="1000ms" begin="13000ms" fill="freeze"/>
<animateMotion xlink:href="#E5" begin="13000ms" dur="1000ms"
fill="freeze" path="m 392 234 l 38 16" />
<animate xlink:href="#γ8" attributeName="opacity" from="0" to="1" dur="1000ms" begin="14000ms" fill="freeze"/>
<animate xlink:href="#libγ8" attributeName="opacity" from="0" to="1" dur="1000ms" begin="14000ms" fill="freeze"/>
<animate xlink:href="#biγ8" attributeName="opacity" from="0" to="1" dur="1000ms" begin="14000ms" fill="freeze"/>
<animate attributeName="viewBox" from="60 60 410 380" to="60 60 380 380" begin="15000ms" dur="1000ms" fill="freeze" />
<animate xlink:href="#α6" begin="15000ms" fill="freeze" attributeName="d" dur="1000ms" values="M430 250 L400 400 Z;M277 277 L400 400 Z" />
<animateMotion xlink:href="#libα6" begin="15000ms" dur="1000ms" fill="freeze" path="m 114 287 l -77 13" />
<animate xlink:href="#β7" begin="15000ms" fill="freeze" attributeName="d" dur="1000ms" values="M430 250 L400 100 Z;M277 277 L400 100 Z" />
<animateMotion xlink:href="#libβ7" begin="15000ms" dur="1000ms" fill="freeze" path="m 19 8 l -77 13" />
<animate xlink:href="#γ8" begin="15000ms" fill="freeze" attributeName="d" dur="1000ms" values="M430 250 L100 400 Z;M277 277 L100 400 Z" />
<animateMotion xlink:href="#libγ8" begin="15000ms" dur="1000ms" fill="freeze" path="m 0 0 l -77 13" />
<animate xlink:href="#γ8" attributeName="stroke" from="rgb(0,0,255)" to="rgb(128,139,150)" dur="1000ms" begin="15000ms" fill="freeze"/>
<animateMotion xlink:href="#E5" begin="15000ms" dur="1000ms"
fill="freeze" path="m 430 250 l -153 27" />
<animate xlink:href="#δ9" attributeName="opacity" from="0" to="1" dur="1000ms" begin="16000ms" fill="freeze"/>
<animate xlink:href="#libδ9" attributeName="opacity" from="0" to="1" dur="1000ms" begin="16000ms" fill="freeze"/>
<animate xlink:href="#biδ9" attributeName="opacity" from="0" to="1" dur="1000ms" begin="16000ms" fill="freeze"/>
<animate xlink:href="#α6" begin="17000ms" fill="freeze" attributeName="d" dur="1000ms" values="M277 277 L400 400 Z;M250 251 L400 400 Z" />
<animateMotion xlink:href="#libα6" begin="17000ms" dur="1000ms" fill="freeze" path="m 37 300 l -13 -13" />
<animate xlink:href="#γ8" begin="17000ms" fill="freeze" attributeName="d" dur="1000ms" values="M277 277 L100 400 Z;M250 251 L100 400 Z" />
<animateMotion xlink:href="#libγ8" begin="17000ms" dur="1000ms" fill="freeze" path="m -77 13 l -13 -13" />
<animate xlink:href="#β7" begin="17000ms" fill="freeze" attributeName="d" dur="1000ms" values="M277 277 L400 100 Z;M250 251 L400 100 Z" />
<animateMotion xlink:href="#libβ7" begin="17000ms" dur="1000ms" fill="freeze" path="m -58 21 l -13 -13" />
<animate xlink:href="#δ9" begin="17000ms" fill="freeze" attributeName="d" dur="1000ms" values="M277 277 L100 100 Z;M250 251 L100 100 Z" />
<animateMotion xlink:href="#libδ9" begin="17000ms" dur="1000ms" fill="freeze" path="m 0 0 l -13 -13" />
<animate xlink:href="#δ9" attributeName="stroke" from="rgb(0,0,255)" to="rgb(128,139,150)" dur="1000ms" begin="17000ms" fill="freeze"/>
<animateMotion xlink:href="#E5" begin="17000ms" dur="1000ms"
fill="freeze" path="m 277 277 l -27 -26" />
</svg>
</body>
</html>