Aurora veil

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/backgrounds/aurora-veil.html
  Desc   : Northern-lights aurora ribbons drifting over a night sky
  ============================================================
-->
<div class="sg-aurora-veil" style="--sg-color:#52E6A7; --sg-size:200px; --sg-duration:14s;">
  <svg viewBox="0 0 600 200" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false">
    <defs>
      <linearGradient id="sg-aurora-veil-sky" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stop-color="#071022" />
        <stop offset="1" stop-color="#161031" />
      </linearGradient>
    </defs>
    <rect class="sg-aurora-veil-bg" x="0" y="0" width="600" height="200" fill="url(#sg-aurora-veil-sky)" />
    <g class="sg-aurora-veil-stars">
      <circle cx="60" cy="38" r="1.1" /><circle cx="170" cy="22" r="0.9" />
      <circle cx="292" cy="46" r="1.2" /><circle cx="405" cy="18" r="0.8" />
      <circle cx="498" cy="52" r="1.1" /><circle cx="552" cy="26" r="0.9" />
    </g>
    <path class="sg-aurora-veil-r1" d="M-20 84 c75 -30 225 30 300 0 c75 -30 225 30 300 0 c75 -30 225 30 300 0" />
    <path class="sg-aurora-veil-r2" d="M-20 112 c90 -22 210 24 300 0 c90 -22 210 24 300 0 c90 -22 210 24 300 0" />
    <path class="sg-aurora-veil-r3" d="M-20 62 c70 -18 230 20 300 0 c70 -18 230 20 300 0 c70 -18 230 20 300 0" />
  </svg>
</div>
<style>
  .sg-aurora-veil {
    width: 100%;
    min-width: 260px;
    height: var(--sg-size);
    overflow: hidden;
    border-radius: 8px;
  }
  .sg-aurora-veil svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .sg-aurora-veil-stars circle {
    fill: #cdd6f4;
    opacity: 0.6;
  }
  .sg-aurora-veil path {
    fill: none;
    stroke-linecap: round;
    mix-blend-mode: screen;
    animation: sg-aurora-veil-drift var(--sg-duration) linear infinite;
  }
  .sg-aurora-veil-r1 {
    stroke: var(--sg-color);
    stroke-width: 38;
    filter: blur(13px);
    opacity: 0.75;
  }
  .sg-aurora-veil-r2 {
    stroke: #7f77dd;
    stroke-width: 30;
    filter: blur(15px);
    opacity: 0.6;
    animation-duration: calc(var(--sg-duration) * 1.6);
  }
  .sg-aurora-veil-r3 {
    stroke: #3ec7de;
    stroke-width: 22;
    filter: blur(11px);
    opacity: 0.5;
    animation-duration: calc(var(--sg-duration) * 2.3);
  }
  @keyframes sg-aurora-veil-drift {
    from { translate: 0 0; }
    to   { translate: -300px 0; }
  }
</style>