Space GroupA P’Getty

✨ KAIWIN NAW-IN

<head>
  <style>
    /* code reference 1 Space: https://codepen.io/jensaxena/pen/KQmvoK
    	code reference 2 star fall: https://codepen.io/alphardex/pen/RwrVoeL?editors=0110 */
    :root{
		--shadow: 10px 10px white;
    }
    body{
    background: radial-gradient( #1B2735 0%, #090A0F 100%);
	 overflow: hidden;
    }
    .space{
    	background: hsla(0, 80%, 10%, 0) center / 200px 200px round;
      right:0;
      bottom:0;
      left:0;
      top:0;
      position: absolute;
    }
    .stars {
      animation: moving-star var(--delay) steps(1000, end) infinite;
      transform: preserve-3d;
      background-image:
        radial-gradient(
          1px 1px at 25px 5px, #d32f2f,  hsla(0, 0%, 0%, 0)
        ),
        radial-gradient(
          1px 1px at 50px 25px, #6a1b9a, hsla(240, 0%, 0%, 0)
        ),
        radial-gradient(
          1px 1px at 125px 20px, #303f9f, hsla(0, 0%, 0%, 0)
        ),
        radial-gradient(
          1.5px 1.5px at 50px 75px, #2e7d32, hsla(0, 0%, 0%, 0)
        ),
        radial-gradient(
          2px 2px at 15px 125px, white, hsla(0, 0%, 0%, 0)
        ),
        radial-gradient(
          2.5px 2.5px at 110px 80px, #1e88e5, hsla(0, 0%, 0%, 0)
        );
    }
     .yellow {
	 color: #ffeb3b;
    }
     .green {
        color: #2e7d32;
    }
     .purple {
        color: #6a1b9a;
    }
     .orange {
        color: #f4511e;
    }
     .red {
        color: #d32f2f;
    }
     .sky {
        color: #1e88e5;
    }
     .blue {
        color: #303f9f;
    }
     .star-fall {
        position: absolute;
        top: -100px;
        left: -100px;
        width: 100%;
        height: 120%;
        transform: rotate(-135deg);
    }
     .star {
        --star-tail-height: 3px;
        --star-width: 40px;
        --tail-fade-duration: var(--fall-duration);
        position: absolute;
        top: var(--top-offset);
        left: 0;
        width: var(--star-tail-length);
        height: var(--star-tail-height);
        background: linear-gradient(45deg, currentColor, transparent);
        border-radius: 50%;
        filter: drop-shadow(0 0 6px currentColor);
        transform: translate3d(104em, 0, 0);
        animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
    }
            .star:nth-child(1) {
              --star-tail-length: 8.2em;
              --top-offset: 56.7vh;
              --fall-duration: 6.4s;
              --fall-delay: 8.7s;
      }
       .star:nth-child(2) {
              --star-tail-length: 7.7em;
              --top-offset: -3.8vh;
              --fall-duration: 10.9s;
              --fall-delay: 1.2s;
      }
       .star:nth-child(3) {
              --star-tail-length: 3.2em;
              --top-offset: 62.4vh;
              --fall-duration: 13.1s;
              --fall-delay: 8.3s;
      }
       .star:nth-child(4) {
              --star-tail-length: 4.4em;
              --top-offset: -7.3vh;
              --fall-duration: 10.0s;
              --fall-delay: 2.6s;
      }
       .star:nth-child(5) {
              --star-tail-length: 8.5em;
              --top-offset: -16.0vh;
              --fall-duration: 11.2s;
              --fall-delay: 1.7s;
      }
       .star:nth-child(6) {
              --star-tail-length: 9.2em;
              --top-offset: 46.4vh;
              --fall-duration: 13.9s;
              --fall-delay: 13.9s;
      }
       .star:nth-child(7) {
              --star-tail-length: 3.2em;
              --top-offset: 96.5vh;
              --fall-duration: 8.0s;
              --fall-delay: 5.7s;
      }
       .star:nth-child(8) {
              --star-tail-length: 4.9em;
              --top-offset: 28.9vh;
              --fall-duration: 5.7s;
              --fall-delay: 13.1s;
      }
       .star:nth-child(9) {
              --star-tail-length: 3.7em;
              --top-offset: -18.5vh;
              --fall-duration: 8.6s;
              --fall-delay: 12.5s;
      }
       .star:nth-child(10) {
              --star-tail-length: 8.1em;
              --top-offset: 78.1vh;
              --fall-duration: 8.9s;
              --fall-delay: 7.8s;
      }
       .star:nth-child(11) {
              --star-tail-length: 6.3em;
              --top-offset: 35.3vh;
              --fall-duration: 7.5s;
              --fall-delay: 8.7s;
      }
       .star:nth-child(12) {
              --star-tail-length: 7.5em;
              --top-offset: -3.7vh;
              --fall-duration: 13.5s;
              --fall-delay: 12.9s;
      }
       .star:nth-child(13) {
              --star-tail-length: 5.8em;
              --top-offset: -20.8vh;
              --fall-duration: 13.1s;
              --fall-delay: 8.2s;
      }
       .star:nth-child(14) {
              --star-tail-length: 9.7em;
              --top-offset: -68.5vh;
              --fall-duration: 8.3s;
              --fall-delay: 13.6s;
      }
       .star:nth-child(15) {
              --star-tail-length: 7.7em;
              --top-offset: -84.1vh;
              --fall-duration: 10.4s;
              --fall-delay: 6.1s;
      }
       .star:nth-child(16) {
              --star-tail-length: 9.3em;
              --top-offset: 66.2vh;
              --fall-duration: 9.9s;
              --fall-delay: 0.2s;
      }
       .star:nth-child(17) {
              --star-tail-length: 6.0em;
              --top-offset: -28.4vh;
              --fall-duration: 8.1s;
              --fall-delay: 3.7s;
      }
       .star:nth-child(18) {
              --star-tail-length: 8.8em;
              --top-offset: 70.6vh;
              --fall-duration: 9.5s;
              --fall-delay: 3.4s;
      }
       .star:nth-child(19) {
              --star-tail-length: 9.8em;
              --top-offset: 19.6vh;
              --fall-duration: 5.2s;
              --fall-delay: 0.3s;
      }
       .star:nth-child(20) {
              --star-tail-length: 8.1em;
              --top-offset: -12.0vh;
              --fall-duration: 9.8s;
              --fall-delay: 5.8s;
      }
       .star:nth-child(21) {
              --star-tail-length: 8.1em;
              --top-offset: 13.5vh;
              --fall-duration: 11.5s;
              --fall-delay: 11.1s;
      }
       .star:nth-child(22) {
              --star-tail-length: 4.5em;
              --top-offset: -56.5vh;
              --fall-duration: 12.9s;
              --fall-delay: 3.3s;
      }
       .star:nth-child(23) {
              --star-tail-length: 6.8em;
              --top-offset: -75.7vh;
              --fall-duration: 10.5s;
              --fall-delay: 12.9s;
      }
       .star:nth-child(24) {
              --star-tail-length: 3.4em;
              --top-offset: 27.0vh;
              --fall-duration: 12.5s;
              --fall-delay: 10.4s;
      }
       .star:nth-child(25) {
              --star-tail-length: 6.6em;
              --top-offset: 28.6vh;
              --fall-duration: 7.0s;
              --fall-delay: 13.3s;
      }
       .star:nth-child(26) {
              --star-tail-length: 7.8em;
              --top-offset: 64.6vh;
              --fall-duration: 10.9s;
              --fall-delay: 12.7s;
      }
       .star:nth-child(27) {
              --star-tail-length: 4.0em;
              --top-offset: 43.7vh;
              --fall-duration: 11.6s;
              --fall-delay: 10.3s;
      }
       .star:nth-child(28) {
              --star-tail-length: 6.0em;
              --top-offset: -43.0vh;
              --fall-duration: 8.9s;
              --fall-delay: 4.5s;
      }
       .star:nth-child(29) {
              --star-tail-length: 8.7em;
              --top-offset: -22.5vh;
              --fall-duration: 5.0s;
              --fall-delay: 10.5s;
      }
       .star:nth-child(30) {
              --star-tail-length: 8.9em;
              --top-offset: -22.7vh;
              --fall-duration: 12.5s;
              --fall-delay: 11.7s;
      }
       .star:nth-child(31) {
              --star-tail-length: 6.1em;
              --top-offset: -99.0vh;
              --fall-duration: 10.1s;
              --fall-delay: 13.2s;
      }
       .star:nth-child(32) {
              --star-tail-length: 4.7em;
              --top-offset: -38.1vh;
              --fall-duration: 12.1s;
              --fall-delay: 2.9s;
      }
       .star:nth-child(33) {
              --star-tail-length: 7.8em;
              --top-offset: -13.4vh;
              --fall-duration: 5.1s;
              --fall-delay: 5.8s;
      }
       .star:nth-child(34) {
              --star-tail-length: 5.3em;
              --top-offset: 29.4vh;
              --fall-duration: 5.3s;
              --fall-delay: 13.0s;
      }
       .star:nth-child(35) {
              --star-tail-length: 6.4em;
              --top-offset: -56.5vh;
              --fall-duration: 8.5s;
              --fall-delay: 14.7s;
      }
       .star:nth-child(36) {
              --star-tail-length: 8.1em;
              --top-offset: -55.9vh;
              --fall-duration: 10.8s;
              --fall-delay: 0.9s;
      }
       .star:nth-child(37) {
              --star-tail-length: 9.2em;
              --top-offset: 75.5vh;
              --fall-duration: 8.9s;
              --fall-delay: 14.0s;
      }
       .star:nth-child(38) {
              --star-tail-length: 5.0em;
              --top-offset: 94.5vh;
              --fall-duration: 14.3s;
              --fall-delay: 1.1s;
      }
       .star:nth-child(39) {
              --star-tail-length: 4.4em;
              --top-offset: 62.3vh;
              --fall-duration: 12.3s;
              --fall-delay: 6.0s;
      }
       .star:nth-child(40) {
              --star-tail-length: 7.4em;
              --top-offset: -28.9vh;
              --fall-duration: 10.4s;
              --fall-delay: 5.1s;
      }
       .star:nth-child(41) {
              --star-tail-length: 5.9em;
              --top-offset: 49.9vh;
              --fall-duration: 11.1s;
              --fall-delay: 14.4s;
      }
       .star:nth-child(42) {
              --star-tail-length: 8.6em;
              --top-offset: -75.0vh;
              --fall-duration: 8.1s;
              --fall-delay: 8.4s;
      }
       .star:nth-child(43) {
              --star-tail-length: 9.8em;
              --top-offset: -88.0vh;
              --fall-duration: 10.3s;
              --fall-delay: 10.9s;
      }
       .star:nth-child(44) {
              --star-tail-length: 4.7em;
              --top-offset: -38.9vh;
              --fall-duration: 14.9s;
              --fall-delay: 11.0s;
      }
       .star:nth-child(45) {
              --star-tail-length: 8.8em;
              --top-offset: 31.9vh;
              --fall-duration: 12.2s;
              --fall-delay: 14.0s;
      }
       .star:nth-child(46) {
              --star-tail-length: 6.5em;
              --top-offset: -61.9vh;
              --fall-duration: 12.3s;
              --fall-delay: 12.1s;
      }
       .star:nth-child(47) {
              --star-tail-length: 3.9em;
              --top-offset: 88.3vh;
              --fall-duration: 7.0s;
              --fall-delay: 5.9s;
      }
       .star:nth-child(48) {
              --star-tail-length: 6.1em;
              --top-offset: -90.2vh;
              --fall-duration: 14.0s;
              --fall-delay: 5.9s;
      }
       .star:nth-child(49) {
              --star-tail-length: 5.5em;
              --top-offset: -96.4vh;
              --fall-duration: 10.2s;
              --fall-delay: 8.5s;
      }
       .star:nth-child(50) {
              --star-tail-length: 7.4em;
              --top-offset: 12.5vh;
              --fall-duration: 14.5s;
              --fall-delay: 11.7s;
      }
     .star::before, .star::after {
        position: absolute;
        content: '';
        top: 0;
        left: calc(var(--star-width) / -2);
        width: var(--star-width);
        height: 100%;
        background: linear-gradient(45deg, transparent, currentColor, transparent);
        border-radius: inherit;
        animation: blink 2s linear infinite;
    }
     .star::before {
        transform: rotate(45deg);
    }
     .star::after {
        transform: rotate(-45deg);
    }
     @keyframes fall {
        to {
           transform: translate3d(-30em, 0, 0);
       }
    }
     @keyframes tail-fade {
        0%, 50% {
           width: var(--star-tail-length);
           opacity: 1;
       }
        70%, 80% {
           width: 0;
           opacity: 0.3;
       }
        100% {
           width: 0;
           opacity: 0;
       }
    }
     @keyframes blink {
        50% {
           opacity: 0.3;
       }
    }
 
    @keyframes moving-star{
      0% {
		 transform: rotatez(0deg);
      }
      100%{
		 transform: rotatez(360deg) ;
      }
    }
  </style>
</head>
<body>
  <div class="space stars" style="--delay: 20s"></div>
  <div class="space stars" style="--delay: 40s"></div>
  <div class="space stars" style="--delay: 60s"></div>
  <div class="space stars" style="--delay: 80s"></div>