img/easeOutQuad.svg

<svg width="160" height="90" xmlns="http://www.w3.org/2000/svg">
  <style>
    .line { stroke-width: 4; stroke-dasharray: 166.35710767804; stroke-dashoffset: 166.35710767804; animation: draw 3s infinite; }
    @keyframes draw {
      to {
        stroke-dashoffset: 0;
      }
    }
    .line { --hue: 0; stroke: hsl(var(--hue), 100%, 50%); }
  </style><rect width="100%" height="100%" fill="#000"/><line x1="8" y1="82" x2="9.44" y2="80.5274" class="line" style="--hue:1.1999999999996"/><line x1="9.44" y1="80.5274" x2="10.88" y2="79.0696" class="line" style="--hue:3.5999999999994"/><line x1="10.88" y1="79.0696" x2="12.32" y2="77.6266" class="line" style="--hue:6.0000000000004"/><line x1="12.32" y1="77.6266" x2="13.76" y2="76.1984" class="line" style="--hue:8.4000000000003"/><line x1="13.76" y1="76.1984" x2="15.2" y2="74.785" class="line" style="--hue:10.8"/><line x1="15.2" y1="74.785" x2="16.64" y2="73.3864" class="line" style="--hue:13.2"/><line x1="16.64" y1="73.3864" x2="18.08" y2="72.0026" class="line" style="--hue:15.6"/><line x1="18.08" y1="72.0026" x2="19.52" y2="70.6336" class="line" style="--hue:18.000000000002"/><line x1="19.52" y1="70.6336" x2="20.96" y2="69.2794" class="line" style="--hue:20.4"/><line x1="20.96" y1="69.2794" x2="22.4" y2="67.94" class="line" style="--hue:22.8"/><line x1="22.4" y1="67.94" x2="23.84" y2="66.6154" class="line" style="--hue:25.2"/><line x1="23.84" y1="66.6154" x2="25.28" y2="65.3056" class="line" style="--hue:27.599999999999"/><line x1="25.28" y1="65.3056" x2="26.72" y2="64.0106" class="line" style="--hue:30.000000000001"/><line x1="26.72" y1="64.0106" x2="28.16" y2="62.7304" class="line" style="--hue:32.399999999999"/><line x1="28.16" y1="62.7304" x2="29.6" y2="61.465" class="line" style="--hue:34.8"/><line x1="29.6" y1="61.465" x2="31.04" y2="60.2144" class="line" style="--hue:37.2"/><line x1="31.04" y1="60.2144" x2="32.48" y2="58.9786" class="line" style="--hue:39.600000000001"/><line x1="32.48" y1="58.9786" x2="33.92" y2="57.7576" class="line" style="--hue:42.000000000001"/><line x1="33.92" y1="57.7576" x2="35.36" y2="56.5514" class="line" style="--hue:44.4"/><line x1="35.36" y1="56.5514" x2="36.8" y2="55.36" class="line" style="--hue:46.8"/><line x1="36.8" y1="55.36" x2="38.24" y2="54.1834" class="line" style="--hue:49.199999999999"/><line x1="38.24" y1="54.1834" x2="39.68" y2="53.0216" class="line" style="--hue:51.6"/><line x1="39.68" y1="53.0216" x2="41.12" y2="51.8746" class="line" style="--hue:53.999999999999"/><line x1="41.12" y1="51.8746" x2="42.56" y2="50.7424" class="line" style="--hue:56.4"/><line x1="42.56" y1="50.7424" x2="44" y2="49.625" class="line" style="--hue:58.8"/><line x1="44" y1="49.625" x2="45.44" y2="48.5224" class="line" style="--hue:61.2"/><line x1="45.44" y1="48.5224" x2="46.88" y2="47.4346" class="line" style="--hue:63.6"/><line x1="46.88" y1="47.4346" x2="48.32" y2="46.3616" class="line" style="--hue:66.000000000001"/><line x1="48.32" y1="46.3616" x2="49.76" y2="45.3034" class="line" style="--hue:68.399999999999"/><line x1="49.76" y1="45.3034" x2="51.2" y2="44.26" class="line" style="--hue:70.8"/><line x1="51.2" y1="44.26" x2="52.64" y2="43.2314" class="line" style="--hue:73.2"/><line x1="52.64" y1="43.2314" x2="54.08" y2="42.2176" class="line" style="--hue:75.6"/><line x1="54.08" y1="42.2176" x2="55.52" y2="41.2186" class="line" style="--hue:77.999999999999"/><line x1="55.52" y1="41.2186" x2="56.96" y2="40.2344" class="line" style="--hue:80.4"/><line x1="56.96" y1="40.2344" x2="58.4" y2="39.265" class="line" style="--hue:82.800000000002"/><line x1="58.4" y1="39.265" x2="59.84" y2="38.3104" class="line" style="--hue:85.199999999999"/><line x1="59.84" y1="38.3104" x2="61.28" y2="37.3706" class="line" style="--hue:87.600000000001"/><line x1="61.28" y1="37.3706" x2="62.72" y2="36.4456" class="line" style="--hue:90.000000000001"/><line x1="62.72" y1="36.4456" x2="64.16" y2="35.5354" class="line" style="--hue:92.399999999999"/><line x1="64.16" y1="35.5354" x2="65.6" y2="34.64" class="line" style="--hue:94.8"/><line x1="65.6" y1="34.64" x2="67.04" y2="33.7594" class="line" style="--hue:97.2"/><line x1="67.04" y1="33.7594" x2="68.48" y2="32.8936" class="line" style="--hue:99.6"/><line x1="68.48" y1="32.8936" x2="69.92" y2="32.0426" class="line" style="--hue:102"/><line x1="69.92" y1="32.0426" x2="71.36" y2="31.2064" class="line" style="--hue:104.4"/><line x1="71.36" y1="31.2064" x2="72.8" y2="30.385" class="line" style="--hue:106.8"/><line x1="72.8" y1="30.385" x2="74.24" y2="29.5784" class="line" style="--hue:109.2"/><line x1="74.24" y1="29.5784" x2="75.68" y2="28.7866" class="line" style="--hue:111.6"/><line x1="75.68" y1="28.7866" x2="77.12" y2="28.0096" class="line" style="--hue:114"/><line x1="77.12" y1="28.0096" x2="78.56" y2="27.2474" class="line" style="--hue:116.4"/><line x1="78.56" y1="27.2474" x2="80" y2="26.5" class="line" style="--hue:118.8"/><line x1="80" y1="26.5" x2="81.44" y2="25.7674" class="line" style="--hue:121.2"/><line x1="81.44" y1="25.7674" x2="82.88" y2="25.0496" class="line" style="--hue:123.6"/><line x1="82.88" y1="25.0496" x2="84.32" y2="24.3466" class="line" style="--hue:126"/><line x1="84.32" y1="24.3466" x2="85.76" y2="23.6584" class="line" style="--hue:128.4"/><line x1="85.76" y1="23.6584" x2="87.2" y2="22.985" class="line" style="--hue:130.8"/><line x1="87.2" y1="22.985" x2="88.64" y2="22.3264" class="line" style="--hue:133.2"/><line x1="88.64" y1="22.3264" x2="90.08" y2="21.6826" class="line" style="--hue:135.6"/><line x1="90.08" y1="21.6826" x2="91.52" y2="21.0536" class="line" style="--hue:138"/><line x1="91.52" y1="21.0536" x2="92.96" y2="20.4394" class="line" style="--hue:140.4"/><line x1="92.96" y1="20.4394" x2="94.4" y2="19.84" class="line" style="--hue:142.8"/><line x1="94.4" y1="19.84" x2="95.84" y2="19.2554" class="line" style="--hue:145.2"/><line x1="95.84" y1="19.2554" x2="97.28" y2="18.6856" class="line" style="--hue:147.6"/><line x1="97.28" y1="18.6856" x2="98.72" y2="18.1306" class="line" style="--hue:150"/><line x1="98.72" y1="18.1306" x2="100.16" y2="17.5904" class="line" style="--hue:152.4"/><line x1="100.16" y1="17.5904" x2="101.6" y2="17.065" class="line" style="--hue:154.8"/><line x1="101.6" y1="17.065" x2="103.04" y2="16.5544" class="line" style="--hue:157.2"/><line x1="103.04" y1="16.5544" x2="104.48" y2="16.0586" class="line" style="--hue:159.6"/><line x1="104.48" y1="16.0586" x2="105.92" y2="15.5776" class="line" style="--hue:162"/><line x1="105.92" y1="15.5776" x2="107.36" y2="15.1114" class="line" style="--hue:164.4"/><line x1="107.36" y1="15.1114" x2="108.8" y2="14.66" class="line" style="--hue:166.8"/><line x1="108.8" y1="14.66" x2="110.24" y2="14.2234" class="line" style="--hue:169.2"/><line x1="110.24" y1="14.2234" x2="111.68" y2="13.8016" class="line" style="--hue:171.6"/><line x1="111.68" y1="13.8016" x2="113.12" y2="13.3946" class="line" style="--hue:174"/><line x1="113.12" y1="13.3946" x2="114.56" y2="13.0024" class="line" style="--hue:176.4"/><line x1="114.56" y1="13.0024" x2="116" y2="12.625" class="line" style="--hue:178.8"/><line x1="116" y1="12.625" x2="117.44" y2="12.2624" class="line" style="--hue:181.2"/><line x1="117.44" y1="12.2624" x2="118.88" y2="11.9146" class="line" style="--hue:183.6"/><line x1="118.88" y1="11.9146" x2="120.32" y2="11.5816" class="line" style="--hue:186"/><line x1="120.32" y1="11.5816" x2="121.76" y2="11.2634" class="line" style="--hue:188.4"/><line x1="121.76" y1="11.2634" x2="123.2" y2="10.96" class="line" style="--hue:190.8"/><line x1="123.2" y1="10.96" x2="124.64" y2="10.6714" class="line" style="--hue:193.2"/><line x1="124.64" y1="10.6714" x2="126.08" y2="10.3976" class="line" style="--hue:195.6"/><line x1="126.08" y1="10.3976" x2="127.52" y2="10.1386" class="line" style="--hue:198"/><line x1="127.52" y1="10.1386" x2="128.96" y2="9.8944" class="line" style="--hue:200.4"/><line x1="128.96" y1="9.8944" x2="130.4" y2="9.665" class="line" style="--hue:202.8"/><line x1="130.4" y1="9.665" x2="131.84" y2="9.4504" class="line" style="--hue:205.2"/><line x1="131.84" y1="9.4504" x2="133.28" y2="9.2506" class="line" style="--hue:207.6"/><line x1="133.28" y1="9.2506" x2="134.72" y2="9.0656" class="line" style="--hue:210"/><line x1="134.72" y1="9.0656" x2="136.16" y2="8.8954" class="line" style="--hue:212.4"/><line x1="136.16" y1="8.8954" x2="137.6" y2="8.74" class="line" style="--hue:214.8"/><line x1="137.6" y1="8.74" x2="139.04" y2="8.5994" class="line" style="--hue:217.2"/><line x1="139.04" y1="8.5994" x2="140.48" y2="8.4736" class="line" style="--hue:219.6"/><line x1="140.48" y1="8.4736" x2="141.92" y2="8.3626" class="line" style="--hue:222"/><line x1="141.92" y1="8.3626" x2="143.36" y2="8.2664" class="line" style="--hue:224.4"/><line x1="143.36" y1="8.2664" x2="144.8" y2="8.185" class="line" style="--hue:226.8"/><line x1="144.8" y1="8.185" x2="146.24" y2="8.1184" class="line" style="--hue:229.2"/><line x1="146.24" y1="8.1184" x2="147.68" y2="8.0666" class="line" style="--hue:231.6"/><line x1="147.68" y1="8.0666" x2="149.12" y2="8.0296" class="line" style="--hue:234"/><line x1="149.12" y1="8.0296" x2="150.56" y2="8.0074" class="line" style="--hue:236.4"/><line x1="150.56" y1="8.0074" x2="152" y2="8" class="line" style="--hue:238.8"/></svg>