<div class="moon">
  <span class="crater"></span>
  <span class="crater"></span>
  <span class="crater"></span>
  <span class="crater"></span>
</div>
<div class="ground">
  <div class="rock"></div>
  <div class="rock"></div>
  <div class="rock"></div>
</div>

<div class="shooting">
  <div class="core"></div>
  <div class="trail"></div>
</div>

<svg class="cactus" version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 714.000000 1280.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M3650 12793 c-269 -30 -610 -116 -848 -215 -221 -91 -504 -249 -633
-353 -94 -76 -184 -187 -237 -290 -80 -158 -160 -529 -192 -894 -29 -316 59
-835 227 -1356 31 -93 124 -341 208 -550 298 -742 332 -892 390 -1710 43 -604
68 -1139 56 -1198 -26 -127 -43 -362 -39 -537 4 -207 10 -197 -96 -160 -314
108 -504 421 -630 1035 -65 319 -105 644 -146 1205 -40 556 -48 624 -87 770
-19 76 -27 136 -34 295 -13 276 -30 382 -74 472 -98 199 -323 314 -741 379
-165 26 -425 26 -509 1 -266 -82 -313 -292 -214 -962 130 -877 148 -1035 199
-1725 88 -1197 299 -1921 692 -2370 192 -219 481 -416 838 -568 278 -119 519
-178 807 -198 88 -6 93 -7 88 -28 -2 -11 -13 -71 -25 -132 -20 -110 -73 -312
-91 -346 -9 -17 -37 -144 -229 -1063 l-109 -520 -99 -260 c-177 -464 -254
-713 -288 -936 -31 -202 -1 -345 85 -407 120 -87 537 -164 906 -166 168 -1
207 2 242 16 136 56 390 87 958 118 488 26 720 65 878 147 124 65 144 115 126
312 -12 128 -40 226 -121 426 -120 295 -140 348 -164 445 -43 167 -49 103 156
1645 70 531 91 726 112 1075 15 255 15 974 -1 1159 -24 295 -31 581 -21 836 6
138 13 275 16 306 l6 56 144 46 c115 38 176 51 306 67 519 65 858 173 1158
370 232 153 338 321 404 641 55 267 71 516 86 1359 5 294 15 623 22 730 20
326 -7 513 -103 708 -105 216 -283 337 -530 361 -114 12 -224 -3 -364 -50
-191 -63 -316 -130 -401 -213 -209 -208 -246 -519 -158 -1336 18 -165 20 -431
4 -511 -26 -127 -82 -229 -154 -278 -49 -34 -239 -131 -315 -161 -47 -18 -50
-18 -55 -2 -2 9 -19 116 -36 237 -17 121 -45 297 -61 390 -54 312 -71 459
-104 905 -20 271 -19 397 6 787 18 282 20 395 16 808 -5 498 -8 540 -52 670
-56 166 -188 389 -290 490 -118 118 -304 195 -540 224 -85 10 -268 12 -345 4z"/>
</g>
</svg>
html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  background: linear-gradient(#0f1a2b, #411d63);
}

.moon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #ffffdd;
  box-shadow: inset -11px -8px 0px 4px #feffa2,
    0px 0px 10px 0px #feffa2,
    0px 0px 50px 0px #feffa2,
    0px 0px 500px 0px #feffa2;
  display: inline-block;
  position: relative;
  top: 10%;
  left: 10%;
  animation: 3s moonglow ease-in-out infinite alternate;
}

.crater {
  position: absolute;
  background: rgba(255, 244, 118, 1);
  border-radius: 50%;
  box-shadow: inset 1px 1px 0px 1px #ecec79;
}

.crater:nth-child(1) {
  width: 25px;
  height: 25px;
  top: 57%;
  left: 30%;
}

.crater:nth-child(2) {
  width: 16px;
  height: 16px;
  top: 30%;
  left: 23%;
}

.crater:nth-child(3) {
  width: 12px;
  height: 12px;
  top: 50%;
  left: 14%;
}

.crater:nth-child(4) {
  width: 30px;
  height: 30px;
  top: 20%;
  left: 30%;
  box-shadow: none;
  background: rgba(255, 244, 118, 0.3);
}

.ground {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 11%;
  background: black; 
  z-index: 100;
  perspective: 1000px;
}

.rock:nth-child(1) {
  position: absolute;
  width: 10%;
  height: 100%;
  top: -20%;
  left: 10%;
  background: black;
  border-radius: 20px;
  transform: skewX(10deg)
}

.rock:nth-child(2) {
  position: absolute;
  width: 15%;
  height: 100%;
  top: -20%;
  right: 25%;
  background: black;
  border-radius: 20px;
  transform: rotateZ(10deg) skewX(9deg);
}

.rock:nth-child(3) {
  position: absolute;
  width: 5%;
  height: 50%;
  top: -15%;
  right: 38%;
  background: black;
  border-radius: 20px;
  transform: rotateZ(-15deg);
}

.star {
  position: absolute;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  animation-iteration-count: infinite;
}

.cactus {
  position: absolute; 
  bottom: 10%;
  right: 10%;
  z-index: 900;
  width: 100px;
}

.shooting {
  position: relative;
  top: 30%;
  left: 30%;
  width: 300px;
  height: 5px;
  border-radius: 5px;
  display: inline-block;
  transform: rotateZ(-30deg);
}


.shooting .core {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 4px; 
  border-radius: 50%;
  background: #ffff84;
  box-shadow: 0px 0px 3px 1px rgba(255, 245, 131, 0.5),
    0px 0px 10px 5px rgba(255, 245, 131, 0.2);
  animation: 6s linear infinite core;
}

.shooting .trail {
  display: inline-block;
  position: absolute;
  content: '';
  width: 100px;
  height: 5px; 
  border-radius: 50% 0 0 50%;
  background: linear-gradient(
    to right,
    rgba(255, 245, 174,0.7),
    rgba(255, 245, 174, 0.2) 50%,
    transparent);
  top: -1px;
  left: 0;
  animation: 6s linear infinite trail;
}


@keyframes glow {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

@keyframes moonglow {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.02);
  }
}

@keyframes core {
  0% {
    left: 100%;
    opacity: 1;
  }
  5% {
    left: 60%;
    opacity: 0.8;
  }
  10% {
    left: 0;
    opacity: 0;
  }
  100% {
    left: 0;
    opacity: 0;
  }
}

@keyframes trail {
  0% {
    left: 100%;
    opacity: 1;
    width: 0;
  }
  5% {
    left: 65%;
    opacity: 0.5;
    width: 150px;
  }
  10% {
    left: 0;
    opacity: 0;
    width: 150px;
  }
  100% {
    left: 0;
    opacity: 0;
    width: 150px;
  }
}

(() => {
  const max_stars = 100;
  const stars = [];
  
  for (let i = 0; i < max_stars; i++) {
    const star = document.createElement('span');
    const size = (Math.floor(Math.random() * 3) + 1);
    star.className = 'star';
    star.style.width = size +'px';
    star.style.height = size + 'px';
    star.style.background = `rgba(255, 255, 177, ${Math.random()})`;
    star.style.top = Math.ceil(Math.random() * 100) + '%';
    star.style.left = Math.ceil(Math.random() * 100) + '%';
    stars.push(star);
    document.body.appendChild(star);
  }
  
  for (let j = 0; j < max_stars * 0.6;  j++) {
    const star = stars[j];
    star.style.animationName = 'glow';
    star.style.animationDelay = (Math.floor(Math.random() * 6) + 1) + 's';
    star.style.animationDuration = (Math.floor(Math.random() * 6) + 1) + 's';
  }
})();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.