dreaming under the desert stars
A Pen by Stan Williams on CodePen.
<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> |
dreaming under the desert stars
A Pen by Stan Williams on CodePen.
(() => { | |
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'; | |
} | |
})(); |
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; | |
} | |
} |
Demo or fork: https://codepen.io/Stanssongs/pen/NWxwwOM