Skip to content

Instantly share code, notes, and snippets.

@saaj

saaj/73498.svg

Created August 1, 2019 18:21
Show Gist options
  • Save saaj/70f5710fcc8943f6f84f4226ad275b28 to your computer and use it in GitHub Desktop.
Save saaj/70f5710fcc8943f6f84f4226ad275b28 to your computer and use it in GitHub Desktop.
Download ZIP
hstr demo
Display the source blob
Display the rendered blob
Raw
73498.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
player_template.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="terminal" baseProfile="full" viewBox="0 0 703 410" width="703" version="1.1">
<defs>
<termtosvg:template_settings xmlns:termtosvg="https://github.com/nbedos/termtosvg">
<termtosvg:screen_geometry columns="82" rows="19"/>
<termtosvg:animation type="waapi"/>
</termtosvg:template_settings>
<style type="text/css" id="generated-style"><![CDATA[
#screen {
font-family: 'DejaVu Sans Mono', monospace;
font-style: normal;
font-size: 14px;
}
text {
dominant-baseline: text-before-edge;
white-space: pre;
}
]]></style>
<style type="text/css" id="user-style">
/* gjm8 color theme (source: https://terminal.sexy/) */
.foreground {fill: #c5c5c5;}
.background {fill: #1c1c1c;}
.color0 {fill: #1c1c1c;}
.color1 {fill: #98bdff;}
.color2 {fill: #cee318;}
.color3 {fill: #ffe755;}
.color4 {fill: #048ac7;}
.color5 {fill: #833c9f;}
.color6 {fill: #0ac1cd;}
.color7 {fill: #e5e5e5;}
.color8 {fill: #1c1c1c;}
.color9 {fill: #ff005b;}
.color10 {fill: #cee318;}
.color11 {fill: #ffe755;}
.color12 {fill: #048ac7;}
.color13 {fill: #833c9f;}
.color14 {fill: #0ac1cd;}
.color15 {fill: #e5e5e5;}
#play-button {
transform: translate(30px, calc(100% - 45px));
}
#pause-button {
transform: translate(30px, calc(100% - 45px));
}
#wide_track {
transform: translate(150px, calc(100% - 45px));
}
#track {
transform: translate(150px, calc(100% - 33px));
}
#slider_button {
transform: translate(0px, calc(100% - 30px));
}
#timer {
transform: translate(60px, calc(100% - 38px));
font-family: 'DejaVu Sans Mono', monospace;
font-style: normal;
font-size: 14px;
}
</style>
<rect id="slider_wide_track" height="30px" width="65%"/>
<rect id="slider_track" height="6px" width="65%"/>
<circle id="slider_button" r="8px" class="color1"/>
<g id="icon-play">
<rect x="-5" y="0" width="25" height="30" class="background"/>
<path d="M0 4l14 11-14 11z"/>
</g>
<g id="icon-pause">
<rect x="-5" y="0" width="25" height="30" class="background"/>
<rect x="0" y="5" width="5" height="20"/>
<rect x="10" y="5" width="5" height="20"/>
</g>
</defs>
<rect id="terminalui" class="background" width="100%" height="100%" ry="4.5826941"/>
<svg id="screen" width="656" height="323" x="23" y="23" viewBox="0 0 656 323" preserveAspectRatio="xMidYMin slice">
<rect class="background" height="100%" width="100%" x="0" y="0"/><defs><g id="g1"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="background" textLength="8" x="72"> </text></g><g id="g2"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="8" x="72">t</text><text class="background" textLength="8" x="80"> </text></g><g id="g3"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="16" x="72">te</text><text class="background" textLength="8" x="88"> </text></g><g id="g4"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="24" x="72">ter</text><text class="background" textLength="8" x="96"> </text></g><g id="g5"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="32" x="72">term</text><text class="background" textLength="8" x="104"> </text></g><g id="g6"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="40" x="72">termt</text><text class="background" textLength="8" x="112"> </text></g><g id="g7"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="48" x="72">termto</text><text class="background" textLength="8" x="120"> </text></g><g id="g8"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="56" x="72">termtos</text><text class="background" textLength="8" x="128"> </text></g><g id="g9"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="64" x="72">termtosv</text><text class="background" textLength="8" x="136"> </text></g><g id="g10"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="72" x="72">termtosvg</text><text class="background" textLength="8" x="144"> </text></g><g id="g11"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="72" x="72">termtosvg</text></g><g id="g12"><text class="background" textLength="8" x="0"> </text></g><g id="g13"><text class="foreground" textLength="472" x="0">Recording started, enter "exit" command or Control-D to end</text></g><g id="g14"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="8" x="72">f</text><text class="background" textLength="8" x="80"> </text></g><g id="g15"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="16" x="72">fo</text><text class="background" textLength="8" x="88"> </text></g><g id="g16"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="24" x="72">for</text><text class="background" textLength="8" x="96"> </text></g><g id="g17"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="32" x="72">for </text><text class="background" textLength="8" x="104"> </text></g><g id="g18"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="40" x="72">for i</text><text class="background" textLength="8" x="112"> </text></g><g id="g19"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="48" x="72">for i </text><text class="background" textLength="8" x="120"> </text></g><g id="g20"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="56" x="72">for i i</text><text class="background" textLength="8" x="128"> </text></g><g id="g21"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="64" x="72">for i in</text><text class="background" textLength="8" x="136"> </text></g><g id="g22"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="72" x="72">for i in </text><text class="background" textLength="8" x="144"> </text></g><g id="g23"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="80" x="72">for i in {</text><text class="background" textLength="8" x="152"> </text></g><g id="g24"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="88" x="72">for i in {0</text><text class="background" textLength="8" x="160"> </text></g><g id="g25"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="96" x="72">for i in {0.</text><text class="background" textLength="8" x="168"> </text></g><g id="g26"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="104" x="72">for i in {0..</text><text class="background" textLength="8" x="176"> </text></g><g id="g27"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="112" x="72">for i in {0..1</text><text class="background" textLength="8" x="184"> </text></g><g id="g28"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="120" x="72">for i in {0..10</text><text class="background" textLength="8" x="192"> </text></g><g id="g29"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="128" x="72">for i in {0..10}</text><text class="background" textLength="8" x="200"> </text></g><g id="g30"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="136" x="72">for i in {0..10};</text><text class="background" textLength="8" x="208"> </text></g><g id="g31"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="144" x="72">for i in {0..10}; </text><text class="background" textLength="8" x="216"> </text></g><g id="g32"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="152" x="72">for i in {0..10}; d</text><text class="background" textLength="8" x="224"> </text></g><g id="g33"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="160" x="72">for i in {0..10}; do</text><text class="background" textLength="8" x="232"> </text></g><g id="g34"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="160" x="72">for i in {0..10}; do</text></g><g id="g35"><text class="foreground" textLength="16" x="0">&gt; </text><text class="background" textLength="8" x="16"> </text></g><g id="g36"><text class="foreground" textLength="24" x="0">&gt; e</text><text class="background" textLength="8" x="24"> </text></g><g id="g37"><text class="foreground" textLength="32" x="0">&gt; ec</text><text class="background" textLength="8" x="32"> </text></g><g id="g38"><text class="foreground" textLength="40" x="0">&gt; ech</text><text class="background" textLength="8" x="40"> </text></g><g id="g39"><text class="foreground" textLength="48" x="0">&gt; echo</text><text class="background" textLength="8" x="48"> </text></g><g id="g40"><text class="foreground" textLength="56" x="0">&gt; echo </text><text class="background" textLength="8" x="56"> </text></g><g id="g41"><text class="foreground" textLength="64" x="0">&gt; echo "</text><text class="background" textLength="8" x="64"> </text></g><g id="g42"><text class="foreground" textLength="72" x="0">&gt; echo "t</text><text class="background" textLength="8" x="72"> </text></g><g id="g43"><text class="foreground" textLength="80" x="0">&gt; echo "te</text><text class="background" textLength="8" x="80"> </text></g><g id="g44"><text class="foreground" textLength="88" x="0">&gt; echo "ter</text><text class="background" textLength="8" x="88"> </text></g><g id="g45"><text class="foreground" textLength="96" x="0">&gt; echo "term</text><text class="background" textLength="8" x="96"> </text></g><g id="g46"><text class="foreground" textLength="104" x="0">&gt; echo "termt</text><text class="background" textLength="8" x="104"> </text></g><g id="g47"><text class="foreground" textLength="112" x="0">&gt; echo "termto</text><text class="background" textLength="8" x="112"> </text></g><g id="g48"><text class="foreground" textLength="120" x="0">&gt; echo "termtos</text><text class="background" textLength="8" x="120"> </text></g><g id="g49"><text class="foreground" textLength="128" x="0">&gt; echo "termtosv</text><text class="background" textLength="8" x="128"> </text></g><g id="g50"><text class="foreground" textLength="136" x="0">&gt; echo "termtosvg</text><text class="background" textLength="8" x="136"> </text></g><g id="g51"><text class="foreground" textLength="144" x="0">&gt; echo "termtosvg </text><text class="background" textLength="8" x="144"> </text></g><g id="g52"><text class="foreground" textLength="152" x="0">&gt; echo "termtosvg i</text><text class="background" textLength="8" x="152"> </text></g><g id="g53"><text class="foreground" textLength="160" x="0">&gt; echo "termtosvg is</text><text class="background" textLength="8" x="160"> </text></g><g id="g54"><text class="foreground" textLength="168" x="0">&gt; echo "termtosvg is </text><text class="background" textLength="8" x="168"> </text></g><g id="g55"><text class="foreground" textLength="176" x="0">&gt; echo "termtosvg is a</text><text class="background" textLength="8" x="176"> </text></g><g id="g56"><text class="foreground" textLength="184" x="0">&gt; echo "termtosvg is aw</text><text class="background" textLength="8" x="184"> </text></g><g id="g57"><text class="foreground" textLength="192" x="0">&gt; echo "termtosvg is awe</text><text class="background" textLength="8" x="192"> </text></g><g id="g58"><text class="foreground" textLength="200" x="0">&gt; echo "termtosvg is awes</text><text class="background" textLength="8" x="200"> </text></g><g id="g59"><text class="foreground" textLength="208" x="0">&gt; echo "termtosvg is aweso</text><text class="background" textLength="8" x="208"> </text></g><g id="g60"><text class="foreground" textLength="216" x="0">&gt; echo "termtosvg is awesom</text><text class="background" textLength="8" x="216"> </text></g><g id="g61"><text class="foreground" textLength="224" x="0">&gt; echo "termtosvg is awesome</text><text class="background" textLength="8" x="224"> </text></g><g id="g62"><text class="foreground" textLength="232" x="0">&gt; echo "termtosvg is awesome!</text><text class="background" textLength="8" x="232"> </text></g><g id="g63"><text class="foreground" textLength="240" x="0">&gt; echo "termtosvg is awesome!"</text><text class="background" textLength="8" x="240"> </text></g><g id="g64"><text class="foreground" textLength="240" x="0">&gt; echo "termtosvg is awesome!"</text></g><g id="g65"><text class="foreground" textLength="24" x="0">&gt; d</text><text class="background" textLength="8" x="24"> </text></g><g id="g66"><text class="foreground" textLength="32" x="0">&gt; do</text><text class="background" textLength="8" x="32"> </text></g><g id="g67"><text class="foreground" textLength="40" x="0">&gt; don</text><text class="background" textLength="8" x="40"> </text></g><g id="g68"><text class="foreground" textLength="48" x="0">&gt; done</text><text class="background" textLength="8" x="48"> </text></g><g id="g69"><text class="foreground" textLength="56" x="0">&gt; done </text><text class="background" textLength="8" x="56"> </text></g><g id="g70"><text class="foreground" textLength="64" x="0">&gt; done |</text><text class="background" textLength="8" x="64"> </text></g><g id="g71"><text class="foreground" textLength="72" x="0">&gt; done | </text><text class="background" textLength="8" x="72"> </text></g><g id="g72"><text class="foreground" textLength="80" x="0">&gt; done | l</text><text class="background" textLength="8" x="80"> </text></g><g id="g73"><text class="foreground" textLength="88" x="0">&gt; done | lo</text><text class="background" textLength="8" x="88"> </text></g><g id="g74"><text class="foreground" textLength="96" x="0">&gt; done | lol</text><text class="background" textLength="8" x="96"> </text></g><g id="g75"><text class="foreground" textLength="104" x="0">&gt; done | lolc</text><text class="background" textLength="8" x="104"> </text></g><g id="g76"><text class="foreground" textLength="112" x="0">&gt; done | lolca</text><text class="background" textLength="8" x="112"> </text></g><g id="g77"><text class="foreground" textLength="120" x="0">&gt; done | lolcat</text><text class="background" textLength="8" x="120"> </text></g><g id="g78"><text class="foreground" textLength="120" x="0">&gt; done | lolcat</text></g><g id="g79"><text fill="#5f5fff" textLength="32" x="0">term</text><text fill="#5f87ff" textLength="8" x="32">t</text><text fill="#0087ff" textLength="72" x="40">osvg is a</text><text fill="#00afff" textLength="56" x="112">wesome!</text></g><g id="g80"><text fill="#5f5fff" textLength="8" x="0">t</text><text fill="#5f87ff" textLength="8" x="8">e</text><text fill="#0087ff" textLength="72" x="16">rmtosvg i</text><text fill="#00afff" textLength="72" x="88">s awesome</text><text fill="#00afd7" textLength="8" x="160">!</text></g><g id="g81"><text fill="#0087ff" textLength="32" x="0">term</text><text class="background" textLength="8" x="32"> </text></g><g id="g82"><text fill="#0087ff" textLength="64" x="0">termtosv</text><text fill="#00afff" textLength="72" x="64">g is awes</text><text fill="#00afd7" textLength="16" x="136">om</text><text fill="#00d7d7" textLength="16" x="152">e!</text></g><g id="g83"><text fill="#0087ff" textLength="40" x="0">termt</text><text fill="#00afff" textLength="72" x="40">osvg is a</text><text fill="#00afd7" textLength="16" x="112">we</text><text fill="#00d7d7" textLength="8" x="128">s</text><text class="background" textLength="8" x="136"> </text></g><g id="g84"><text fill="#0087ff" textLength="40" x="0">termt</text><text fill="#00afff" textLength="72" x="40">osvg is a</text><text fill="#00afd7" textLength="16" x="112">we</text><text fill="#00d7d7" textLength="16" x="128">so</text><text class="background" textLength="8" x="144"> </text></g><g id="g85"><text fill="#0087ff" textLength="40" x="0">termt</text><text fill="#00afff" textLength="72" x="40">osvg is a</text><text fill="#00afd7" textLength="16" x="112">we</text><text fill="#00d7d7" textLength="40" x="128">some!</text></g><g id="g86"><text fill="#0087ff" textLength="16" x="0">te</text><text fill="#00afff" textLength="72" x="16">rmtosvg i</text><text fill="#00afd7" textLength="16" x="88">s </text><text fill="#00d7d7" textLength="64" x="104">awesome!</text></g><g id="g87"><text fill="#00afff" textLength="64" x="0">termtosv</text><text fill="#00afd7" textLength="16" x="64">g </text><text fill="#00d7d7" textLength="80" x="80">is awesome</text><text fill="#00d7af" textLength="8" x="160">!</text></g><g id="g88"><text fill="#00afff" textLength="40" x="0">termt</text><text fill="#00afd7" textLength="16" x="40">os</text><text fill="#00d7d7" textLength="72" x="56">vg is awe</text><text class="background" textLength="8" x="128"> </text></g><g id="g89"><text fill="#00afff" textLength="40" x="0">termt</text><text fill="#00afd7" textLength="16" x="40">os</text><text fill="#00d7d7" textLength="80" x="56">vg is awes</text><text fill="#00d7af" textLength="8" x="136">o</text><text fill="#00ffaf" textLength="24" x="144">me!</text></g><g id="g90"><text fill="#00afff" textLength="16" x="0">te</text><text fill="#00afd7" textLength="16" x="16">rm</text><text fill="#00d7d7" textLength="80" x="32">tosvg is a</text><text fill="#00d7af" textLength="8" x="112">w</text><text fill="#00ffaf" textLength="48" x="120">esome!</text></g><g id="g91"><text fill="#00afd7" textLength="8" x="0">t</text><text fill="#00d7d7" textLength="80" x="8">ermtosvg i</text><text fill="#00d7af" textLength="8" x="88">s</text><text fill="#00ffaf" textLength="72" x="96"> awesome!</text></g><g id="g92"><text fill="#00d7d7" textLength="64" x="0">termtosv</text><text fill="#00d7af" textLength="8" x="64">g</text><text fill="#00ffaf" textLength="32" x="72"> is </text><text class="background" textLength="8" x="104"> </text></g><g id="g93"><text fill="#00d7d7" textLength="64" x="0">termtosv</text><text fill="#00d7af" textLength="8" x="64">g</text><text fill="#00ffaf" textLength="80" x="72"> is awesom</text><text fill="#00ff87" textLength="16" x="152">e!</text></g><g id="g94"><text fill="#00d7d7" textLength="40" x="0">termt</text><text fill="#00d7af" textLength="8" x="40">o</text><text fill="#00ffaf" textLength="80" x="48">svg is awe</text><text fill="#00ff87" textLength="40" x="128">some!</text></g><g id="g95"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="8" x="72">e</text><text class="background" textLength="8" x="80"> </text></g><g id="g96"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="16" x="72">ex</text><text class="background" textLength="8" x="88"> </text></g><g id="g97"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="24" x="72">exi</text><text class="background" textLength="8" x="96"> </text></g><g id="g98"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="32" x="72">exit</text><text class="background" textLength="8" x="104"> </text></g><g id="g99"><text class="color1" textLength="40" x="0">nico </text><text class="color4" textLength="8" x="40">~</text><text class="color1" textLength="24" x="48"> $ </text><text class="foreground" textLength="32" x="72">exit</text></g><g id="g100"><text class="foreground" textLength="32" x="0">exit</text></g><g id="g101"><text class="foreground" textLength="488" x="0">Recording ended, SVG animation is /tmp/termtosvg__20rwx67.svg</text></g></defs><g id="screen_view"><g><rect class="foreground" height="17" width="8" x="72" y="0"/><use y="0" xlink:href="#g1"/></g><g><rect class="foreground" height="17" width="8" x="80" y="340"/><use y="340" xlink:href="#g2"/></g><g><rect class="foreground" height="17" width="8" x="88" y="680"/><use y="680" xlink:href="#g3"/></g><g><rect class="foreground" height="17" width="8" x="96" y="1020"/><use y="1020" xlink:href="#g4"/></g><g><rect class="foreground" height="17" width="8" x="104" y="1360"/><use y="1360" xlink:href="#g5"/></g><g><rect class="foreground" height="17" width="8" x="112" y="1700"/><use y="1700" xlink:href="#g6"/></g><g><rect class="foreground" height="17" width="8" x="120" y="2040"/><use y="2040" xlink:href="#g7"/></g><g><rect class="foreground" height="17" width="8" x="128" y="2380"/><use y="2380" xlink:href="#g8"/></g><g><rect class="foreground" height="17" width="8" x="136" y="2720"/><use y="2720" xlink:href="#g9"/></g><g><rect class="foreground" height="17" width="8" x="144" y="3060"/><use y="3060" xlink:href="#g10"/></g><g><use y="3400" xlink:href="#g11"/><rect class="foreground" height="17" width="8" x="0" y="3417"/><use y="3417" xlink:href="#g12"/></g><g><use y="3740" xlink:href="#g11"/><use y="3757" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="0" y="3774"/><use y="3774" xlink:href="#g12"/></g><g><use y="4080" xlink:href="#g11"/><use y="4097" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="72" y="4114"/><use y="4114" xlink:href="#g1"/></g><g><use y="4420" xlink:href="#g11"/><use y="4437" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="80" y="4454"/><use y="4454" xlink:href="#g14"/></g><g><use y="4760" xlink:href="#g11"/><use y="4777" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="88" y="4794"/><use y="4794" xlink:href="#g15"/></g><g><use y="5100" xlink:href="#g11"/><use y="5117" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="96" y="5134"/><use y="5134" xlink:href="#g16"/></g><g><use y="5440" xlink:href="#g11"/><use y="5457" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="104" y="5474"/><use y="5474" xlink:href="#g17"/></g><g><use y="5780" xlink:href="#g11"/><use y="5797" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="112" y="5814"/><use y="5814" xlink:href="#g18"/></g><g><use y="6120" xlink:href="#g11"/><use y="6137" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="120" y="6154"/><use y="6154" xlink:href="#g19"/></g><g><use y="6460" xlink:href="#g11"/><use y="6477" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="128" y="6494"/><use y="6494" xlink:href="#g20"/></g><g><use y="6800" xlink:href="#g11"/><use y="6817" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="136" y="6834"/><use y="6834" xlink:href="#g21"/></g><g><use y="7140" xlink:href="#g11"/><use y="7157" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="144" y="7174"/><use y="7174" xlink:href="#g22"/></g><g><use y="7480" xlink:href="#g11"/><use y="7497" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="152" y="7514"/><use y="7514" xlink:href="#g23"/></g><g><use y="7820" xlink:href="#g11"/><use y="7837" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="160" y="7854"/><use y="7854" xlink:href="#g24"/></g><g><use y="8160" xlink:href="#g11"/><use y="8177" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="168" y="8194"/><use y="8194" xlink:href="#g25"/></g><g><use y="8500" xlink:href="#g11"/><use y="8517" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="176" y="8534"/><use y="8534" xlink:href="#g26"/></g><g><use y="8840" xlink:href="#g11"/><use y="8857" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="184" y="8874"/><use y="8874" xlink:href="#g27"/></g><g><use y="9180" xlink:href="#g11"/><use y="9197" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="192" y="9214"/><use y="9214" xlink:href="#g28"/></g><g><use y="9520" xlink:href="#g11"/><use y="9537" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="200" y="9554"/><use y="9554" xlink:href="#g29"/></g><g><use y="9860" xlink:href="#g11"/><use y="9877" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="208" y="9894"/><use y="9894" xlink:href="#g30"/></g><g><use y="10200" xlink:href="#g11"/><use y="10217" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="216" y="10234"/><use y="10234" xlink:href="#g31"/></g><g><use y="10540" xlink:href="#g11"/><use y="10557" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="224" y="10574"/><use y="10574" xlink:href="#g32"/></g><g><use y="10880" xlink:href="#g11"/><use y="10897" xlink:href="#g13"/><rect class="foreground" height="17" width="8" x="232" y="10914"/><use y="10914" xlink:href="#g33"/></g><g><use y="11220" xlink:href="#g11"/><use y="11237" xlink:href="#g13"/><use y="11254" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="0" y="11271"/><use y="11271" xlink:href="#g12"/></g><g><use y="11560" xlink:href="#g11"/><use y="11577" xlink:href="#g13"/><use y="11594" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="16" y="11611"/><use y="11611" xlink:href="#g35"/></g><g><use y="11900" xlink:href="#g11"/><use y="11917" xlink:href="#g13"/><use y="11934" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="24" y="11951"/><use y="11951" xlink:href="#g36"/></g><g><use y="12240" xlink:href="#g11"/><use y="12257" xlink:href="#g13"/><use y="12274" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="32" y="12291"/><use y="12291" xlink:href="#g37"/></g><g><use y="12580" xlink:href="#g11"/><use y="12597" xlink:href="#g13"/><use y="12614" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="40" y="12631"/><use y="12631" xlink:href="#g38"/></g><g><use y="12920" xlink:href="#g11"/><use y="12937" xlink:href="#g13"/><use y="12954" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="48" y="12971"/><use y="12971" xlink:href="#g39"/></g><g><use y="13260" xlink:href="#g11"/><use y="13277" xlink:href="#g13"/><use y="13294" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="56" y="13311"/><use y="13311" xlink:href="#g40"/></g><g><use y="13600" xlink:href="#g11"/><use y="13617" xlink:href="#g13"/><use y="13634" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="64" y="13651"/><use y="13651" xlink:href="#g41"/></g><g><use y="13940" xlink:href="#g11"/><use y="13957" xlink:href="#g13"/><use y="13974" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="72" y="13991"/><use y="13991" xlink:href="#g42"/></g><g><use y="14280" xlink:href="#g11"/><use y="14297" xlink:href="#g13"/><use y="14314" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="80" y="14331"/><use y="14331" xlink:href="#g43"/></g><g><use y="14620" xlink:href="#g11"/><use y="14637" xlink:href="#g13"/><use y="14654" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="88" y="14671"/><use y="14671" xlink:href="#g44"/></g><g><use y="14960" xlink:href="#g11"/><use y="14977" xlink:href="#g13"/><use y="14994" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="96" y="15011"/><use y="15011" xlink:href="#g45"/></g><g><use y="15300" xlink:href="#g11"/><use y="15317" xlink:href="#g13"/><use y="15334" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="104" y="15351"/><use y="15351" xlink:href="#g46"/></g><g><use y="15640" xlink:href="#g11"/><use y="15657" xlink:href="#g13"/><use y="15674" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="112" y="15691"/><use y="15691" xlink:href="#g47"/></g><g><use y="15980" xlink:href="#g11"/><use y="15997" xlink:href="#g13"/><use y="16014" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="120" y="16031"/><use y="16031" xlink:href="#g48"/></g><g><use y="16320" xlink:href="#g11"/><use y="16337" xlink:href="#g13"/><use y="16354" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="128" y="16371"/><use y="16371" xlink:href="#g49"/></g><g><use y="16660" xlink:href="#g11"/><use y="16677" xlink:href="#g13"/><use y="16694" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="136" y="16711"/><use y="16711" xlink:href="#g50"/></g><g><use y="17000" xlink:href="#g11"/><use y="17017" xlink:href="#g13"/><use y="17034" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="144" y="17051"/><use y="17051" xlink:href="#g51"/></g><g><use y="17340" xlink:href="#g11"/><use y="17357" xlink:href="#g13"/><use y="17374" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="152" y="17391"/><use y="17391" xlink:href="#g52"/></g><g><use y="17680" xlink:href="#g11"/><use y="17697" xlink:href="#g13"/><use y="17714" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="160" y="17731"/><use y="17731" xlink:href="#g53"/></g><g><use y="18020" xlink:href="#g11"/><use y="18037" xlink:href="#g13"/><use y="18054" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="168" y="18071"/><use y="18071" xlink:href="#g54"/></g><g><use y="18360" xlink:href="#g11"/><use y="18377" xlink:href="#g13"/><use y="18394" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="176" y="18411"/><use y="18411" xlink:href="#g55"/></g><g><use y="18700" xlink:href="#g11"/><use y="18717" xlink:href="#g13"/><use y="18734" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="184" y="18751"/><use y="18751" xlink:href="#g56"/></g><g><use y="19040" xlink:href="#g11"/><use y="19057" xlink:href="#g13"/><use y="19074" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="192" y="19091"/><use y="19091" xlink:href="#g57"/></g><g><use y="19380" xlink:href="#g11"/><use y="19397" xlink:href="#g13"/><use y="19414" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="200" y="19431"/><use y="19431" xlink:href="#g58"/></g><g><use y="19720" xlink:href="#g11"/><use y="19737" xlink:href="#g13"/><use y="19754" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="208" y="19771"/><use y="19771" xlink:href="#g59"/></g><g><use y="20060" xlink:href="#g11"/><use y="20077" xlink:href="#g13"/><use y="20094" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="216" y="20111"/><use y="20111" xlink:href="#g60"/></g><g><use y="20400" xlink:href="#g11"/><use y="20417" xlink:href="#g13"/><use y="20434" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="224" y="20451"/><use y="20451" xlink:href="#g61"/></g><g><use y="20740" xlink:href="#g11"/><use y="20757" xlink:href="#g13"/><use y="20774" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="232" y="20791"/><use y="20791" xlink:href="#g62"/></g><g><use y="21080" xlink:href="#g11"/><use y="21097" xlink:href="#g13"/><use y="21114" xlink:href="#g34"/><rect class="foreground" height="17" width="8" x="240" y="21131"/><use y="21131" xlink:href="#g63"/></g><g><use y="21420" xlink:href="#g11"/><use y="21437" xlink:href="#g13"/><use y="21454" xlink:href="#g34"/><use y="21471" xlink:href="#g64"/><rect class="foreground" height="17" width="8" x="0" y="21488"/><use y="21488" xlink:href="#g12"/></g><g><use y="21760" xlink:href="#g11"/><use y="21777" xlink:href="#g13"/><use y="21794" xlink:href="#g34"/><use y="21811" xlink:href="#g64"/><rect class="foreground" height="17" width="8" x="16" y="21828"/><use y="21828" xlink:href="#g35"/></g><g><use y="22100" xlink:href="#g11"/><use y="22117" xlink:href="#g13"/><use y="22134" xlink:href="#g34"/><use y="22151" xlink:href="#g64"/><rect class="foreground" height="17" width="8" x="24" y="22168"/><use y="22168" xlink:href="#g65"/></g><g><use y="22440" xlink:href="#g11"/><use y="22457" xlink:href="#g13"/><use y="22474" xlink:href="#g34"/><use y="22491" xlink:href="#g64"/><rect class="foreground" height="17" width="8" x="32" y="22508"/><use y="22508" xlink:href="#g66"/></g><g><use y="22780" xlink:href="#g11"/><use y="22797" xlink:href="#g13"/><use y="22814" xlink:href="#g34"/><use y="22831" xlink:href="#g64"/><rect class="foreground" height="17" width="8" x="40" y="22848"/><use y="22848" xlink:href="#g67"/></g><g><use y="23120" xlink:href="#g11"/><use y="23137" xlink:href="#g13"/><use y="23154" xlink:href="#g34"/><use y="23171" xlink:href="#g64"/><rect class="foreground" height="17" width="8" x="48" y="23188"/><use y="23188" xlink:href="#g68"/></g><g><use y="23460" xlink:href="#g11"/><use y="23477" xlink:href="#g13"/><use y="23494" xlink:href="#g34"/><use y="23511" xlink:href="#g64"/><rect class="foreground" height="17" width="8" x="56" y="23528"/><use y="23528" xlink:href="#g69"/></g><g><use y="23800" xlink:href="#g11"/><use y="23817" xlink:href="#g13"/><use y="23834" xlink:href="#g34"/><use y="23851" xlink:href="#g64"/><rect class="foreground" height="17" width="8" x="64" y="23868"/><use y="23868" xlink:href="#g70"/></g><g><use y="24140" xlink:href="#g11"/><use y="24157" xlink:href="#g13"/><use y="24174" xlink:href="#g34"/><use y="24191" xlink:href="#g64"/><rect class="foreground" height="17" width="8" x="72" y="24208"/><use y="24208" xlink:href="#g71"/></g><g><use y="24480" xlink:href="#g11"/><use y="24497" xlink:href="#g13"/><use y="24514" xlink:href="#g34"/><use y="24531" xlink:href="#g64"/><rect class="foreground" height="17" width="8" x="80" y="24548"/><use y="24548" xlink:href="#g72"/></g><g><use y="24820" xlink:href="#g11"/><use y="24837" xlink:href="#g13"/><use y="24854" xlink:href="#g34"/><use y="24871" xlink:href="#g64"/><rect class="foreground" height="17" width="8" x="88" y="24888"/><use y="24888" xlink:href="#g73"/></g><g><use y="25160" xlink:href="#g11"/><use y="25177" xlink:href="#g13"/><use y="25194" xlink:href="#g34"/><use y="25211" xlink:href="#g64"/><rect class="foreground" height="17" width="8" x="96" y="25228"/><use y="25228" xlink:href="#g74"/></g><g><use y="25500" xlink:href="#g11"/><use y="25517" xlink:href="#g13"/><use y="25534" xlink:href="#g34"/><use y="25551" xlink:href="#g64"/><rect class="foreground" height="17" width="8" x="104" y="25568"/><use y="25568" xlink:href="#g75"/></g><g><use y="25840" xlink:href="#g11"/><use y="25857" xlink:href="#g13"/><use y="25874" xlink:href="#g34"/><use y="25891" xlink:href="#g64"/><rect class="foreground" height="17" width="8" x="112" y="25908"/><use y="25908" xlink:href="#g76"/></g><g><use y="26180" xlink:href="#g11"/><use y="26197" xlink:href="#g13"/><use y="26214" xlink:href="#g34"/><use y="26231" xlink:href="#g64"/><rect class="foreground" height="17" width="8" x="120" y="26248"/><use y="26248" xlink:href="#g77"/></g><g><use y="26520" xlink:href="#g11"/><use y="26537" xlink:href="#g13"/><use y="26554" xlink:href="#g34"/><use y="26571" xlink:href="#g64"/><use y="26588" xlink:href="#g78"/><rect class="foreground" height="17" width="8" x="0" y="26605"/><use y="26605" xlink:href="#g12"/></g><g><use y="26860" xlink:href="#g11"/><use y="26877" xlink:href="#g13"/><use y="26894" xlink:href="#g34"/><use y="26911" xlink:href="#g64"/><use y="26928" xlink:href="#g78"/><use y="26945" xlink:href="#g79"/><use y="26962" xlink:href="#g80"/><rect class="foreground" height="17" width="8" x="32" y="26979"/><use y="26979" xlink:href="#g81"/></g><g><use y="27200" xlink:href="#g11"/><use y="27217" xlink:href="#g13"/><use y="27234" xlink:href="#g34"/><use y="27251" xlink:href="#g64"/><use y="27268" xlink:href="#g78"/><use y="27285" xlink:href="#g79"/><use y="27302" xlink:href="#g80"/><use y="27319" xlink:href="#g82"/><rect fill="#00d7d7" height="17" width="8" x="136" y="27336"/><use y="27336" xlink:href="#g83"/></g><g><use y="27540" xlink:href="#g11"/><use y="27557" xlink:href="#g13"/><use y="27574" xlink:href="#g34"/><use y="27591" xlink:href="#g64"/><use y="27608" xlink:href="#g78"/><use y="27625" xlink:href="#g79"/><use y="27642" xlink:href="#g80"/><use y="27659" xlink:href="#g82"/><rect class="foreground" height="17" width="8" x="144" y="27676"/><use y="27676" xlink:href="#g84"/></g><g><use y="27880" xlink:href="#g11"/><use y="27897" xlink:href="#g13"/><use y="27914" xlink:href="#g34"/><use y="27931" xlink:href="#g64"/><use y="27948" xlink:href="#g78"/><use y="27965" xlink:href="#g79"/><use y="27982" xlink:href="#g80"/><use y="27999" xlink:href="#g82"/><use y="28016" xlink:href="#g85"/><use y="28033" xlink:href="#g86"/><use y="28050" xlink:href="#g87"/><rect fill="#00d7d7" height="17" width="8" x="128" y="28067"/><use y="28067" xlink:href="#g88"/></g><g><use y="28220" xlink:href="#g11"/><use y="28237" xlink:href="#g13"/><use y="28254" xlink:href="#g34"/><use y="28271" xlink:href="#g64"/><use y="28288" xlink:href="#g78"/><use y="28305" xlink:href="#g79"/><use y="28322" xlink:href="#g80"/><use y="28339" xlink:href="#g82"/><use y="28356" xlink:href="#g85"/><use y="28373" xlink:href="#g86"/><use y="28390" xlink:href="#g87"/><use y="28407" xlink:href="#g89"/><use y="28424" xlink:href="#g90"/><use y="28441" xlink:href="#g91"/><rect fill="#00ffaf" height="17" width="8" x="104" y="28458"/><use y="28458" xlink:href="#g92"/></g><g><use y="28560" xlink:href="#g11"/><use y="28577" xlink:href="#g13"/><use y="28594" xlink:href="#g34"/><use y="28611" xlink:href="#g64"/><use y="28628" xlink:href="#g78"/><use y="28645" xlink:href="#g79"/><use y="28662" xlink:href="#g80"/><use y="28679" xlink:href="#g82"/><use y="28696" xlink:href="#g85"/><use y="28713" xlink:href="#g86"/><use y="28730" xlink:href="#g87"/><use y="28747" xlink:href="#g89"/><use y="28764" xlink:href="#g90"/><use y="28781" xlink:href="#g91"/><use y="28798" xlink:href="#g93"/><use y="28815" xlink:href="#g94"/><rect class="foreground" height="17" width="8" x="72" y="28832"/><use y="28832" xlink:href="#g1"/></g><g><use y="28900" xlink:href="#g11"/><use y="28917" xlink:href="#g13"/><use y="28934" xlink:href="#g34"/><use y="28951" xlink:href="#g64"/><use y="28968" xlink:href="#g78"/><use y="28985" xlink:href="#g79"/><use y="29002" xlink:href="#g80"/><use y="29019" xlink:href="#g82"/><use y="29036" xlink:href="#g85"/><use y="29053" xlink:href="#g86"/><use y="29070" xlink:href="#g87"/><use y="29087" xlink:href="#g89"/><use y="29104" xlink:href="#g90"/><use y="29121" xlink:href="#g91"/><use y="29138" xlink:href="#g93"/><use y="29155" xlink:href="#g94"/><rect class="foreground" height="17" width="8" x="80" y="29172"/><use y="29172" xlink:href="#g95"/></g><g><use y="29240" xlink:href="#g11"/><use y="29257" xlink:href="#g13"/><use y="29274" xlink:href="#g34"/><use y="29291" xlink:href="#g64"/><use y="29308" xlink:href="#g78"/><use y="29325" xlink:href="#g79"/><use y="29342" xlink:href="#g80"/><use y="29359" xlink:href="#g82"/><use y="29376" xlink:href="#g85"/><use y="29393" xlink:href="#g86"/><use y="29410" xlink:href="#g87"/><use y="29427" xlink:href="#g89"/><use y="29444" xlink:href="#g90"/><use y="29461" xlink:href="#g91"/><use y="29478" xlink:href="#g93"/><use y="29495" xlink:href="#g94"/><rect class="foreground" height="17" width="8" x="88" y="29512"/><use y="29512" xlink:href="#g96"/></g><g><use y="29580" xlink:href="#g11"/><use y="29597" xlink:href="#g13"/><use y="29614" xlink:href="#g34"/><use y="29631" xlink:href="#g64"/><use y="29648" xlink:href="#g78"/><use y="29665" xlink:href="#g79"/><use y="29682" xlink:href="#g80"/><use y="29699" xlink:href="#g82"/><use y="29716" xlink:href="#g85"/><use y="29733" xlink:href="#g86"/><use y="29750" xlink:href="#g87"/><use y="29767" xlink:href="#g89"/><use y="29784" xlink:href="#g90"/><use y="29801" xlink:href="#g91"/><use y="29818" xlink:href="#g93"/><use y="29835" xlink:href="#g94"/><rect class="foreground" height="17" width="8" x="96" y="29852"/><use y="29852" xlink:href="#g97"/></g><g><use y="29920" xlink:href="#g11"/><use y="29937" xlink:href="#g13"/><use y="29954" xlink:href="#g34"/><use y="29971" xlink:href="#g64"/><use y="29988" xlink:href="#g78"/><use y="30005" xlink:href="#g79"/><use y="30022" xlink:href="#g80"/><use y="30039" xlink:href="#g82"/><use y="30056" xlink:href="#g85"/><use y="30073" xlink:href="#g86"/><use y="30090" xlink:href="#g87"/><use y="30107" xlink:href="#g89"/><use y="30124" xlink:href="#g90"/><use y="30141" xlink:href="#g91"/><use y="30158" xlink:href="#g93"/><use y="30175" xlink:href="#g94"/><rect class="foreground" height="17" width="8" x="104" y="30192"/><use y="30192" xlink:href="#g98"/></g><g><use y="30260" xlink:href="#g11"/><use y="30277" xlink:href="#g13"/><use y="30294" xlink:href="#g34"/><use y="30311" xlink:href="#g64"/><use y="30328" xlink:href="#g78"/><use y="30345" xlink:href="#g79"/><use y="30362" xlink:href="#g80"/><use y="30379" xlink:href="#g82"/><use y="30396" xlink:href="#g85"/><use y="30413" xlink:href="#g86"/><use y="30430" xlink:href="#g87"/><use y="30447" xlink:href="#g89"/><use y="30464" xlink:href="#g90"/><use y="30481" xlink:href="#g91"/><use y="30498" xlink:href="#g93"/><use y="30515" xlink:href="#g94"/><use y="30532" xlink:href="#g99"/><use y="30549" xlink:href="#g100"/><rect class="foreground" height="17" width="8" x="0" y="30566"/><use y="30566" xlink:href="#g12"/></g><g><use y="30600" xlink:href="#g13"/><use y="30617" xlink:href="#g34"/><use y="30634" xlink:href="#g64"/><use y="30651" xlink:href="#g78"/><use y="30668" xlink:href="#g79"/><use y="30685" xlink:href="#g80"/><use y="30702" xlink:href="#g82"/><use y="30719" xlink:href="#g85"/><use y="30736" xlink:href="#g86"/><use y="30753" xlink:href="#g87"/><use y="30770" xlink:href="#g89"/><use y="30787" xlink:href="#g90"/><use y="30804" xlink:href="#g91"/><use y="30821" xlink:href="#g93"/><use y="30838" xlink:href="#g94"/><use y="30855" xlink:href="#g99"/><use y="30872" xlink:href="#g100"/><use y="30889" xlink:href="#g101"/><rect class="foreground" height="17" width="8" x="72" y="30906"/><use y="30906" xlink:href="#g1"/></g><g><use y="30940" xlink:href="#g13"/><use y="30957" xlink:href="#g34"/><use y="30974" xlink:href="#g64"/><use y="30991" xlink:href="#g78"/><use y="31008" xlink:href="#g79"/><use y="31025" xlink:href="#g80"/><use y="31042" xlink:href="#g82"/><use y="31059" xlink:href="#g85"/><use y="31076" xlink:href="#g86"/><use y="31093" xlink:href="#g87"/><use y="31110" xlink:href="#g89"/><use y="31127" xlink:href="#g90"/><use y="31144" xlink:href="#g91"/><use y="31161" xlink:href="#g93"/><use y="31178" xlink:href="#g94"/><use y="31195" xlink:href="#g99"/><use y="31212" xlink:href="#g100"/><use y="31229" xlink:href="#g101"/><rect class="foreground" height="17" width="8" x="72" y="31246"/><use y="31246" xlink:href="#g1"/></g></g></svg>
<text id="timer" class="foreground">0:00/0:00</text>
<!-- Invisible, wider track to make frame seeking easier -->
<use xlink:href="#slider_wide_track" id="wide_track" class="background"/>
<!-- Visible track -->
<use xlink:href="#slider_track" id="track" class="foreground"/>
<use xlink:href="#slider_button" id="slider_1"/>
<use xlink:href="#icon-play" id="play-button" class="foreground"/>
<use xlink:href="#icon-pause" id="pause-button" class="foreground"/>
<script type="text/javascript" id="generated-js"><![CDATA[
var termtosvg_vars = {
transforms: [
{transform: 'translate3D(0, 0px, 0)', easing: 'steps(1, end)'},
{transform: 'translate3D(0, -340px, 0)', easing: 'steps(1, end)', offset: 0.014},
{transform: 'translate3D(0, -680px, 0)', easing: 'steps(1, end)', offset: 0.020},
{transform: 'translate3D(0, -1020px, 0)', easing: 'steps(1, end)', offset: 0.022},
{transform: 'translate3D(0, -1360px, 0)', easing: 'steps(1, end)', offset: 0.026},
{transform: 'translate3D(0, -1700px, 0)', easing: 'steps(1, end)', offset: 0.039},
{transform: 'translate3D(0, -2040px, 0)', easing: 'steps(1, end)', offset: 0.043},
{transform: 'translate3D(0, -2380px, 0)', easing: 'steps(1, end)', offset: 0.056},
{transform: 'translate3D(0, -2720px, 0)', easing: 'steps(1, end)', offset: 0.061},
{transform: 'translate3D(0, -3060px, 0)', easing: 'steps(1, end)', offset: 0.067},
{transform: 'translate3D(0, -3400px, 0)', easing: 'steps(1, end)', offset: 0.075},
{transform: 'translate3D(0, -3740px, 0)', easing: 'steps(1, end)', offset: 0.085},
{transform: 'translate3D(0, -4080px, 0)', easing: 'steps(1, end)', offset: 0.085},
{transform: 'translate3D(0, -4420px, 0)', easing: 'steps(1, end)', offset: 0.107},
{transform: 'translate3D(0, -4760px, 0)', easing: 'steps(1, end)', offset: 0.112},
{transform: 'translate3D(0, -5100px, 0)', easing: 'steps(1, end)', offset: 0.115},
{transform: 'translate3D(0, -5440px, 0)', easing: 'steps(1, end)', offset: 0.122},
{transform: 'translate3D(0, -5780px, 0)', easing: 'steps(1, end)', offset: 0.140},
{transform: 'translate3D(0, -6120px, 0)', easing: 'steps(1, end)', offset: 0.150},
{transform: 'translate3D(0, -6460px, 0)', easing: 'steps(1, end)', offset: 0.157},
{transform: 'translate3D(0, -6800px, 0)', easing: 'steps(1, end)', offset: 0.161},
{transform: 'translate3D(0, -7140px, 0)', easing: 'steps(1, end)', offset: 0.171},
{transform: 'translate3D(0, -7480px, 0)', easing: 'steps(1, end)', offset: 0.187},
{transform: 'translate3D(0, -7820px, 0)', easing: 'steps(1, end)', offset: 0.198},
{transform: 'translate3D(0, -8160px, 0)', easing: 'steps(1, end)', offset: 0.207},
{transform: 'translate3D(0, -8500px, 0)', easing: 'steps(1, end)', offset: 0.212},
{transform: 'translate3D(0, -8840px, 0)', easing: 'steps(1, end)', offset: 0.217},
{transform: 'translate3D(0, -9180px, 0)', easing: 'steps(1, end)', offset: 0.252},
{transform: 'translate3D(0, -9520px, 0)', easing: 'steps(1, end)', offset: 0.263},
{transform: 'translate3D(0, -9860px, 0)', easing: 'steps(1, end)', offset: 0.286},
{transform: 'translate3D(0, -10200px, 0)', easing: 'steps(1, end)', offset: 0.297},
{transform: 'translate3D(0, -10540px, 0)', easing: 'steps(1, end)', offset: 0.301},
{transform: 'translate3D(0, -10880px, 0)', easing: 'steps(1, end)', offset: 0.305},
{transform: 'translate3D(0, -11220px, 0)', easing: 'steps(1, end)', offset: 0.326},
{transform: 'translate3D(0, -11560px, 0)', easing: 'steps(1, end)', offset: 0.326},
{transform: 'translate3D(0, -11900px, 0)', easing: 'steps(1, end)', offset: 0.345},
{transform: 'translate3D(0, -12240px, 0)', easing: 'steps(1, end)', offset: 0.353},
{transform: 'translate3D(0, -12580px, 0)', easing: 'steps(1, end)', offset: 0.357},
{transform: 'translate3D(0, -12920px, 0)', easing: 'steps(1, end)', offset: 0.360},
{transform: 'translate3D(0, -13260px, 0)', easing: 'steps(1, end)', offset: 0.368},
{transform: 'translate3D(0, -13600px, 0)', easing: 'steps(1, end)', offset: 0.372},
{transform: 'translate3D(0, -13940px, 0)', easing: 'steps(1, end)', offset: 0.384},
{transform: 'translate3D(0, -14280px, 0)', easing: 'steps(1, end)', offset: 0.390},
{transform: 'translate3D(0, -14620px, 0)', easing: 'steps(1, end)', offset: 0.392},
{transform: 'translate3D(0, -14960px, 0)', easing: 'steps(1, end)', offset: 0.396},
{transform: 'translate3D(0, -15300px, 0)', easing: 'steps(1, end)', offset: 0.401},
{transform: 'translate3D(0, -15640px, 0)', easing: 'steps(1, end)', offset: 0.405},
{transform: 'translate3D(0, -15980px, 0)', easing: 'steps(1, end)', offset: 0.410},
{transform: 'translate3D(0, -16320px, 0)', easing: 'steps(1, end)', offset: 0.416},
{transform: 'translate3D(0, -16660px, 0)', easing: 'steps(1, end)', offset: 0.423},
{transform: 'translate3D(0, -17000px, 0)', easing: 'steps(1, end)', offset: 0.427},
{transform: 'translate3D(0, -17340px, 0)', easing: 'steps(1, end)', offset: 0.433},
{transform: 'translate3D(0, -17680px, 0)', easing: 'steps(1, end)', offset: 0.437},
{transform: 'translate3D(0, -18020px, 0)', easing: 'steps(1, end)', offset: 0.441},
{transform: 'translate3D(0, -18360px, 0)', easing: 'steps(1, end)', offset: 0.447},
{transform: 'translate3D(0, -18700px, 0)', easing: 'steps(1, end)', offset: 0.454},
{transform: 'translate3D(0, -19040px, 0)', easing: 'steps(1, end)', offset: 0.461},
{transform: 'translate3D(0, -19380px, 0)', easing: 'steps(1, end)', offset: 0.481},
{transform: 'translate3D(0, -19720px, 0)', easing: 'steps(1, end)', offset: 0.485},
{transform: 'translate3D(0, -20060px, 0)', easing: 'steps(1, end)', offset: 0.487},
{transform: 'translate3D(0, -20400px, 0)', easing: 'steps(1, end)', offset: 0.494},
{transform: 'translate3D(0, -20740px, 0)', easing: 'steps(1, end)', offset: 0.500},
{transform: 'translate3D(0, -21080px, 0)', easing: 'steps(1, end)', offset: 0.513},
{transform: 'translate3D(0, -21420px, 0)', easing: 'steps(1, end)', offset: 0.558},
{transform: 'translate3D(0, -21760px, 0)', easing: 'steps(1, end)', offset: 0.559},
{transform: 'translate3D(0, -22100px, 0)', easing: 'steps(1, end)', offset: 0.584},
{transform: 'translate3D(0, -22440px, 0)', easing: 'steps(1, end)', offset: 0.588},
{transform: 'translate3D(0, -22780px, 0)', easing: 'steps(1, end)', offset: 0.590},
{transform: 'translate3D(0, -23120px, 0)', easing: 'steps(1, end)', offset: 0.595},
{transform: 'translate3D(0, -23460px, 0)', easing: 'steps(1, end)', offset: 0.604},
{transform: 'translate3D(0, -23800px, 0)', easing: 'steps(1, end)', offset: 0.625},
{transform: 'translate3D(0, -24140px, 0)', easing: 'steps(1, end)', offset: 0.634},
{transform: 'translate3D(0, -24480px, 0)', easing: 'steps(1, end)', offset: 0.643},
{transform: 'translate3D(0, -24820px, 0)', easing: 'steps(1, end)', offset: 0.646},
{transform: 'translate3D(0, -25160px, 0)', easing: 'steps(1, end)', offset: 0.653},
{transform: 'translate3D(0, -25500px, 0)', easing: 'steps(1, end)', offset: 0.658},
{transform: 'translate3D(0, -25840px, 0)', easing: 'steps(1, end)', offset: 0.660},
{transform: 'translate3D(0, -26180px, 0)', easing: 'steps(1, end)', offset: 0.668},
{transform: 'translate3D(0, -26520px, 0)', easing: 'steps(1, end)', offset: 0.703},
{transform: 'translate3D(0, -26860px, 0)', easing: 'steps(1, end)', offset: 0.706},
{transform: 'translate3D(0, -27200px, 0)', easing: 'steps(1, end)', offset: 0.706},
{transform: 'translate3D(0, -27540px, 0)', easing: 'steps(1, end)', offset: 0.706},
{transform: 'translate3D(0, -27880px, 0)', easing: 'steps(1, end)', offset: 0.706},
{transform: 'translate3D(0, -28220px, 0)', easing: 'steps(1, end)', offset: 0.706},
{transform: 'translate3D(0, -28560px, 0)', easing: 'steps(1, end)', offset: 0.707},
{transform: 'translate3D(0, -28900px, 0)', easing: 'steps(1, end)', offset: 0.822},
{transform: 'translate3D(0, -29240px, 0)', easing: 'steps(1, end)', offset: 0.831},
{transform: 'translate3D(0, -29580px, 0)', easing: 'steps(1, end)', offset: 0.837},
{transform: 'translate3D(0, -29920px, 0)', easing: 'steps(1, end)', offset: 0.841},
{transform: 'translate3D(0, -30260px, 0)', easing: 'steps(1, end)', offset: 0.869},
{transform: 'translate3D(0, -30600px, 0)', easing: 'steps(1, end)', offset: 0.872},
{transform: 'translate3D(0, -30940px, 0)', easing: 'steps(1, end)', offset: 0.963},
{transform: 'translate3D(0, -30940px, 0)', easing: 'steps(1, end)'}
],
timings: {
duration: 27349,
iterations: Infinity
}
};]]></script>
<script type="text/javascript">
var animation = document.getElementById("screen_view").animate(
termtosvg_vars.transforms,
termtosvg_vars.timings
)
var terminal = document.getElementById('terminal')
var play_button = terminal.getElementById('play-button');
var pause_button = terminal.getElementById('pause-button');
var is_playing = true;
animation.onfinish = function() {
play_button.setAttribute('display', 'inline')
pause_button.setAttribute('display', 'none')
is_playing = false;
};
function togglePlayPause() {
if (is_playing) {
animation.pause()
play_button.setAttribute('display', 'inline')
pause_button.setAttribute('display', 'none')
is_playing = false
} else {
animation.play()
play_button.setAttribute('display', 'none')
pause_button.setAttribute('display', 'inline')
is_playing = true
}
};
play_button.addEventListener('click', togglePlayPause, false)
pause_button.addEventListener('click', togglePlayPause, false)
var style = getComputedStyle(terminal);
var animation_duration = termtosvg_vars.timings.duration / 1000
var timer = terminal.getElementById('timer')
function timer_from_seconds(t) {
minutes = Math.floor(t / 60);
seconds = Math.floor(t % 60);
return minutes + ':' + ("0" + seconds).slice(-2)
}
function update_timer() {
var current_time = (animation.currentTime / 1000) % animation_duration
timer.textContent = timer_from_seconds(current_time) + "/" + timer_from_seconds(animation_duration)
}
setInterval(update_timer, "100ms")
var slider_1 = terminal.getElementById('slider_1');
function getTranslateX(elem) {
var style = window.getComputedStyle(elem);
var matrix = new WebKitCSSMatrix(style.webkitTransform);
return parseInt(matrix.m41)
}
var limitLower = parseInt(getTranslateX(terminal.getElementById('track')));
var limitUpper = limitLower + parseInt(terminal.getElementById('track').getBoundingClientRect().width) - 8
// Return X position for an event
function mx(evt){
var pt = terminal.createSVGPoint();
pt.x = evt.clientX;
return pt.matrixTransform(terminal.getScreenCTM().inverse());
}
// Set the current time of the animation to get the slider button under the cursor
var move = function(evt){
var cursor_position = mx(evt);
if ( cursor_position.x &lt; limitLower || cursor_position.x &gt; limitUpper ) {
return;
}
animation.currentTime = animation_duration * 1000 * (cursor_position.x - limitLower) / (limitUpper - limitLower)
};
// Move the slider button to the cursor position when a click happens on the track of the slider
terminal.getElementById('wide_track').addEventListener('click', move, false);
terminal.getElementById('track').addEventListener('click', move, false);
// Enable slider button dragging along the track
var dragging = false;
slider_1.addEventListener('mousedown',function(evt){
if (is_playing) {
animation.pause()
play_button.setAttribute('display', 'inline')
pause_button.setAttribute('display', 'none')
}
dragging = true;
terminal.addEventListener('mousemove', move, false);
document.documentElement.addEventListener('mouseup', function(){
dragging = false;
if (is_playing) {
animation.play()
play_button.setAttribute('display', 'none')
pause_button.setAttribute('display', 'inline')
}
terminal.removeEventListener('mousemove', move, false);
}, false);
}, false);
function update_slider_button() {
var current_time = (animation.currentTime / 1000) % animation_duration
var current_position = limitLower + (limitUpper - limitLower) * current_time / animation_duration
slider_1.setAttribute('x', parseInt(current_position)+'px')
}
setInterval(update_slider_button, "100ms")
</script>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment