<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Beautiful loading screen</title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="/static/start/styles.css" />
</head>

<body>
  <!--[if lt IE 7]>
      <p class="browsehappy">
        You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to
        improve your experience.
      </p>
    <![endif]-->

  <div class="stacked">
    <div id="loading">
      <svg height="100%" width="100%" viewBox="-250 -250 250 250">
        <defs>
          <filter id="blur" x="-30%" y="-30%" width="160%" height="160%">
            <feDropShadow dx="10" dy="10" stdDeviation="2">
              <animate attributeName="stdDeviation" values="2 0; 0 2; 2 0; 0 2; 2 0; " dur="10s" repeatCount="indefinite" fill="freeze" />
              <animate attributeName="dx" values="0;5;0;-5;0" dur="10s" repeatCount="indefinite" fill="freeze" />
              <animate attributeName="dy" values="5;0;-5;0;5" dur="10s" repeatCount="indefinite" fill="freeze" />
            </feDropShadow>
          </filter>
          <!-- <path
            d="M 400.372 49.999 C 323.997 50.539 274.407 85.548 275.005 181.908 C 275.603 278.243 353.793 299.809 402.037 299.991 C 450.181 300.17 524.341 279.245 524.992 183.114 C 525.663 84.284 481.094 49.427 400.372 49.999 Z"
            id="circlepath3"></path> -->
          <path d="M 0 0 A 50 50 0 0 1 -50 50 A 50 50 0 0 1 -100 0 A 50 50 0 0 1 -50 -50 A 50 50 0 0 1 0 0 Z"
            id="circlepath4"></path>

          <filter id="loading-shader" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"
            primitiveUnits="userSpaceOnUse" width="300%" height="200%" x="-500" y="-500" > <!-- width="200vw" height="200vh" x="-50vw" y="-50vh" -->
            <feSpecularLighting id="specLighting" result="specOut" specularExponent="500" specularConstant="0.5"
              lighting-color="#bb99bb">
              <fePointLight id="point-light" x="0" y="75" z="1000" />
            </feSpecularLighting>
            <animate xlink:href="#point-light" id="anim-dialiate" attributeName="x" values="-10; 810; -10" dur="10s"
              repeatCount="indefinite" />
            <animate xlink:href="#point-light" id="anim-dialiate" attributeName="y" values="50; 350; 50" dur="12s"
              repeatCount="indefinite" />
            <animate xlink:href="#specLighting" attributeName="specularExponent" values="500;100;500" dur="10s"
              repeatCount="indefinite" />
            <animate xlink:href="#specLighting" attributeName="lighting-color" values="#bb99bb; red; black; #bb99bb"
              dur="18s" repeatCount="indefinite" />
            <animate xlink:href="#specLighting" attributeName="specularConstant" values="0.5;0.1;0.5" dur="10s"
              repeatCount="indefinite" fill="freeze" />
            <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
          </filter>
        </defs>
        <g id="shadedgroup" width="100%" height="100%">
          <rect id="stage" width="300%" height="300%" x="-500" y="-500">
            <animate attributeName="fill" values="grey; light-grey; light-blue; pink; grey" begin="3s" dur="10s"
              repeatCount="indefinite" />
          </rect>
          <g width="100%" height="100%" transform="translate(-70, -125)">

            <!-- <animateMotion dur="40s" repeatCount="indefinite">
              <mpath xlink:href="#circlepath3" />
            </animateMotion> -->
            <!-- <animateTransform attributeName="transform" type="scale" values="0.8 0.8; 1 1; 0.9 0.9; 0.8 0.8;" dur="10s"
              repeatCount="indefinite" /> -->
            <!-- <animateTransform attributeName="transform" type="translate" values="-50 50%; 45% 50%; 55% 50%; 120% 50%;"
              dur="10s" keyTimes="0; 0.2; 0.8; 1" keySplines="0.1 0.8 0.2 1; 0.5 0 0.5 1; 0.5 0 0 1" calcMode="spline"
              repeatCount="indefinite" /> -->
            <!-- <animateTransform
      attributeName="transform"
      type="skewX"
      
      values="0; 5; 10; 15; 15; 10; 5; 0; -5; -10; -15; -15; -10; -5; 0;"
      dur="15s"
      repeatCount="indefinite" /> -->
            <circle class="loadingCircle" r="20">
              <animateMotion dur="5.6s" repeatCount="indefinite" begin="0">
                <mpath xlink:href="#circlepath4" />
              </animateMotion>
              <animate attributeName="fill" values="red; orange; yellow; green; blue; indigo; violet; red;" begin="1.5s"
                dur="10s" repeatCount="indefinite" />
              <animate attributeName="r" values="16;20;20;16" dur="5s" repeatCount="indefinite" />
            </circle>
            <circle class="loadingCircle" r="20">
              <animateMotion dur="5.6s" begin="0.8s" repeatCount="indefinite">
                <mpath xlink:href="#circlepath4" />
              </animateMotion>
              <animate attributeName="r" values="16;20;20;16" dur="5s" repeatCount="indefinite" />
              <animate attributeName="fill" values="red; orange; yellow; green; blue; indigo; violet; red;" begin="1.2s"
                dur="10s" repeatCount="indefinite" />
            </circle>
            <circle class="loadingCircle" r="20">
              <animateMotion dur="5.6s" begin="1.6s" repeatCount="indefinite">
                <mpath xlink:href="#circlepath4" />
              </animateMotion>
              <animate attributeName="r" values="16;20;20;16" dur="5s" repeatCount="indefinite" />
              <animate attributeName="fill" values="red; orange; yellow; green; blue; indigo; violet; red;" begin="0.9s"
                dur="10s" repeatCount="indefinite" />
            </circle>
            <circle class="loadingCircle" r="20">
              <animateMotion dur="5.6s" begin="2.4s" repeatCount="indefinite">
                <mpath xlink:href="#circlepath4" />
              </animateMotion>
              <animate attributeName="r" values="16;20;20;16" dur="5s" repeatCount="indefinite" />
              <animate attributeName="fill" values="red; orange; yellow; green; blue; indigo; violet; red;" begin="0.6s"
                dur="10s" repeatCount="indefinite" />
            </circle>
            <circle class="loadingCircle" r="20">
              <animateMotion id="circle4motion" dur="5.6s" begin="3.2s" fill="freeze" repeatCount="indefinite">
                <mpath xlink:href="#circlepath4" />
              </animateMotion>
              <animate attributeName="r" values="16;20;20;16" dur="5s" repeatCount="indefinite" />
              <animate attributeName="fill" values="red; orange; yellow; green; blue; indigo; violet; red;" begin="0.3s"
                dur="10s" repeatCount="indefinite" />
            </circle>
            <circle class="loadingCircle" r="20">
              <animateMotion id="circle4motion" dur="5.6s" begin="4.0s" fill="freeze" repeatCount="indefinite">
                <mpath xlink:href="#circlepath4" />
              </animateMotion>
              <animate attributeName="r" values="16;20;20;16" dur="5s" repeatCount="indefinite" />
              <animate attributeName="fill" values="red; orange; yellow; green; blue; indigo; violet; red;" begin="0s"
                dur="10s" repeatCount="indefinite" />
            </circle>
            <circle class="loadingCircle" r="20">
              <animateMotion id="circle4motion" dur="5.6s" begin="4.8s" fill="freeze" repeatCount="indefinite">
                <mpath xlink:href="#circlepath4" />
              </animateMotion>
              <animate attributeName="r" values="16;20;20;16" dur="5s" repeatCount="indefinite" />
              <animate attributeName="fill" values="red; orange; yellow; green; blue; indigo; violet; red;"
                begin="-0.2s" dur="10s" repeatCount="indefinite" />
            </circle>
          </g>
        </g>

      </svg>
    </div>

  </div>
  <script src="" async defer></script>
</body>

</html>