<div class="wrapper">
<div class="dot one"></div>
<div class="dot two"></div>
<div class="dot three"></div>
<div class="dot four"></div>
<div class="dot five"></div>
<div class="plus one">+</div>
<div class="plus two">+</div>
<div class="circle one pink"></div>
<div class="blob one pink"></div>
<div class="bg one pink"></div>
<div class="blob two red"></div>
<div class="blob three red"></div>
<div class="blob four pink"></div>
<div class="bg two pink"></div>
<div class="blob five red"></div>
<div class="blob six red"></div>
<div class="blob seven pink"></div>
<div class="bg three pink"></div>
<div class="blob eight red"></div>
<div class="blob nine red"></div>
<div class="blob ten pink"></div>
<div class="bg four pink"></div>
<div class="blob eleven red"></div>
<div class="blob twelve red"></div>
<div class="blob thirteen pink"></div>
<div class="circle two pink"></div>
<div class="ball"></div>
<div class="stick"></div>
<div class="circle-depth"></div>
<div class="circle-top"></div>
<div class="circle-top-bottom"></div>
<div class="circle-base"></div>
<div class="button"></div>
<div class="box-top"></div>
<div class="box-edge"></div>
<div class="box-side"></div>
<div class="box-bottom"></div>
<div class="box-shadow"></div>
</div>
$red: #ff0000;
$darkGrey: #8d8da8;
$midGrey: #c6c7d5;
$lightGrey: #e2e1e9;
.wrapper {
background-color: $red;
display: grid;
grid-template-columns: repeat(15, 1fr);
grid-template-rows: repeat(13, 1fr);
height: 400px;
margin: auto;
perspective: 400px;
width: 500px;
}
.dot {
background: transparent;
border: 2px solid white;
border-radius: 100%;
height: 3px;
width: 3px;
&.one {
align-self: end;
grid-area: 4 / 3 / 4 / 3;
justify-self: end;
}
&.two { grid-area: 6 / 14 / 6 / 14; }
&.three { grid-area: 11 / 3 / 11 / 3; }
&.four {
align-self: center;
grid-area: 11 / 15 / 11 / 15;
justify-self: center;
}
&.five {
align-self: end;
grid-area: 5 / 15/ 5 / 15;
justify-self: start;
}
}
.plus {
color: white;
font-family: 'Optima', sans-serif;
font-size: 22px;
&.one {
grid-area: 11 / 3 / 11 / 3;
justify-self: center;
}
&.two {
grid-area: 6 / 14 / 6 / 14;
justify-self: center;
}
}
.blob { border-radius: 20px; }
.circle { border-radius: 100%; }
.pink { background-color: #ffb0b4; }
.red { background-color: $red; }
/* Background: top to bottom, left to right */
.circle.one { grid-area: 3 / 4 / 4 / 4; }
.blob.one { grid-area: 3 / 6 / 4 / span 6; }
.blob.two { grid-area: 4 / 5 / 4 / span 3; }
.bg.one { grid-area: 4 / 7 / 5 / span 5; }
.blob.three { grid-area: 4 / 11 / 4 / span 2; }
.blob.four { grid-area: 6 / 5 / 5 / span 8; }
.bg.two { grid-area: 6 / 6 / 6 / span 7; }
.blob.five { grid-area: 6 / 5 / 6 / span 2; }
.blob.six { grid-area: 6 / 12 / 6 / span 2; }
.blob.seven { grid-area: 7 / 2 / 7 / span 12; }
.blob.eight { grid-area: 8 / 2 / 8 / span 3; }
.bg.three { grid-area: 8 / 3 / 8 / span 11; }
.blob.nine { grid-area: 8 / 13 / 8 / span 2; }
.blob.ten { grid-area: 9 / 3 / 9 / span 12; }
.blob.eleven { grid-area: 10 / 4 / 10 / span 2; }
.bg.four { grid-area: 10 / 5 / 10 / span 8; }
.blob.twelve { grid-area: 10 / 12 / 10 / span 2; }
.blob.thirteen { grid-area: 11 / 4 / 11 / span 9; }
.circle.two { grid-area: 11 / 14 / 12 / 14; }
/* Joystick - top to bottom */
.ball {
align-self: end;
animation: shift 1.5s infinite;
box-shadow: inset 1px -10px 1px 2px #cc0000;
background-color: $red;
border-radius: 100%;
grid-area: 3 / 8 / 6 / 11;
height: 65%;
justify-self: center;
transform-origin: bottom center;
transform-style: preserve-3D;
width: 65%;
z-index: 10;
}
.stick {
align-self: top;
animation: joystick 1.5s infinite;
background-color: white;
border-radius: 5px;
box-shadow: inset 10px 0px 10px #ccc;
grid-area: 4 / 8 / 8 / 11;
height: 84.5%;
justify-self: center;
transform-origin: bottom center;
transform-style: preserve-3D;
width: 20%;
z-index: 9;
}
.button {
align-self: center;
background-color: $red;
border-radius: 100%;
box-shadow: inset 1px -2px 1px 2px #cc0000;
grid-area: 8 / 11 / 8 / 11;
height: 60%;
justify-self: start;
z-index: 5;
width: 60%;
}
.circle-top {
align-self: center;
background-color: $lightGrey;
border-radius: 100%;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
grid-area: 6 / 8 / 8 / 11;
height: 80%;
justify-self: center;
transform: rotate3d(1, 0, 0, 45deg);
width: 50%;
z-index: 7;
}
.circle-top-bottom {
align-self: center;
background-color: $lightGrey;
grid-area: 6 / 8 / 8 / 11;
height: 12%;
justify-self: center;
margin-top: 27px;
transform: rotate3d(1, 0, 0, 45deg);
width: 25px;
z-index: 9;
}
.circle-depth {
align-self: center;
background-color: black;
border-radius: 100%;
grid-area: 6 / 8 / 8 / 11;
height: 50%;
justify-self: center;
transform: rotate3d(1, 0, 0, 45deg);
width: 30%;
z-index: 8;
}
.circle-base {
background-color: $midGrey;
border-radius: 100%;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
grid-area: 6 / 8 / 9 / 11;
height: 90%;
transform: rotate3d(1, 0, 0, 45deg);
z-index: 5;
}
.box-top {
background-color: $lightGrey;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
grid-area: 5 / 7 / 10 / 12;
margin: 10% 10% 12% 10%;
transform: rotate3d(1, 0, 0, 45deg);
z-index: 4;
}
.box-edge {
background-color: $midGrey;
border-radius: 5px;
grid-area: 5 / 7 / 10 / 12;
margin: 5%;
transform: rotate3d(1, 0, 0, 45deg);
z-index: 3;
}
.box-side {
background-color: $darkGrey;
border-radius: 0 0 5px 5px;
grid-area: 9 / 7 / 9 / 12;
margin: 2% -1% 0 3%;
transform: rotate3d(1, 0, 0, -45deg);
z-index: 3;
}
.box-bottom {
background-color: #b80000;
border-radius: 0 0 5px 5px;
grid-area: 10 / 7 / 10 / 12;
height: 70%;
margin: -12px 4% 0 6%;
transform: rotate3d(1, 0, 0, -45deg);
z-index: 2;
}
.box-shadow {
background-color: rgba(1, 1, 1, 0.1);
border-radius: 5px;
grid-area: 8 / 7 / 11 / 12;
margin: 0 0 4% 2%;
transform: rotate3d(1, 0, 0, 45deg);
}
@keyframes joystick {
0% { transform: rotateX(45deg); }
25% { transform: rotateX(-45deg) scaleY(.8); }
50% { transform: rotate(45deg); }
75% { transform: rotate(-45deg); }
100% { transform: rotateX(-45deg); }
}
@keyframes shift {
0% { transform: rotateX(45deg) translate(0, -25px); }
25% { transform: rotateX(-45deg) translate(0, 25px); }
50% { transform: rotate(45deg) translate(25px, -50px); }
75% { transform: translate(-75px, 0); }
100% { transform: rotateX(-45deg); }
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.