<div class="comb-1"></div>
<div class="comb-2"></div>
<div class="comb-3"></div>

<div class="tail-1"></div>
<div class="tail-2"></div>

<div class="body"></div>

<div class="wing"></div>

<div class="eye-right"></div>
<div class="eye-left"></div>

<div class="beak"></div>
<div class="beak-bottom"></div>

<div class="wattle"></div>

<div class="foot-right"></div>
<div class="foot-left"></div>

<div class="shadow"></div>
// colors
$bg-color: #e6a81a;
$body-color: #fff;
$body-shadow-color: #d0d2d2;
$eye-color: #000;
$yellow-color: #ffd916;
$yellow-shadow-color: #f1a812;
$red-color: #d10f05;
$red-shadow-color: #a10300;
$outline-color: #000;
$chicken-shadow-color: #ca830b;

html,
body {
  width: 100%;
  height: 100%;
  background: $bg-color;
  overflow: hidden;

  * {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    box-sizing: border-box;

    &:before,
    &:after {
      content: "";
      position: absolute;
    }
  }
}

.comb {
  &-1 {
    z-index: 3;
    width: 10.2vmin;
    height: 10vmin;
    background: $red-shadow-color;
    top: -48.5vmin;
    left: -26vmin;
    transform: rotate(-25deg);
    border-radius: 60% 50% 0 0;
    box-shadow: 0 0 0 1vmin $outline-color,
      inset 2.1vmin 1.3vmin 0 0.5vmin $red-color;

    &::before {
      width: 3vmin;
      height: 3vmin;
      background: $red-shadow-color;
      top: 6.7vmin;
      left: 9vmin;
      transform: rotate(35deg);
    }

    &::after {
      width: 1.5vmin;
      height: 1.6vmin;
      background: $red-color;
      top: 5.5vmin;
      left: 10.3vmin;
      transform: rotate(-25deg);
      border-radius: 0 0 0 100%;
    }
  }

  &-2 {
    z-index: 2;
    width: 9.2vmin;
    height: 7.5vmin;
    background: $red-shadow-color;
    top: -50vmin;
    left: -6.5vmin;
    border-radius: 5vmin 5vmin 0 0;
    box-shadow: 0 0 0 1vmin $outline-color;
    overflow: hidden;

    &::before {
      width: 2vmin;
      height: 3.2vmin;
      background: $red-color;
      left: 1.3vmin;
      transform: rotate(50deg);
    }

    &::after {
      width: 2vmin;
      height: 4vmin;
      background: $red-color;
      top: -1.8vmin;
      left: 3.7vmin;
      transform: rotate(70deg);
    }
  }

  &-3 {
    z-index: 3;
    width: 9vmin;
    height: 10vmin;
    background: $red-shadow-color;
    top: -38vmin;
    left: 8.8vmin;
    border-radius: 5vmin 100% 0 0;
    box-shadow: 0 0 0 1vmin $outline-color;

    &::before {
      width: 4vmin;
      height: 4vmin;
      background: $red-shadow-color;
      top: -1.2vmin;
      left: -2.35vmin;
      transform: rotate(-5deg);
      border-radius: 0 0.5vmin 0 0;
    }
  }
}

.tail {
  &-1 {
    z-index: 3;
    width: 14vmin;
    height: 7.5vmin;
    background: $red-shadow-color;
    top: 5.2vmin;
    left: 36.4vmin;
    border-radius: 0 3vmin 100% 0;
    box-shadow: 0 0.1vmin 0 1.1vmin $outline-color,
      inset -0.7vmin 1vmin 0 0.2vmin $red-color;

    &::before {
      width: 5vmin;
      height: 2.5vmin;
      background: $red-shadow-color;
      top: 7.15vmin;
      left: 3vmin;
      transform: rotate(-5deg);
    }

    &::after {
      width: 1.2vmin;
      height: 1.2vmin;
      background: $outline-color;
      top: 7.1vmin;
      left: 7.4vmin;
      border-radius: 50%;
      box-shadow: 0.5vmin -0.15vmin 0 0.01vmin $outline-color,
        0.4vmin 0.9vmin 0 0.1vmin $red-color;
    }
  }

  &-2 {
    width: 20vmin;
    height: 12vmin;
    background: $red-shadow-color;
    top: 25.5vmin;
    left: 26.5vmin;
    transform: rotate(-14deg);
    border-radius: 0% 100% 100% 0% / 100% 30% 70% 0%;
    box-shadow: 0 0 0 1.1vmin $outline-color,
      inset -0.6vmin 0.8vmin 0 0.5vmin $red-color;
  }
}

.body {
  z-index: 3;
  width: 39.4vmin;
  height: 45.3vmin;
  background: $body-color;
  top: 1.5vmin;
  left: -10.7vmin;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: 0 0 0 1vmin $outline-color,
    inset -3.4vmin -2.3vmin 0 0.8vmin $body-shadow-color;
}

.wing {
  z-index: 3;
  width: 15.4vmin;
  height: 11.6vmin;
  background: $body-color;
  top: 7.8vmin;
  left: 7.5vmin;
  transform: rotate(6deg) skewX(12deg) skewY(-5deg);
  border-radius: 50% 50% 30% 70% / 0% 0% 100% 100%;
  border: 1vmin solid $outline-color;
  border-top: 0;
  box-shadow: 1.3vmin 1.7vmin 0 1vmin $body-shadow-color;

  &::before {
    width: 1vmin;
    height: 1vmin;
    background: $outline-color;
    top: -0.5vmin;
    left: -1vmin;
    border-radius: 50%;
    box-shadow: 14.4vmin 0 0 0 $outline-color;
  }
}

.eye-right {
  z-index: 3;
  width: 4.5vmin;
  height: 4.5vmin;
  background: $eye-color;
  top: -17.8vmin;
  left: -23.2vmin;
  border-radius: 50%;
}

.eye-left {
  z-index: 1;
  width: 4vmin;
  height: 4vmin;
  background: $eye-color;
  top: -20.3vmin;
  left: -44.4vmin;
  border-radius: 50%;
}

.beak {
  z-index: 5;
  width: 7.2vmin;
  height: 4.2vmin;
  background: $yellow-color;
  top: -8.9vmin;
  left: -42.4vmin;
  border-radius: 4.2vmin 4.2vmin 0 0;
  box-shadow: 0 0 0 1vmin $outline-color,
    inset 1.2vmin 0.5vmin 0 -0.2vmin $body-color;
}

.beak-bottom {
  z-index: 4;
  width: 4.6vmin;
  height: 4.6vmin;
  background: $yellow-shadow-color;
  top: -4.3vmin;
  left: -40.3vmin;
  border-radius: 50%;
  box-shadow: -0.3vmin 0 0 1vmin $outline-color,
    0.1vmin 0.1vmin 0 1vmin $outline-color;
}

.wattle {
  z-index: 3;
  width: 0;
  height: 0;
  border-left: 4.2vmin solid transparent;
  border-right: 2.4vmin solid transparent;
  border-bottom: 5.5vmin solid $outline-color;
  left: -37vmin;
  transform: rotate(20deg) skewX(-3deg);

  &::before {
    width: 4.8vmin;
    height: 4.8vmin;
    background: $red-shadow-color;
    top: 4.6vmin;
    left: -3.3vmin;
    border-radius: 50%;
    box-shadow: 0.1vmin 0vmin 0 1.1vmin $outline-color,
      -0.2vmin -0.1vmin 0 1vmin $outline-color,
      inset 0.5vmin -0.55vmin 0 0.1vmin $red-color;
  }

  &::after {
    width: 0;
    height: 0;
    border-left: 2vmin solid transparent;
    border-right: 2.4vmin solid transparent;
    border-bottom: 4vmin solid $red-shadow-color;
    top: 2vmin;
    left: -2.8vmin;
    transform: skewX(-5deg) rotate(2deg);
  }
}

.foot-right {
  z-index: 3;
  width: 5.5vmin;
  height: 9.8vmin;
  background: $yellow-color;
  top: 46vmin;
  left: -4.4vmin;
  border-radius: 3vmin;
  box-shadow: 0 0 0 1.1vmin $outline-color,
    inset 0.9vmin 0 0 0.01vmin $body-color;
}

.foot-left {
  z-index: 1;
  width: 5.5vmin;
  height: 9.8vmin;
  background: $yellow-shadow-color;
  top: 43.6vmin;
  left: -23.8vmin;
  border-radius: 3vmin;
  box-shadow: 0 0 0 1.1vmin $outline-color;
}

.shadow {
  width: 42vmin;
  height: 6vmin;
  background: $chicken-shadow-color;
  top: 54vmin;
  left: -1vmin;
  border-radius: 50%;
}
View Compiled
// design source
// https://dribbble.com/shots/5259998-Chicken

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.