<div id="bg">
	<div id="opm">
		<div class="mantle"></div>
		<div class="suit"></div>
		<div class="collar"></div>
		<div class="zipper"></div>
		<div class="decollete"></div>
		<div class="neck"></div>
		<div class="shoulder right"></div>
		<div class="shoulder left"></div>
		
		<div class="ear right"></div>
		<div class="ear left"></div>
		<div class="face"></div>
		<div class="eyebrow right"></div>
		<div class="eyebrow left"></div>
		<div class="eye right"></div>
		<div class="eye left"></div>
		<div class="nose"></div>
		<div class="mouth"></div>
	</div>
</div>
body {
  background: #000;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}
#bg {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 600px;
  background: #36c;
}
#opm {
  position: relative;
  width: 600px;
  height: 1000px;
  overflow: hidden;
  transform: scale(.6);
}
#opm div {
  position: absolute;

}
#opm div:before,
#opm div:after {
  position: absolute;
  display: block;
  content: "";
}
@keyframes eyeball {
  0% {left: 48%;}
  25% {left: 80%;}
  50% {left: 52%;}
  50% {left: 20%;}
  100% {left: 48%;}
}
.face {
  left: 75px;
  width: 450px;
  height: 600px;
  background: #fc9;
  border-radius: 100% / 80% 80% 100% 100%;
  box-shadow:
    0px 0px 0px 5px #333 inset,
    -10px -10px 0 0 #c96 inset;
}
.face:before {
  top: 70px;
  left: 60px;
  width: 100px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  transform: rotate(-40deg);
}
.ear {
  top: 250px;
  width: 100px;
  height: 150px;
  background: #fc9;
  border-radius: 50%;
  box-shadow: 0 0 0 5px #333 inset;
}
.ear.right {
  left: 30px;
  transform: rotate(-15deg);
}
.ear.left {
  right: 30px;
  transform: rotate(15deg);
}
.ear:before {
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  background: #c96;
  border-radius: 50%;
  box-shadow: 0 -3px 0 0 #333;
}
.ear:after {
  bottom: 15%;
  left: 30%;
  width: 40%;
  height: 45%;
  background: #fc9;
  border-radius: 50%;
  box-shadow: 0 3px 0 1px #333 inset;
}
.eyebrow {
  top: 220px;
  width: 110px;
  height: 110px;
  box-shadow: 0 -10px 0 -5px #333;
  border-radius: 100% / 50%;
}
.eyebrow.right {
  left: 140px;
}
.eyebrow.left {
  right: 140px;
}
.eye {
  top: 270px;
  width: 130px;
  height: 70px;
  border-radius: 80% / 80% 80% 100% 100%;
  background: #fff;
  box-shadow: 0 0 0 4px #333 inset;
}
.eye:before {
  top: 25px;
  left: 48%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333;
  animation: eyeball 5s ease 3s infinite;
}
.eye.right {
  left: 130px;
}
.eye.left {
  right: 130px;
}
.nose {
  top: 310px;
  left: 50%;;
  width: 20px;
  height: 120px;
  margin-left: -15px;
}
.nose:before {
  top: 0;
  left: -10px;
  width: 70%;
  height: 85%;
  border-radius: 50%;
  box-shadow: -8px -8px 0 -5px #333 inset,
    -15px -15px 0 0 #c96 inset;
  transform: rotate(5deg);
}
.nose:after {
  bottom: 0;
  left: -7px;
  width: 100%;
  height: 30%;
  border-radius: 50%;
  box-shadow: 10px 2px 0 -5px #333 inset;
  transform: rotate(-30deg);
}
.mouth {
  top: 470px;
  left: 245px;
  width: 100px;
  height: 30px;
  border-radius: 5px 5px 50% 50% / 5px 5px 100% 100%;
  background: #966;
  border: 3px solid #333;
}

.neck {
  top: 550px;
  left: 220px;
  width: 150px;
  height: 90px;
  background: #fc9;
  border-right: 5px solid #333;
  border-left: 5px solid #333;
  overflow: hidden;
}
.neck:before {
  left: -10%;
  width: 120%;
  height: 80%;
  background: #c96;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.decollete {
  top: 610px;
  left: 195px;
  width: 200px;
  height: 80px;
  background: #fc9;
  border-radius: 100%;
  border: 3px solid #333;
}
.collar {
  top: 610px;
  left: 145px;
  width: 300px;
  height: 150px;
  background: #fff;
  border-radius: 100%;
  border: 3px solid #333;
}
.collar:before {
  top: 145px;
  left: 95px;
  width: 100px;
  height: 120px;
  background: #fff;
  border: 3px solid #333;
  border-top: none;
}
.collar:after {
  top: 80px;
  left: 140px;
  width: 14px;
  height: 145px;
  background:
    linear-gradient(0, transparent 10px, #333 10px, #333 13px) center bottom / 100% 13px repeat-y ,
    #ccc;
  border: 3px solid #333;
}
.suit {
  top: 630px;
  left: 50px;
  width: 500px;
  height: 400px;
  background: #fc0;
  border-radius: 40% 40% 0 0;
  box-shadow:
    0 15px 0 8px #ccc,
    0 0 0 3px #333 inset;
}
.suit:before {
  left: 57px;
  bottom: 0;
  width: 380px;
  height: 250px;
  border-right: 3px solid #333;
  border-left: 3px solid #333;
  border-radius: 3px 3px 0 0 / 100% 100% 0 0;
  box-shadow: 0 20px 0 10px #c90;
}
.zipper {
  top: 700px;
  left: 282px;
  width: 26px;
  height: 50px;
  background: #ccc;
  border: 3px solid #333;
  border-bottom: none;
  border-radius: 5px;
}
.zipper:before {
  top: 40px;
  left: -20px;
  width: 60px;
  height: 60px;
  background: #ccc;
  border-radius: 50%;
  border: 3px solid #333;
  box-shadow:
    5px -3px 0 0 #eee inset,
    0 0 0 23px #ccc inset,
    0 0 0 26px #333 inset;
}
.zipper:after {
  width: 26px;
  height: 55px;
  background:
    linear-gradient(0, #333 3px, transparent 3px) center top / 10px 16px no-repeat,
    linear-gradient(90deg, #333 3px, #ccc 3px, #ccc 7px, #333 7px) center top / 10px 16px no-repeat,
    linear-gradient(-35deg, #ccc 40%, #eee 40%, #eee 60%, #ccc 60%);
}
.mantle {
  top: 585px;
  left: 20px;
  width: 560px;
  height: 420px;
  background: #fff;
  border-radius: 60% 60% 0 0;
  box-shadow: 0 0 0 5px #333;
}
.shoulder {
  top: 610px;
  width: 160px;
  height: 120px;
  background: #fff;
  border: 3px solid #333;
  border-top-width: 5px;
  box-shadow:
    0 5px 0 0 rgba(0,0,0,.3),
    0 -20px 0 10px #fff inset,
    0 -25px 0 10px #333 inset,
    0 -35px 0 10px #ccc inset;
}
.shoulder:before {
  top: 30%;
  left: 25%;
  width: 50%;
  height: 50px;
  border-radius: 50%;
  background: #333;
}
.shoulder:after {
  top: 38%;
  left: 35%;
  width: 15%;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}
.shoulder.right {
  left: 66px;
  transform: rotate(-15deg) skew(-10deg);
  border-radius: 90% 0 50% 50% / 40% 0 85% 60%;
}
.shoulder.right:after {
  transform: rotate(15deg) skew(10deg);
}
.shoulder.left {
  right: 66px;
  transform: rotate(15deg) skew(10deg);
  border-radius: 0 90% 50% 50% / 0 40% 60% 85%;
}
.shoulder.left:after {
  transform: rotate(-15deg) skew(-10deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.