HTML
<div class="stars"></div>
<div class="planet">
<div class="crater"></div>
<div class="crater"></div>
<div class="crater"></div>
<div class="crater"></div>
<div class="crater"></div>
<div class="crater"></div>
<div class="face">
<div class="eye"></div>
<div class="eye"></div>
<div class="mouth"></div>
</div>
</div>
<div class="planet moon">
<div class="crater"></div>
<div class="crater"></div>
<div class="crater"></div>
<div class="crater"></div>
<div class="face">
<div class="eye"></div>
<div class="eye"></div>
<div class="mouth"></div>
</div>
</div>
SCSS
:root {
--planet-size: 40vw;
--planet-color: #007cda;
--moon-size: 9vw;
--moon-color: #fff;
}
.planet {
font-size: var(--planet-size);
color: var(--planet-color);
display: flex;
justify-content: center;
align-items: center;
width: 1em;
height: 1em;
background-color: currentColor;
box-shadow: inset -0.15em 0 rgba(0,0,0,0.1);
border-radius: 50%;
position: relative;
overflow: hidden;
z-index: 1;
}
.crater {
font-size: 0.1em;
opacity: 0.6;
display: block;
width: 1em;
height: 1em;
background-color: currentColor;
box-shadow: inset 0 0 0 1em rgba(0,0,0,0.03), inset 0.25em 0 rgba(0,0,0,0.07);
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
}
.crater:nth-of-type(1) {
font-size: 0.14em;
transform: translateX(0.55em) translateY(-2.5em);
}
.crater:nth-of-type(2) {
font-size: 0.1em;
transform: translateX(-0.4em) translateY(-3.8em);
}
.crater:nth-of-type(3) {
font-size: 0.12em;
transform: translateX(-3.1em) translateY(-1.7em);
}
.crater:nth-of-type(4) {
font-size: 0.16em;
transform: translateX(-2.9em) translateY(0.6em);
}
.crater:nth-of-type(5) {
font-size: 0.12em;
transform: translateX(-2em) translateY(1.5em);
}
.crater:nth-of-type(6) {
font-size: 0.18em;
transform: translateX(0.9em) translateY(1.3em);
}
.face {
display: flex;
font-size: 0.2em;
width: 2em;
height: 1.4em;
flex-flow: row wrap;
}
.eye {
width: 0.35em;
height: 0.35em;
border-radius: 50%;
background: black;
margin: 0.5em auto 0.1em;
}
.mouth {
width: 1em;
height: 0.3em;
background: black;
margin: 0 calc((2em - 0.55em) / 2);
border-radius: 0.6em 0.5em 1.5em 1.5em;
position: relative;
}
.mouth::before {
width: 50%;
height: 30%;
display: block;
content: ' ';
background-color: #ff8800;
border-radius: 50% / 100% 100% 50% 50%;
position:absolute;
top: 50%;
left: 50%;
transform: translateY(-10%) translateX(-50%);
}
.moon {
font-size: var(--moon-size);
color: var(--moon-color);
position: absolute;
top: calc(50% - (var(--moon-size) / 2));
left: calc(50% - (var(--moon-size) / 2));
transform: translateY(calc(var(--planet-size) * 0.3)) translateX(calc(var(--planet-size) * -0.4));
animation: orbit 4s ease-in-out forwards infinite;
}
.moon .face {
font-size: 0.4em;
}
.moon .mouth::before {
content: none;
}
@keyframes orbit {
0% {
transform: translateY(calc(var(--planet-size) * 0.3)) translateX(calc(var(--planet-size) * -0.4));
z-index: 2;
opacity: 1;
}
50% {
z-index: 2;
opacity: 1;
}
51% {
opacity: 0.9;
z-index: 0;
transform: translateY(calc(var(--planet-size) * -0.3)) translateX(calc(var(--planet-size) * 0.4));
}
99% {
opacity: 0.9;
z-index: 0;
}
100% {
opacity: 1;
z-index: 2;
transform: translateY(calc(var(--planet-size) * 0.3)) translateX(calc(var(--planet-size) * -0.4));
}
}
.stars {
height: 10px;
width: 10px;
border-radius: 50%;
position: absolute;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
box-shadow:
130px 270px 0 -1px white,
310px 60px 0 -1px white,
-340px 175px 0 -3px white,
-610px 1205px 0 -4px white,
500px 450px 0 -3px white,
-500px 125px 0 1px white,
-150px -615px 0 -2px white,
-110px -370px 0 -1px white,
-440px -175px 0 -3px white,
-610px -205px 0 -4px white,
410px -450px 0 -3px white,
390px -125px 0 -2px white,
50px -250px 0 -1px white,
30px -170px 0 -1px white,
380px 375px 0 -5px white,
-710px 705px 0 -6px white,
470px -650px 0 -3px white,
-450px 425px 0 1px white,
550px -205px 0 -5px white,
210px 50px 0 -1px white,
-240px 275px 0 -5px white,
-510px 120px 0 -4px white,
600px 550px 0 -3px white,
-400px 225px 0 1px white,
-250px -515px 0 -2px white,
-310px -170px 0 -4px white,
-340px -275px 0 -4px white,
-510px -305px 0 -5px white;
}
