.container
.ellipse
.ellipse
.inner-container
.neck
.suit
.helmet-container
.helmet-base
.visor
.visor-shine
.stars
- var numStars = 0
while numStars < 6
.star
- numStars++
View Compiled
$white: #ffffff;
$off-white: #efefef;
$light-grey: #cccccc;
$grey: #a3a3a3;
$visor-grey: #b7b7b7;
$dark-grey: #323a44;
*, *:before, *:after {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #white;
}
.container {
width: 400px;
height: 400px;
position: relative;
.ellipse {
position: absolute;
width: 100%;
height: 35%;
background: $light-grey;
border-radius: 50%;
top: 32.5%;
left: 0%;
}
.ellipse:nth-of-type(1) {
transform: rotate(-5deg)
}
.ellipse:nth-of-type(2) {
transform: rotate(-55deg)
}
}
.inner-container {
width: 60%;
height: 60%;
background-color: $dark-grey;
position: absolute;
top: 20%;
left: 20%;
border-radius: 50%;
}
.neck {
position: absolute;
background-color: $off-white;
width: 43%;
height: 5%;
bottom: 29%;
left: 28.5%;
}
.suit {
position: absolute;
background-color: $off-white;
width: 40%;
height: 40%;
bottom: 6%;
left: 30%;
border-radius: 100% 0%;
transform: rotate(45deg);
overflow: hidden;
&:before {
content: "";
position: absolute;
width: 108%;
height: 90%;
border-radius: 30% / 50%;
background-color: transparent;
border: 12px solid $grey;
transform: rotate(-45deg);
top: 9%;
left: 0%;
}
&:after {
content: "";
position: absolute;
transform: rotate(-45deg);
width: 47%;
height: 30%;
background-color: $grey;
top: 40%;
left: 31%;
border-radius: 11px;
}
}
.helmet-container {
position: absolute;
width: 60%;
height: 60%;
background-color: $off-white;
top: 16%;
left: 20%;
border-radius: 100px;
border: 10px solid $dark-grey;
&:before,
&:after {
content: "";
position: absolute;
background-color: $off-white;
width: 10%;
height: 30%;
top: 35%;
border-radius: 5px;
}
&:before {
left: -5%;
}
&:after {
right: -5%;
}
}
.helmet-base {
position: absolute;
width: 96%;
height: 25%;
background-color: $grey;
top: 38.5%;
left: 2.5%;
z-index: 2;
border-radius: 5px;
/* Faking the clipped helmet border! */
&:before {
content: "";
position: absolute;
width: 90.65%;
height: 160%;
top: -22%;
left: 4.75%;
border-radius: 11px;
background-color: $dark-grey;
}
&:after {
content: "";
position: absolute;
width: 83%;
height: 230%;
background-color: transparent;
top: -130%;
left: 8%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border: 3px solid $visor-grey;
}
}
.visor {
position: absolute;
width: 91%;
height: 80%;
background-color: $dark-grey;
top: 13%;
left: 5%;
z-index: 3;
border: 3px solid $dark-grey;
border-radius: 50%;
clip-path: polygon(5% 100%, 5% 0%, 95% 0%, 95% 100%);
box-shadow: inset 30px 10px 0 -7px $grey;
}
.visor-shine {
position: absolute;
width: 85%;
height: 85%;
background-color: transparent;
top: 8%;
left: 6%;
border-radius: 50%;
box-shadow: inset 0 20px 0 -15px $white;
&:before, &:after {
content: "";
position: absolute;
width: 15%;
height: 3%;
background-color: $white;
top: 30%;
right: 8%;
border-radius: 50%;
}
&:after {
transform-origin: center;
transform: rotate(90deg);
}
}
.stars {
position: absolute;
width: 100%;
height: 100%;
.star {
position: absolute;
background-color: $white;
border-radius: 50%;
}
.star:nth-of-type(1) {
width: 5%;
height: 5%;
top: 23%;
left: 12%;
}
.star:nth-of-type(2) {
width: 4%;
height: 4%;
top: 31%;
left: 17%;
}
.star:nth-of-type(3) {
width: 3%;
height: 3%;
top: 25%;
left: 22%;
}
.star:nth-of-type(4) {
width: 5%;
height: 5%;
top: 45%;
right: 11%;
}
.star:nth-of-type(5) {
width: 4%;
height: 4%;
top: 57%;
right: 13%;
}
.star:nth-of-type(6) {
width: 3%;
height: 3%;
top: 53%;
right: 7%;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.