.github/assets/preview.svg

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="290"
height="233.68">
  <rect width="290" height="233.68" rx="5" ry="5" class="a" />
  <svg y="0%" x="0%">
    <circle cx="20" cy="20" r="6" fill="#ff5555" />
    <circle cx="40" cy="20" r="6" fill="#ffb86c" />
    <circle cx="60" cy="20" r="6" fill="#50fa7b" />
  </svg>
  <svg height="173.68" viewBox="0 0 25 17.368" width="250" x="15"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" y="50">
    <style>@keyframes i { 0% { transform: translateX(0); } 2.3% {
    transform: translateX(-25px); } 3.9% { transform:
    translateX(-50px); } 5.5% { transform: translateX(-75px); }
    7.1% { transform: translateX(-100px); } 8.6% { transform:
    translateX(-125px); } 10.2% { transform: translateX(-150px); }
    11.8% { transform: translateX(-175px); } 13.4% { transform:
    translateX(-200px); } 14.9% { transform: translateX(-225px); }
    16.5% { transform: translateX(-250px); } 18.1% { transform:
    translateX(-275px); } 19.7% { transform: translateX(-300px); }
    21.2% { transform: translateX(-325px); } 22.8% { transform:
    translateX(-350px); } 24.4% { transform: translateX(-375px); }
    26% { transform: translateX(-400px); } 27.5% { transform:
    translateX(-425px); } 29.1% { transform: translateX(-450px); }
    30.7% { transform: translateX(-475px); } 32.3% { transform:
    translateX(-500px); } 33.8% { transform: translateX(-525px); }
    35.4% { transform: translateX(-550px); } 37% { transform:
    translateX(-575px); } 38.6% { transform: translateX(-600px); }
    40.1% { transform: translateX(-625px); } 41.7% { transform:
    translateX(-650px); } 43.3% { transform: translateX(-675px); }
    44.9% { transform: translateX(-700px); } 46.4% { transform:
    translateX(-725px); } 48% { transform: translateX(-750px); }
    49.6% { transform: translateX(-775px); } 51.2% { transform:
    translateX(-800px); } 52.7% { transform: translateX(-825px); }
    54.3% { transform: translateX(-850px); } 55.9% { transform:
    translateX(-875px); } 57.4% { transform: translateX(-900px); }
    59% { transform: translateX(-925px); } 60.6% { transform:
    translateX(-950px); } 62.2% { transform: translateX(-975px); }
    63.7% { transform: translateX(-1000px); } 65.3% { transform:
    translateX(-1025px); } 66.9% { transform: translateX(-1050px);
    } 68.5% { transform: translateX(-1075px); } 70.1% { transform:
    translateX(-1100px); } 71.6% { transform: translateX(-1125px);
    } 73.2% { transform: translateX(-1150px); } 74.8% { transform:
    translateX(-1175px); } 76.4% { transform: translateX(-1200px);
    } 77.9% { transform: translateX(-1225px); } 79.5% { transform:
    translateX(-1250px); } 81.1% { transform: translateX(-1275px);
    } 82.7% { transform: translateX(-1300px); } 84.2% { transform:
    translateX(-1325px); } 85.8% { transform: translateX(-1350px);
    } 87.4% { transform: translateX(-1375px); } 89% { transform:
    translateX(-1400px); } 90.5% { transform: translateX(-1425px);
    } 92.1% { transform: translateX(-1450px); } 93.7% { transform:
    translateX(-1475px); } 95.3% { transform: translateX(-1500px);
    } 96.8% { transform: translateX(-1525px); } 98.4% { transform:
    translateX(-1550px); } to { transform: translateX(-1575px); } }
    .a { fill: #282a36; } .f { fill: #f8f8f2; white-space: pre;
    }</style>
    <g font-family="Monaco,Consolas,Menlo,'Bitstream Vera Sans Mono','Powerline Symbols',monospace"
    font-size="1.67">
      <defs>
        <symbol id="1">
          <text y="1.67" class="f">◝</text>
          <text x="2.004" y="1.67" class="f">Connecting...</text>
        </symbol>
        <symbol id="2">
          <text y="1.67" class="f">◞</text>
          <text x="2.004" y="1.67" class="f">Connecting...</text>
        </symbol>
        <symbol id="3">
          <text y="1.67" class="f">◡</text>
          <text x="2.004" y="1.67" class="f">Connecting...</text>
        </symbol>
        <symbol id="4">
          <text y="1.67" class="f">◟</text>
          <text x="2.004" y="1.67" class="f">Connecting...</text>
        </symbol>
        <symbol id="5">
          <text y="1.67" class="f">◜</text>
          <text x="2.004" y="1.67" class="f">189.44</text>
          <text x="9.018" y="1.67" class="f">Mbps</text>
        </symbol>
        <symbol id="6">
          <text y="1.67" class="f">◠</text>
          <text x="2.004" y="1.67" class="f">189.44</text>
          <text x="9.018" y="1.67" class="f">Mbps</text>
        </symbol>
        <symbol id="7">
          <text y="1.67" class="f">◝</text>
          <text x="2.004" y="1.67" class="f">189.44</text>
          <text x="9.018" y="1.67" class="f">Mbps</text>
        </symbol>
        <symbol id="8">
          <text y="1.67" class="f">◞</text>
          <text x="2.004" y="1.67" class="f">189.44</text>
          <text x="9.018" y="1.67" class="f">Mbps</text>
        </symbol>
        <symbol id="9">
          <text y="1.67" class="f">◡</text>
          <text x="2.004" y="1.67" class="f">204.74</text>
          <text x="9.018" y="1.67" class="f">Mbps</text>
        </symbol>
        <symbol id="10">
          <text y="1.67" class="f">◟</text>
          <text x="2.004" y="1.67" class="f">204.74</text>
          <text x="9.018" y="1.67" class="f">Mbps</text>
        </symbol>
        <symbol id="11">
          <text y="1.67" class="f">◜</text>
          <text x="2.004" y="1.67" class="f">204.74</text>
          <text x="9.018" y="1.67" class="f">Mbps</text>
        </symbol>
        <symbol id="12">
          <text y="1.67" class="f">◠</text>
          <text x="2.004" y="1.67" class="f">204.74</text>
          <text x="9.018" y="1.67" class="f">Mbps</text>
        </symbol>
        <symbol id="13">
          <text y="1.67" class="f">◝</text>
          <text x="2.004" y="1.67" class="f">162.35</text>
          <text x="9.018" y="1.67" class="f">Mbps</text>
        </symbol>
        <symbol id="14">
          <text y="1.67" class="f">◞</text>
          <text x="2.004" y="1.67" class="f">162.35</text>
          <text x="9.018" y="1.67" class="f">Mbps</text>
        </symbol>
        <symbol id="15">
          <text y="1.67" class="f">◡</text>
          <text x="2.004" y="1.67" class="f">162.35</text>
          <text x="9.018" y="1.67" class="f">Mbps</text>
        </symbol>
        <symbol id="16">
          <text y="1.67" class="f">◟</text>
          <text x="2.004" y="1.67" class="f">162.35</text>
          <text x="9.018" y="1.67" class="f">Mbps</text>
        </symbol>
        <symbol id="17">
          <text y="1.67" class="f">◜</text>
          <text x="2.004" y="1.67" class="f">137.90</text>
          <text x="9.018" y="1.67" class="f">Mbps</text>
        </symbol>
        <symbol id="18">
          <text y="1.67" class="f">◠</text>
          <text x="2.004" y="1.67" class="f">137.90</text>
          <text x="9.018" y="1.67" class="f">Mbps</text>
        </symbol>
        <symbol id="19">
          <text y="1.67" class="f">◝</text>
          <text x="2.004" y="1.67" class="f">137.90</text>
          <text x="9.018" y="1.67" class="f">Mbps</text>
        </symbol>
        <symbol id="20">
          <text y="1.67" class="f">◞</text>
          <text x="2.004" y="1.67" class="f">137.90</text>
          <text x="9.018" y="1.67" class="f">Mbps</text>
        </symbol>
        <symbol id="21">
          <text y="1.67" class="f">◡</text>
          <text x="2.004" y="1.67" class="f">125.57</text>
          <text x="9.018" y="1.67" class="f">Mbps</text>
        </symbol>
        <symbol id="22">
          <text y="1.67" class="f">◟</text>
          <text x="2.004" y="1.67" class="f">125.57</text>
          <text x="9.018" y="1.67" class="f">Mbps</text>
        </symbol>
        <symbol id="23">
          <text y="1.67" class="f">◜</text>
          <text x="2.004" y="1.67" class="f">125.57</text>
          <text x="9.018" y="1.67" class="f">Mbps</text>
        </symbol>
        <symbol id="24">
          <text y="1.67" class="f">◠</text>
          <text x="2.004" y="1.67" class="f">125.57</text>
          <text x="9.018" y="1.67" class="f">Mbps</text>
        </symbol>
        <symbol id="a">
          <path fill="transparent" d="M0 0h25v8H0z" />
        </symbol>
        <symbol id="b">
          <path fill="#44475a" d="M0 0h1.102v2.171H0z" />
        </symbol>
      </defs>
      <path class="a" d="M0 0h25v17.368H0z" />
      <g style="animation-duration:6.369853s;animation-iteration-count:infinite;animation-name:i;animation-timing-function:steps(1,end)">

        <svg width="1600">
          <svg>
            <use xlink:href="#a" />
            <use xlink:href="#b" x="-.004" />
          </svg>
          <svg x="25">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <text y="1.67" class="f">◜</text>
            <text x="2.004" y="1.67" class="f">Starting...</text>
          </svg>
          <svg x="50">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <text y="1.67" class="f">◠</text>
            <text x="2.004" y="1.67" class="f">Starting...</text>
          </svg>
          <svg x="75">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="14.996" />
            <use xlink:href="#1" />
          </svg>
          <svg x="100">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="14.996" />
            <use xlink:href="#2" />
          </svg>
          <svg x="125">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="14.996" />
            <use xlink:href="#3" />
          </svg>
          <svg x="150">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="14.996" />
            <use xlink:href="#4" />
          </svg>
          <svg x="175">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="14.996" />
            <text y="1.67" class="f">◜</text>
            <text x="2.004" y="1.67" class="f">Connecting...</text>
          </svg>
          <svg x="200">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="14.996" />
            <text y="1.67" class="f">◠</text>
            <text x="2.004" y="1.67" class="f">Connecting...</text>
          </svg>
          <svg x="225">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="14.996" />
            <use xlink:href="#1" />
          </svg>
          <svg x="250">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="14.996" />
            <use xlink:href="#2" />
          </svg>
          <svg x="275">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="14.996" />
            <use xlink:href="#3" />
          </svg>
          <svg x="300">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="14.996" />
            <use xlink:href="#4" />
          </svg>
          <svg x="325">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#5" />
          </svg>
          <svg x="350">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#6" />
          </svg>
          <svg x="375">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#7" />
          </svg>
          <svg x="400">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#8" />
          </svg>
          <svg x="425">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <text y="1.67" class="f">◡</text>
            <text x="2.004" y="1.67" class="f">189.44</text>
            <text x="9.018" y="1.67" class="f">Mbps</text>
          </svg>
          <svg x="450">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <text y="1.67" class="f">◟</text>
            <text x="2.004" y="1.67" class="f">189.44</text>
            <text x="9.018" y="1.67" class="f">Mbps</text>
          </svg>
          <svg x="475">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#5" />
          </svg>
          <svg x="500">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#6" />
          </svg>
          <svg x="525">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#7" />
          </svg>
          <svg x="550">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#8" />
          </svg>
          <svg x="575">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#9" />
          </svg>
          <svg x="600">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#10" />
          </svg>
          <svg x="625">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#11" />
          </svg>
          <svg x="650">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#12" />
          </svg>
          <svg x="675">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <text y="1.67" class="f">◝</text>
            <text x="2.004" y="1.67" class="f">204.74</text>
            <text x="9.018" y="1.67" class="f">Mbps</text>
          </svg>
          <svg x="700">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <text y="1.67" class="f">◞</text>
            <text x="2.004" y="1.67" class="f">204.74</text>
            <text x="9.018" y="1.67" class="f">Mbps</text>
          </svg>
          <svg x="725">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#9" />
          </svg>
          <svg x="750">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#10" />
          </svg>
          <svg x="775">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#11" />
          </svg>
          <svg x="800">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#12" />
          </svg>
          <svg x="825">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#13" />
          </svg>
          <svg x="850">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#14" />
          </svg>
          <svg x="875">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#15" />
          </svg>
          <svg x="900">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#16" />
          </svg>
          <svg x="925">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <text y="1.67" class="f">◜</text>
            <text x="2.004" y="1.67" class="f">162.35</text>
            <text x="9.018" y="1.67" class="f">Mbps</text>
          </svg>
          <svg x="950">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <text y="1.67" class="f">◠</text>
            <text x="2.004" y="1.67" class="f">162.35</text>
            <text x="9.018" y="1.67" class="f">Mbps</text>
          </svg>
          <svg x="975">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#13" />
          </svg>
          <svg x="1000">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#14" />
          </svg>
          <svg x="1025">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#15" />
          </svg>
          <svg x="1050">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#16" />
          </svg>
          <svg x="1075">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#17" />
          </svg>
          <svg x="1100">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#18" />
          </svg>
          <svg x="1125">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#19" />
          </svg>
          <svg x="1150">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#20" />
          </svg>
          <svg x="1175">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <text y="1.67" class="f">◡</text>
            <text x="2.004" y="1.67" class="f">137.90</text>
            <text x="9.018" y="1.67" class="f">Mbps</text>
          </svg>
          <svg x="1200">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <text y="1.67" class="f">◟</text>
            <text x="2.004" y="1.67" class="f">137.90</text>
            <text x="9.018" y="1.67" class="f">Mbps</text>
          </svg>
          <svg x="1225">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#17" />
          </svg>
          <svg x="1250">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#18" />
          </svg>
          <svg x="1275">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#19" />
          </svg>
          <svg x="1300">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#20" />
          </svg>
          <svg x="1325">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#21" />
          </svg>
          <svg x="1350">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#22" />
          </svg>
          <svg x="1375">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#23" />
          </svg>
          <svg x="1400">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#24" />
          </svg>
          <svg x="1425">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <text y="1.67" class="f">◝</text>
            <text x="2.004" y="1.67" class="f">125.57</text>
            <text x="9.018" y="1.67" class="f">Mbps</text>
          </svg>
          <svg x="1450">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <text y="1.67" class="f">◞</text>
            <text x="2.004" y="1.67" class="f">125.57</text>
            <text x="9.018" y="1.67" class="f">Mbps</text>
          </svg>
          <svg x="1475">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#21" />
          </svg>
          <svg x="1500">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#22" />
          </svg>
          <svg x="1525">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#23" />
          </svg>
          <svg x="1550">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="12.996" />
            <use xlink:href="#24" />
          </svg>
          <svg x="1575">
            <use xlink:href="#a" />
            <use xlink:href="#b" x="-.004" y="2.146" />
            <text y="1.67" style="white-space:pre" fill="#50fa7b">
            ✓</text>
            <text x="2.004" y="1.67" class="f">104.73</text>
            <text x="9.018" y="1.67" class="f">Mbps</text>
          </svg>
        </svg>
      </g>
    </g>
  </svg>
</svg>