Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>

              
            
!

CSS

              
                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;
  }
}
              
            
!

JS

              
                
(() => {
  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';
  }
})();

              
            
!
999px

Console