banner.svg

<svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 880 192"
      width="880"
      height="192">
      <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml" style="height: 192px">
          <style>
      .space {
        height: 100%;
      }
      @media (prefers-color-scheme: dark) {
        .space {
          background: #22272e;
        }
      }

      .rocket {
        position: absolute;
        top: 96px;
        left: 440px;
        translate: -50% -50%;
        rotate: -45deg;
        font-size: 1.6rem;
      }
      .rocket::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        left: -5px;
        bottom: 0px;
        width: 20px;
        height: 20px;
        background: #feb00b;
        transform: skew(-30deg, -30deg);
        animation: 4s linear infinite glow;
      }
      @keyframes glow {
        0% { opacity: 0.5; transform: skew(-30deg, -30deg); }
        20% { opacity: 0.4; transform: skew(-28deg, -28deg); }
        40% { opacity: 0.5; transform: skew(-32deg, -32deg); }
        60% { opacity: 0.6; transform: skew(-30deg, -30deg); }
        100% { opacity: 0.5; transform: skew(-32deg, -32deg); }
      }

      .halve {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        color: #22272e;
        transform: translateZ(0);
      }
      @media (prefers-color-scheme: dark) {
        .halve {
          color: #adbac7;
        }
      }
      .halve:nth-child(1) {
        animation: 3s linear infinite both slide-1;
      }
      @keyframes slide-1 {
        49.99% {
          translate: 0 100%;
        }
        50% {
          translate: 0 -100%;
        }
      }
      .halve:nth-child(2) {
        animation: 3s linear infinite both slide-2;
      }
      @keyframes slide-2 {
        to {
          translate: 0 200%;
        }
      }

      .star {
        position: absolute;
      }
    </style>
          <div class="space">
            <div class="halve" style="top: 0px"><span class="star" style="top: 91px; left: 136px;">☆</span><span class="star" style="top: 5px; left: 595px;">.</span><span class="star" style="top: 41px; left: 373px;">○</span><span class="star" style="top: 155px; left: 186px;">☾</span><span class="star" style="top: 89px; left: 697px;">.</span><span class="star" style="top: 48px; left: 759px;">•</span><span class="star" style="top: 32px; left: 845px;">°</span><span class="star" style="top: 132px; left: 865px;">○</span><span class="star" style="top: 80px; left: 291px;">○</span><span class="star" style="top: 169px; left: 459px;">¸</span><span class="star" style="top: 34px; left: 283px;">°</span><span class="star" style="top: 189px; left: 258px;">☆</span><span class="star" style="top: 39px; left: 236px;">•</span><span class="star" style="top: 175px; left: 601px;">°</span><span class="star" style="top: 63px; left: 213px;">☾</span><span class="star" style="top: 18px; left: 833px;">•</span><span class="star" style="top: 98px; left: 391px;">○</span><span class="star" style="top: 40px; left: 536px;">☾</span><span class="star" style="top: 84px; left: 27px;">°</span><span class="star" style="top: 123px; left: 122px;">☾</span><span class="star" style="top: 146px; left: 236px;">★</span><span class="star" style="top: 76px; left: 494px;">★</span><span class="star" style="top: 78px; left: 456px;">☾</span><span class="star" style="top: 36px; left: 79px;">○</span><span class="star" style="top: 164px; left: 419px;">•</span><span class="star" style="top: 157px; left: 587px;">¸</span><span class="star" style="top: 4px; left: 65px;">.</span><span class="star" style="top: 30px; left: 600px;">○</span><span class="star" style="top: 175px; left: 24px;">○</span><span class="star" style="top: 21px; left: 706px;">•</span><span class="star" style="top: 170px; left: 173px;">☆</span><span class="star" style="top: 181px; left: 650px;">☆</span><span class="star" style="top: 96px; left: 559px;">°</span><span class="star" style="top: 125px; left: 809px;">☾</span><span class="star" style="top: 145px; left: 878px;">★</span><span class="star" style="top: 69px; left: 15px;">☾</span><span class="star" style="top: 188px; left: 176px;">•</span><span class="star" style="top: 96px; left: 111px;">★</span><span class="star" style="top: 109px; left: 1px;">°</span><span class="star" style="top: 37px; left: 415px;">.</span><span class="star" style="top: 177px; left: 782px;">☾</span><span class="star" style="top: 137px; left: 513px;">☾</span><span class="star" style="top: 187px; left: 635px;">○</span><span class="star" style="top: 108px; left: 655px;">☾</span><span class="star" style="top: 73px; left: 679px;">○</span><span class="star" style="top: 150px; left: 15px;">¸</span><span class="star" style="top: 41px; left: 628px;">☾</span><span class="star" style="top: 26px; left: 297px;">★</span><span class="star" style="top: 117px; left: 93px;">☆</span><span class="star" style="top: 27px; left: 146px;">☾</span></div><div class="halve" style="top: -192px"><span class="star" style="top: 88px; left: 188px;">☆</span><span class="star" style="top: 73px; left: 723px;">•</span><span class="star" style="top: 142px; left: 258px;">¸</span><span class="star" style="top: 155px; left: 131px;">☾</span><span class="star" style="top: 122px; left: 718px;">★</span><span class="star" style="top: 92px; left: 82px;">•</span><span class="star" style="top: 42px; left: 227px;">.</span><span class="star" style="top: 144px; left: 345px;">☾</span><span class="star" style="top: 5px; left: 285px;">•</span><span class="star" style="top: 161px; left: 227px;">.</span><span class="star" style="top: 48px; left: 348px;">•</span><span class="star" style="top: 13px; left: 67px;">•</span><span class="star" style="top: 35px; left: 59px;">☆</span><span class="star" style="top: 111px; left: 325px;">★</span><span class="star" style="top: 76px; left: 43px;">☾</span><span class="star" style="top: 25px; left: 440px;">°</span><span class="star" style="top: 30px; left: 10px;">.</span><span class="star" style="top: 149px; left: 163px;">☾</span><span class="star" style="top: 74px; left: 788px;">.</span><span class="star" style="top: 24px; left: 383px;">•</span><span class="star" style="top: 155px; left: 14px;">○</span><span class="star" style="top: 112px; left: 273px;">°</span><span class="star" style="top: 32px; left: 832px;">¸</span><span class="star" style="top: 107px; left: 259px;">○</span><span class="star" style="top: 73px; left: 237px;">•</span><span class="star" style="top: 156px; left: 440px;">.</span><span class="star" style="top: 146px; left: 36px;">¸</span><span class="star" style="top: 53px; left: 234px;">.</span><span class="star" style="top: 130px; left: 875px;">☾</span><span class="star" style="top: 97px; left: 853px;">•</span><span class="star" style="top: 79px; left: 491px;">¸</span><span class="star" style="top: 177px; left: 108px;">★</span><span class="star" style="top: 94px; left: 29px;">•</span><span class="star" style="top: 115px; left: 866px;">°</span><span class="star" style="top: 91px; left: 674px;">☆</span><span class="star" style="top: 92px; left: 693px;">★</span><span class="star" style="top: 140px; left: 688px;">★</span><span class="star" style="top: 175px; left: 340px;">.</span><span class="star" style="top: 93px; left: 484px;">•</span><span class="star" style="top: 48px; left: 43px;">.</span><span class="star" style="top: 15px; left: 262px;">°</span><span class="star" style="top: 186px; left: 690px;">.</span><span class="star" style="top: 12px; left: 783px;">°</span><span class="star" style="top: 187px; left: 775px;">☆</span><span class="star" style="top: 137px; left: 636px;">☾</span><span class="star" style="top: 3px; left: 438px;">•</span><span class="star" style="top: 125px; left: 367px;">☾</span><span class="star" style="top: 171px; left: 577px;">•</span><span class="star" style="top: 156px; left: 491px;">☾</span><span class="star" style="top: 149px; left: 188px;">•</span></div>
            <div class="rocket">🚀</div>
          </div>
        </div>
      </foreignObject>
    </svg>