.ground

.duggee
  .face
    .eye-left
    .eye-right
    .nose
    .mouth
      .mouth-inside
  .head
    .head-top
    .neck
    .ear-left
    .ear-right
  .tie
    .knot
    .tie-down
  .body
    .body-top
    .body-bottom
    .badge-1
      .badge-1-inner
    .badge-2
    .badge-3
    .badge-4
  .legs
    .left-leg
      .left-foot
    .right-leg
      .right-foot
    .shadow
  .arms
    .left-arm
      .left-hand
    .right-arm
      .right-hand
View Compiled
* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  background: #b8edff;
}

.ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: #b1ca65;
}

.duggee {
  height: 80vmin;
  width: 80vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.face {
  position: absolute;
  left: 35%;
  right: 35%;
  top: 18%;
  bottom: 56%;
  z-index: 2;
}

.eye-left {
  background: #000;
  width: 7%;
  height: 11%;
  border-radius: 50% / 50%;
  position: absolute;
  top: 1.5%;
  left: 41.5%;
  animation-name: blink;
  animation-duration: 5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

.eye-right {
  background: #000;
  width: 7%;
  height: 11%;
  border-radius: 50% / 50%;
  position: absolute;
  top: 1.5%;
  right: 41.5%;
  animation-name: blink;
  animation-duration: 5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

.nose {
  background: #000;
  width: 25%;
  height: 24%;
  border-radius: 50% / 50%;
  position: absolute;
  top: 14.5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.mouth {
  background: #cc6633;
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 2%;
  top: 23%;
  z-index: 1;
  border-radius: 20% 20% 50% 50% / 30% 30% 70% 70%;
}

.mouth-inside {
  background: #9a0034;
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 25%;
  top: 27%;
  border-radius: 5% 5% 50% 50% / 12% 12% 88% 88%;
  overflow: hidden;
}

.mouth-inside::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 47%;
  bottom: -10%;
  left: 21%;
  background: #ff6869;
  border-radius: 50% 50% 0 50%;
}

.mouth-inside::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 21%;
  bottom: -10%;
  left: 47%;
  background: #ff6869;
  border-radius: 50% 50% 50% 0;
}

.head {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 0%;
  bottom: 49%;
  z-index: 1;
}

.head-top {
  background: #934a00;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 50%;
  z-index: 2;
}

.head-top::before {
  content: "";
  background: #934a00;
  position: absolute;
  left: 0%;
  top: 24.5%;
  width: 10%;
  height: 26%;
  transform: rotate(33deg);
}

.head-top::after {
  content: "";
  background: #934a00;
  position: absolute;
  right: 0%;
  top: 24.5%;
  width: 10%;
  height: 26%;
  transform: rotate(-33deg);
}

.neck {
  background: #934a00;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  bottom: 0;
  z-index: 2;
}

.neck::before {
  content: "";
  background: #934a00;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 120%;
  width: 20%;
  transform: rotate(8deg) translate(-7%, 2%);
}

.neck::after {
  content: "";
  background: #934a00;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 120%;
  width: 20%;
  transform: rotate(-8deg) translate(7%, 2%);
}

.ear-left {
  background: linear-gradient(71deg, #934a00 38%,#843700 55%);
  position: absolute;
  left: 0%;
  width: 40%;
  height: 80%;
  border-radius: 100vmin;
  z-index: 1;
  transform: rotate(43deg) translate(9%, 27%);
}

.ear-right {
  background: linear-gradient(-71deg, #934a00 38%,#843700 55%);
  position: absolute;
  right: 0%;
  width: 40%;
  height: 80%;
  border-radius: 100vmin;
  z-index: 1;
  transform: rotate(-43deg) translate(-9%, 27%);
}

.tie {
  position: absolute;
  left: 21.4%;
  right: 21.4%;
  top: 50.5%;
  height: 0;
  border-bottom: 3.7vmin solid #ff0;
  border-left: 0.6vmin solid transparent;
  border-right: 0.6vmin solid transparent;
  box-sizing: content-box;
  z-index: 10;
}

.knot {
  background: #0066cc;
  position: absolute;
  top: -0.4vmin;
  height: 4.5vmin;
  left: 50%;
  width: 13%;
  transform: translateX(-50%);
  border-radius: 0.7vmin;
  z-index: 2;
}

.tie-down {
  background: #ff0;
  position: absolute;
  top: 3.5vmin;
  height: 15.5vmin;
  left: 50%;
  width: 10%;
  transform: translateX(-50%);
}

.tie-down::after {
  content: "";
  background: #ff0;
  position: absolute;
  bottom: 0;
  left: 15%;
  right: 15%;
  height: 20.13%;
  transform: translateY(50%) rotate(45deg);
}

.body {
  position: absolute;
  top: 55%;
  bottom: 11%;
  left: 20%;
  right: 20%;
}

.body-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0px;
  height: 0;
  border-bottom: 12vmin solid #d6a100;
  border-left: 1.2vmin solid transparent;
  border-right: 1.2vmin solid transparent;
  box-sizing: content-box;
  z-index: 1;
}

.body-bottom {
  background: #d6a100;
  position: absolute;
  top: 12vmin;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0 0 35% 35% / 0 0 100% 100%;
  overflow: hidden;
}

.body-bottom::after {
  content: "";
  background: #a87000;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 68%;
}

.legs {
  position: absolute;
  top: 88%;
  bottom: 0;
  left: 19%;
  right: 19%;
}

.left-leg {
  background: #a87000;
  position: absolute;
  left: 32.3%;
  width: 9%;
  bottom: 24%;
  top: 0;
  z-index: 2;
}

.right-leg {
  background: #a87000;
  position: absolute;
  right: 32.3%;
  width: 9%;
  bottom: 24%;
  top: 0;
  z-index: 2;
}

.left-foot {
  background: #753b00;
  position: absolute;
  bottom: -22%;
  width: 36%;
  top: 100%;
  left: 32%;
  border-radius: 0 0 100vmin 100vmin;
}

.left-foot::before {
  content: "";
  background: #753b00;
  position: absolute;
  left: -90%;
  width: 100%;
  bottom: 0;
  top: 0;
  border-radius: 0 0 100vmin 100vmin;
}

.left-foot::after {
  content: "";
  background: #753b00;
  position: absolute;
  right: -90%;
  width: 100%;
  bottom: 0;
  top: 0;
  border-radius: 0 0 100vmin 100vmin;
}

.right-foot {
  background: #753b00;
  position: absolute;
  bottom: -22%;
  width: 36%;
  top: 100%;
  right: 32%;
  border-radius: 0 0 100vmin 100vmin;
}

.right-foot::before {
  content: "";
  background: #753b00;
  position: absolute;
  left: -90%;
  width: 100%;
  bottom: 0;
  top: 0;
  border-radius: 0 0 100vmin 100vmin;
}

.right-foot::after {
  content: "";
  background: #753b00;
  position: absolute;
  right: -90%;
  width: 100%;
  bottom: 0;
  top: 0;
  border-radius: 0 0 100vmin 100vmin;
}

.shadow {
  background: #3f0d0d;
  position: absolute;
  left: -12%;
  right: 12%;
  bottom: 0;
  height: 15%;
  border-radius: 50%;
  z-index: 1;
}

.arms {
  position: absolute;
  top: 55.5%;
  bottom: 34.5%;
  left: 0;
  right: 0;
}

.left-arm {
  background: #d6a100;
  position: absolute;
  left: 4.5%;
  right: 45%;
  bottom: 0;
  top: 0;
  transform: rotate(17deg) translateY(25%);
}

.right-arm {
  background: #d6a100;
  position: absolute;
  right: 4.5%;
  left: 45%;
  bottom: 0;
  top: 0;
  z-index: 2;
  transform: rotate(-17deg) translateY(27%);
}

.left-hand {
  background: #934a00;
  position: absolute;
  left: -6%;
  height: 33.3%;
  right: 100%;
  top: 32%;
  border-radius: 100vmin 0 0 100vmin;
}

.left-hand::before {
  content: "";
  background: #934a00;
  position: absolute;
  top: -95%;
  height: 100%;
  left: 0;
  right: 0;
  border-radius: 100vmin 0 0 100vmin;
}

.left-hand::after {
  content: "";
  background: #934a00;
  position: absolute;
  bottom: -95%;
  height: 100%;
  left: 0;
  right: 0;
  border-radius: 100vmin 0 0 100vmin;
}

.right-hand {
  background: #934a00;
  position: absolute;
  right: -6%;
  height: 33.3%;
  left: 100%;
  top: 32%;
  border-radius: 0 100vmin 100vmin 0;
}

.right-hand::before {
  content: "";
  background: #934a00;
  position: absolute;
  top: -95%;
  height: 100%;
  left: 0;
  right: 0;
  border-radius: 0 100vmin 100vmin 0;
}

.right-hand::after {
  content: "";
  background: #934a00;
  position: absolute;
  bottom: -95%;
  height: 100%;
  left: 0;
  right: 0;
  border-radius: 0 100vmin 100vmin 0;
}

.badge-1 {
  position: absolute;
  background: #ffff00;
  z-index: 10;
  left: 23%;
  top: 7%;
  width: 13%;
  height: 3%;
  border-radius: 100vmin;
}

.badge-1::before {
  content: "";
  position: absolute;
  background: #ffff00;
  z-index: 10;
  left: -5%;
  top: 185%;
  width: 70%;
  height: 100%;
  border-radius: 100vmin;
  transform: rotate(45deg);
  z-index: 1;
}

.badge-1::after {
  content: "";
  position: absolute;
  background: #ffff00;
  z-index: 10;
  right: -5%;
  top: 185%;
  width: 70%;
  height: 100%;
  border-radius: 100vmin;
  transform: rotate(-45deg);
  z-index: 1;
}

.badge-1-inner {
  position: absolute;
  left: 21%;
  top: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.86vmin 1.86vmin 0 1.86vmin;
  border-color: #753b00 transparent transparent transparent;
  z-index: 5;
}

.badge-2 {
  background: #993300;
  position: absolute;
  left: 25.5%;
  top: 28%;
  z-index: 10;
  width: 8.5%;
  height: 15%;
  border: solid 0.86vmin #cccccc;
  border-radius: 10%;
  transform: scaleY(0.9) rotate(45deg);
}

.badge-3 {
  background: #ffcc00;
  position: absolute;
  left: 65.5%;
  top: 6%;
  z-index: 10;
  width: 10%;
  height: 17.65%;
  border: solid 0.86vmin #ff6600;
  border-radius: 50%;
}

.badge-4 {
  background: #ff9999;
  position: absolute;
  left: 66.4%;
  top: 28%;
  z-index: 10;
  width: 9%;
  height: 15.89%;
  border: solid 1.2vmin #993366;
  border-radius: 50%;
}

@keyframes blink {
  0% { transform: scaleY(1);}
  56% { transform: scaleY(1);}
  58% { transform: scaleY(0);}
  60% { transform: scaleY(1);}
  100% { transform: scaleY(1);}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.