<body>
  <div class="box-canvas">
    <div class="branch"></div>
    <div class="leg left"></div>
    <div class="tail"></div>
    <div class="body"></div>
    <div class="head"></div>
    <div class="beak">
      <div class="beak-top"></div>
    </div>
    <div class="leg right"></div>
  </div>
   
</body>
:root {
  --body-color: #F73219;
  --wing-yellow: #F2D207;
  --wing-blue: #0372C3;
  --accent-red: #D12B19;
}

body{
  background: #74B2C9;
}

.box-canvas{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  margin-bottom: 8%;
  width: 190px;
  height:600px;
}

.head {
  position: absolute;
  left: 50px;
  width: 75px;
  height: 75px;
  background: var(--body-color);
  border-radius: 50%;
  border: 1px solid var(--body-color);
  overflow: hidden;
}

/* White section */
.head::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 50% 50% 50% 20%;
  bottom: 10px;
}

/* Eye */
.head::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
  height: 5px;
  width: 5px;
  background: white;
  border: 8px solid black;
  border-radius: 50%;
}

.beak {
  position: absolute;
  transform: rotate(-10deg);
  top: 30px;
  height: 30px;
  width: 60px;
}

/* Bottom beak */
.beak::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  background: orange;
  width: 30px;
  height: 15px;
  border-radius: 50% 0% 50% 50%;
}

.beak-top {
  position: absolute;
  right: 0;
  background: var(--wing-yellow);
  width: 40px;
  height: 25px;
  border-radius: 50% 30% 50% 50%;
}

/* Point of beak */
.beak-top::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: -15px -15px 0 var(--wing-yellow);
  transform: rotate(20deg);
}

.body {
  position: absolute;
  left: 70px;
  top: 55px;
  background: var(--body-color);
  height: 150px;
  width: 80px;
  border-radius: 50% / 40%;
  transform: rotate(-25deg);
  border-left: 2px solid var(--accent-red);
}

/* Wing */
.body::after {
  content: '';
  position: absolute;
  left: 25px;
  width: 60px;
  height: 130px;
  border-left: 2px solid var(--accent-red);
  background: linear-gradient(to bottom,
    var(--body-color),
    var(--body-color) 50%,
    var(--wing-yellow) 55%,
    var(--wing-yellow) 70%,
    var(--wing-blue) 80%
  );
  border-radius: 50% 30% 50% 10%;
  transform: skew(0deg, -20deg) rotate(-10deg);
}

.tail {
  content: '';
  position: absolute;
  right: 10px;
  top: 150px;
  width: 40px;
  height: 140px;
  background: blue;
  background: linear-gradient(to right,
    var(--wing-blue),
    var(--wing-blue) 6px,
    var(--body-color) 10px,
    var(--body-color) 16px,
    var(--wing-yellow) 20px,
    var(--wing-yellow) 26px,
    var(--wing-blue) 30px
  );
  transform: rotate(-20deg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 60%);
}

.leg.right {
  transform: rotate(10deg);
  top: 200px;
  left: 110px;
}

.leg.left {
  transform: rotate(10deg);
  top: 190px;
  left: 90px;
}

.leg {
  position: absolute;
  width: 8px;
  height: 35px;
  background: var(--wing-yellow);
}

.leg::after {
  content: '';
  position: absolute;
  left: -10px;
  top: -10px;
  width: 28px;
  height: 20px;
  background: var(--body-color);
  clip-path: polygon(20% 100%, 80% 100%, 100% 0, 0 0);
}

.leg.left::after {
  height: 30px;
  top: -20px;
}

.leg::before {
  content: '';
  position: absolute;
  top: 40px;
  left: -10px;
  width: 30px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 -8px 0 var(--wing-yellow);
}

.branch {
  position: absolute;
  top: 232px;
  left: 30px;
  transform: rotate(40deg);
  background: #7E4E2D;
  width: 155px;
  height: 20px;
  border-radius: 25% / 35%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.