<style>
  css-doodle {
    --rule: (
      :doodle {
        @grid: 80x1 / 100vw 100vh; 
        @min-size: 100px;
        filter: url(#filter); 
        will-change: transform;
        animation: r 23s linear infinite;
      }
    
      @size: 100% 50%;
      position: absolute;
      top: 25%;
      transform: rotate(@r(360deg));
      perspective: 130px; 
    
      :after {
        content: '';
        position: absolute;
        @size: @r(10px);
        will-change: transform;
        animation: cycle @r(2s, 8s) linear infinite;
        animation-delay: -@r(100s);
        background: #fff8;
        box-shadow: @m3(0 0 calc(.5vmin + 5px) #fff);
        --trans: scaleX(@r(.1, 5)) translateZ(105px);
        transform: rotateY(0) @var(--trans);
      }
      @keyframes cycle {
        to {
          transform: rotateY(@p(-1turn, 1turn)) @var(--trans);
        }
      }
      @keyframes r {
        to { transform: rotate(@p(-1turn, 1turn)) }
      }
    ) 
  }
</style>

<css-doodle click-to-update></css-doodle>

<svg style="width: 0; height:0">
  <filter id="filter">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
    <feBlend in="SourceGraphic" in2="goo" />
  </filter>
</svg>

html, body { 
  width: 100%;
  height: 100%; 
  margin: 0;
  display: flex; 
  align-items: center; 
  justify-content: center;
  background: radial-gradient(#459dc1, #070729);
  overflow: hidden;
}

// https://css-doodle.com

let isChrome = navigator.userAgent.toLowerCase().match(/chrome/);
let doodle = document.querySelector('css-doodle');
if (doodle && isChrome) {
  doodle.use = 'var(--rule)';
}