<div class="two"></div>
<div class="three"></div>
@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background-color: #291642;
font-family: "Gochi Hand", sans-serif;
font-size: 130%;
letter-spacing: 0.1rem;
display: flex;
justify-content: center;
align-items: center;
}
div {
margin: 10vh;
}
.two {
width: 200px;
height: 220px;
border-radius: 50%;
box-shadow: -35px 3px 0 -8px rgba(0, 0, 0, 0.1), -60px 0 0 #90ee90,
-85px 3px 0 -5px rgba(0, 0, 0, 0.1), -110px 0 0 #adff2f,
-135px 3px 0 -5px rgba(0, 0, 0, 0.1), -160px 0 0 #ff0,
-185px 3px 0 -5px rgba(0, 0, 0, 0.1), -210px 0 0 #ffd700,
-235px 3px 0 -5px rgba(0, 0, 0, 0.1), -258px 0 0 #daa520;
}
.three {
width: 10px;
height: 7px;
box-shadow: 0 -9px 0 #ffd700, 0 9px 0 #ffd700, 0 18px 0 #ffd700,
0 27px 0 #ffd700, 0 36px 0 #ffd700, 0 45px 0 #ffd700, 0 54px 0 #ffd700,
0 63px 0 #ffd700, 0 72px 0 #ffd700, -12px 0 0 #ffd700, -12px 9px 0 #ffd700,
-12px 18px 0 #ffd700, -12px 27px 0 #ffd700, -12px 36px 0 #ffd700,
-12px 45px 0 #ffd700, -12px 54px 0 #ffd700, 12px 0 0 #ffd700,
12px 9px 0 #ffd700, 12px 18px 0 #ffd700, 12px 27px 0 #ffd700,
12px 36px 0 #ffd700, 12px 45px 0 #ffd700, 12px 54px 0 #ffd700,
-130px 0 0 white, -130px -9px 0 #ffd700, -130px 9px 0 #ffd700,
-130px 18px 0 white, -130px 27px 0 #ffd700, -130px 36px 0 #ffd700,
-130px 45px 0 white, -130px 54px 0 white, -130px 63px 0 #ffd700,
-130px 72px 0 #ffd700, -142px 0 0 #ffd700, -142px 9px 0 white,
-142px 18px 0 #ffd700, -142px 27px 0 #ffd700, -142px 36px 0 white,
-142px 45px 0 #ffd700, -142px 54px 0 white, -118px 0 0 white,
-118px 9px 0 #ffd700, -118px 18px 0 #ffd700, -118px 27px 0 white,
-118px 36px 0 white, -118px 45px 0 #ffd700, -118px 54px 0 #ffd700,
130px 0 0 #ff7f50, 130px -9px 0 #ffd700, 130px 9px 0 #ff6347,
130px 18px 0 #87ceeb, 130px 27px 0 #8fbc8f, 130px 36px 0 #dda0dd,
130px 45px 0 #ffc0cb, 130px 54px 0 #e9967a, 130px 63px 0 #48d1cc,
130px 72px 0 #dda0dd, 142px 0 0 #48d1cc, 142px 9px 0 #e9967a,
142px 18px 0 #8fbc8f, 142px 27px 0 #dda0dd, 142px 36px 0 #ff7f50,
142px 45px 0 #ffd700, 142px 54px 0 #e9967a, 118px 0 0 #8fbc8f,
118px 9px 0 #ff7f50, 118px 18px 0 #ffc0cb, 118px 27px 0 #48d1cc,
118px 36px 0 #dda0dd, 118px 45px 0 #e9967a, 118px 54px 0 #ffd700;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.