<div class="container">
<div class="hat"></div>
<div class="head">
<div id="shade"></div>
<div class="hair"></div>
<div class="pig-tails"></div>
<div class="hair-right"></div>
<div class="hair-right left"></div>
<div class="face">
<div class="eyebrows"></div>
<div class="eyes"></div>
</div>
<div class="left-ear"></div>
<div class="right-ear"></div>
</div>
<div class="arm-left"></div>
<div class="arm-right"></div>
<div class="hand-left"></div>
<div class="hand-right"></div>
<div class="link-body">
<div class="neck"></div>
</div>
<div class="sword"></div>
<div class="hilt"></div>
<div class="tip"></div>
<div class="legs"></div>
<div class="boots">
<div class="toe"></div>
</div>
</div>
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #d5fded;
overflow: hidden;
}
.container {
position: absolute;
top: 20%;
width: 50vmin;
height: 70vmin;
}
.head {
position: absolute;
height: 45%;
width: 100%;
}
.hat {
position: absolute;
height: 50%;
width: 80%;
background: rgb(69, 167, 91);
background: linear-gradient(
190deg,
rgba(69, 167, 91, 1) 31%,
rgba(18, 109, 39, 1) 70%,
rgba(7, 77, 0, 1) 88%
);
border-radius: 70% 80% 5% 70%;
top: -17%;
left: 17%;
transform: rotate(-45deg);
z-index: -10;
}
#shade {
position: absolute;
height: 90%;
width: 70%;
right: 15%;
top: 13%;
border-radius: 0% 0% 40% 50%;
z-index: 3;
background: rgb(241, 135, 99, 0.3);
background: linear-gradient(
120deg,
rgba(241, 135, 99, 0) 55%,
rgba(241, 135, 99, 1) 76%
);
}
.face {
position: absolute;
height: 100%;
width: 70%;
left: 10%;
top: 5%;
border-radius: 0% 0% 40% 50%;
background: rgb(241, 135, 99);
background: linear-gradient(
155deg,
rgba(241, 135, 99, 1) 18%,
rgba(255, 242, 178, 1) 35%,
rgba(250, 205, 151, 1) 61%,
rgba(241, 135, 99, 1) 86%
);
z-index: 2;
}
.face::before {
content: "";
position: absolute;
background: rgb(241, 135, 99, 0.3);
background: linear-gradient(
-30deg,
rgba(241, 135, 99, 0) 20%,
rgba(241, 135, 99, 0.7) 90%
);
transform: rotate(0deg);
width: 7%;
height: 7%;
left: 33%;
top: 65%;
border-radius: 10% 30% 50% 50%;
}
.eyes {
position: absolute;
height: 25%;
width: 12%;
left: 15%;
top: 35%;
border-radius: 50%;
background: rgb(255, 255, 255);
background: linear-gradient(
130deg,
rgba(255, 255, 255, 1) 0%,
rgba(0, 0, 0, 1) 39%
);
z-index: 6;
border: solid 2px black;
}
.eyes::after {
content: "";
position: absolute;
height: 100%;
width: 100%;
left: 280%;
top: -7%;
border-radius: 45%;
background: rgb(255, 255, 255);
background: linear-gradient(
130deg,
rgba(255, 255, 255, 1) 0%,
rgba(0, 0, 0, 1) 39%
);
border: solid 2px black;
}
.eyebrows {
position: absolute;
height: 8%;
width: 26%;
left: 2%;
top: 22%;
border-radius: 10% 89% 0% 92% / 12% 91% 0% 64%;
background: #6f3517;
}
.eyebrows::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 175%;
top: -35%;
border-radius: 89% 10% 92% 0% / 91% 12% 64% 0%;
background: #6f3517;
transform: rotate(-10deg);
}
.eyebrows::after {
content: "";
width: 90%;
height: 100%;
position: absolute;
left: 100%;
top: 700%;
border-radius: 50%;
border-top: solid 5px #6f3517;
}
.left-ear {
position: absolute;
height: 25%;
width: 20%;
background: rgba(255, 242, 178, 1);
border-radius: 5% 91% 10% 88% / 10% 82% 10% 94%;
left: -5%;
top: 42%;
transform: rotate(-8deg);
}
.left-ear::before {
position: absolute;
content: "";
width: 85%;
height: 40%;
border-radius: 5% 91% 10% 88% / 10% 82% 10% 94%;
transform: rotate(16deg);
background: rgb(241, 135, 99, 0.7);
background: linear-gradient(
36deg,
rgba(241, 135, 99, 0) 25%,
rgba(241, 135, 99, 1) 76%
);
left: 10%;
bottom: 25%;
}
.right-ear {
position: absolute;
height: 35%;
width: 50%;
right: -30%;
top: 20%;
border-radius: 86% 4% 92% 8% / 47% 7% 93% 0%;
background: rgb(241, 135, 99);
background: linear-gradient(
100deg,
rgba(241, 135, 99, 1) 23%,
rgba(255, 242, 178, 1) 72%
);
transform: rotate(-8deg);
}
.right-ear::before {
position: absolute;
content: "";
width: 85%;
height: 40%;
border-radius: 86% 4% 92% 8% / 47% 7% 93% 0%;
transform: rotate(-15deg);
background: rgb(241, 135, 99, 1);
background: linear-gradient(
-20deg,
rgba(241, 135, 99, 0.1) 20%,
rgba(241, 135, 99, 1) 80%
);
left: 10%;
bottom: 25%;
}
.hair {
position: absolute;
width: 95%;
height: 65%;
border-radius: 79% 16% 92% 5% / 89% 27% 72% 11%;
background: rgb(255, 227, 35);
background: linear-gradient(
159deg,
rgba(255, 227, 35, 1) 43%,
rgba(242, 127, 60, 1) 78%
);
z-index: 10;
left: -18%;
top: -30%;
transform: rotate(-8deg);
}
.hair-right {
content: "";
position: absolute;
width: 25%;
height: 79%;
border-radius: 34% 78% 50% 63% / 41% 62% 72% 59%;
background: rgb(255, 227, 35);
background: linear-gradient(
-100deg,
rgba(255, 227, 35, 1) 43%,
rgba(242, 127, 60, 1) 78%
);
box-shadow: -25px 30px 17px rgba(241, 135, 99, 0.2);
z-index: 3;
right: 8%;
top: -32%;
transform: rotate(-25deg);
}
.pig-tails {
position: absolute;
width: 15%;
height: 65%;
border-radius: 15% 78% 0% 100% / 41% 61% 30% 59%;
background: rgb(255, 227, 35);
background: linear-gradient(
-100deg,
rgba(255, 227, 35, 1) 43%,
rgba(242, 127, 60, 1) 78%
);
z-index: 3;
right: -3%;
top: 40%;
transform: rotate(-8deg);
}
.left {
position: absolute;
left: 5%;
top: -5%;
z-index: 1;
}
.link-body {
position: absolute;
height: 45%;
width: 55%;
border-radius: 40%/80% 70% 40% 40%;
background: rgb(69, 167, 91);
background: linear-gradient(
100deg,
rgba(18, 109, 39, 1) 0%,
rgba(69, 167, 91, 1) 26%,
rgba(18, 109, 39, 1) 46%,
rgba(7, 77, 0, 1) 70%,
rgba(23, 60, 27, 1) 100%
);
top: 45%;
left: 22%;
}
.neck {
position: absolute;
height: 25%;
width: 25%;
border-radius: 10%/10% 10% 10% 10%;
background: rgb(241, 135, 99);
background: linear-gradient(
-300deg,
rgba(255, 242, 178, 1) 35%,
rgba(250, 205, 151, 1) 61%,
rgba(241, 135, 99, 1) 86%
);
top: -13%;
left: 28%;
transform: rotate(55deg);
}
.arm-left {
position: absolute;
height: 25%;
width: 15%;
border-radius: 60% 70% 30% 40%;
background: rgba(134, 88, 69, 1);
top: 50%;
left: 20%;
z-index: -1;
transform: rotate(15deg);
}
.arm-right {
position: absolute;
height: 25%;
width: 15%;
border-radius: 40% 40% 30% 40%;
background: rgb(200, 142, 119);
background: linear-gradient(
90deg,
rgba(134, 88, 69, 1) 0%,
rgba(77, 50, 39, 1) 56%
);
top: 50%;
left: 55%;
z-index: 2;
transform: rotate(-10deg);
}
.hand-right {
position: absolute;
height: 10%;
width: 15%;
border-radius: 50%;
background: rgb(241, 135, 99);
background: linear-gradient(155deg, rgba(241, 135, 99, 1) 86%);
top: 70%;
right: 28%;
z-index: 8;
}
.hand-left {
position: absolute;
height: 10%;
width: 15%;
border-radius: 50%;
background: rgb(241, 135, 99);
background: linear-gradient(
155deg,
rgba(255, 242, 178, 1) 35%,
rgba(250, 205, 151, 1) 61%,
rgba(241, 135, 99, 1) 86%
);
top: 70%;
left: 12%;
z-index: -1;
}
.sword {
position: absolute;
top: 65%;
right: 30%;
width: 45%;
height: 30%;
-webkit-clip-path: polygon(20% 98%, 4% 67%, 73% 18%, 82% 29%);
background: rgb(158, 158, 158);
background: linear-gradient(
140deg,
rgba(214, 214, 214, 1) 15%,
rgba(214, 214, 214, 1) 26%,
rgba(214, 214, 214, 1) 37%,
rgba(154, 159, 155, 1) 44%,
rgba(78, 81, 79, 1) 70%
);
z-index: 10;
transform: rotate(10deg);
}
.hilt {
position: absolute;
top: 65%;
right: 10%;
width: 45%;
height: 30%;
background: rgb(41, 124, 189);
background: rgb(41, 124, 189);
background: linear-gradient(
183deg,
rgba(41, 124, 189, 1) 36%,
rgba(0, 8, 14, 1) 83%
);
z-index: 9;
-webkit-clip-path: polygon(15% 35%, 33% 8%, 57% 31%, 38% 54%);
}
.tip {
position: absolute;
top: 81.9%;
right: 67.2%;
width: 19%;
height: 11%;
background: rgb(158, 158, 158);
background: linear-gradient(
120deg,
rgba(214, 214, 214, 1) 25%,
rgba(214, 214, 214, 1) 36%,
rgba(214, 214, 214, 1) 17%,
rgba(154, 159, 155, 1) 64%,
rgba(78, 81, 79, 1) 100%
);
z-index: 10;
transform: rotate(15deg);
-webkit-clip-path: polygon(54% 2%, 19% 100%, 98% 83%);
}
.legs {
position: absolute;
top: 89%;
right: 38%;
width: 12%;
height: 10%;
border-radius: 10% 10% 10% 10%;
background: white;
z-index: -3;
}
.legs::before {
content: "";
position: absolute;
/* top: 89%; */
left: -120%;
width: 100%;
height: 100%;
border-radius: 10% 10% 10% 10%;
background: white;
z-index: -3;
}
.boots {
position: absolute;
top: 93%;
right: 37%;
width: 14%;
height: 10%;
border-radius: 10% 10% 10% 10%;
background: rgb(200, 142, 119);
background: linear-gradient(
90deg,
rgba(134, 88, 69, 1) 0%,
rgba(77, 50, 39, 1) 56%
);
z-index: -1;
}
.boots::before {
content: "";
position: absolute;
left: -110%;
width: 100%;
height: 100%;
border-radius: 10% 10% 10% 10%;
background: rgb(200, 142, 119);
background: linear-gradient(
90deg,
rgba(134, 88, 69, 1) 0%,
rgba(77, 50, 39, 1) 56%
);
z-index: -1;
}
.toe {
position: absolute;
top: 20%;
right: 40%;
width: 110%;
height: 80%;
border-radius: 100% 100% 10% 30%;
background: rgb(134, 88, 69);
background: radial-gradient(
circle,
rgba(134, 88, 69, 1) 3%,
rgba(77, 50, 39, 1) 70%
);
z-index: -1;
box-shadow: 1px -1px 1px #4d3227;
}
.toe::before {
content: "";
position: absolute;
left: -100%;
width: 100%;
height: 100%;
border-radius: 100% 100% 10% 30%;
background: rgb(134, 88, 69);
background: radial-gradient(
circle,
rgba(134, 88, 69, 1) 13%,
rgba(77, 50, 39, 1) 70%
);
z-index: -1;
box-shadow: 1px -1px 1px #4d3227;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.