<div class="hitchhiker">
<div class="planet">
<div class="wrist">
</div>
<div class="hand">
</div>
<div class="thumb">
</div>
<div class="finger-1">
</div>
<div class="finger-2">
</div>
<div class="finger-3">
</div>
<div class="orbit">
</div>
</div>
<div class="orbit outer">
</div>
</div>
:root {
--logo-dark-color: #000;
--logo-light-color: #fff;
}
body {
width: 100vw;
height: 100vh;
overflow-x: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hitchhiker {
width: 250px;
height: 250px;
position: relative;
}
.planet {
width: 90%;
height: 90%;
background: var(--logo-dark-color) content-box;
padding:0.8px;
border-radius: 50%;
position: relative;
z-index: 4;
overflow: hidden;
}
.wrist, .hand, .hand:after, .thumb, .thumb:after, [class*=finger] {
background-color: var(--logo-light-color);
}
.wrist, .hand, .thumb, [class*=finger], .orbit {
transform: rotate(45deg);
position: absolute;
}
.wrist {
width: 60px;
height: 40%;
bottom: 0;
left: 24%;
z-index: 2;
}
.hand {
width: 80px;
height: 50px;
bottom: 33%;
left: 37.5%;
border-top-right-radius: 100% 50px;
border-top-left-radius: 100% 50px;
border-bottom-left-radius: 35px;
}
.thumb {
width: 30px;
height: 30px;
left: 31.25%;
bottom: 52%;
border-top-right-radius: 1px;
border-top-left-radius: 10px 100%;
}
.thumb:before {
content: '';
position: absolute;
width: 50px;
height: 50px;
background-color: var(--logo-dark-color);
top: 18px;
left: -17px;
border-radius: 25% 50% 25%;
z-index: 3;
}
.thumb:after {
content: '';
position: absolute;
top: 1px;
left: -14px;
height: 25px;
width: 30px;
border-top-right-radius: 40px 100%;
border-top-left-radius: 30px 100%;
transform: rotate(-30deg);
}
[class*=finger] {
border-radius: 10px;
width: 30px;
}
.finger-1 {
height: 50px;
top: 30px;
right: 60px;
}
.finger-2 {
height: 40px;
top: 60px;
right: 40px;
}
.finger-3 {
height: 30px;
top: 90px;
right: 20px;
}
.orbit {
width: 100%;
height: 30px;
border-radius: 50%;
border: 10px solid transparent;
}
.planet .orbit {
border-bottom-color: var(--logo-light-color);
bottom: 25%;
left: -18%;
}
.orbit.outer {
border-color: var(--logo-dark-color);
bottom: 33.5%;
left: -21%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.