Cute CSS only panda face

panda-face.png

panda.html

<div class="panda-position">
  <div class="panda-container">
    <div class="panda-face">
      <div class="ears">
        <div class="ear-left"></div>
        <div class="ear-right"></div>
      </div>
      <div class="head">
        <div class="cheeks">
          <div class="cheek-left"></div>
          <div class="cheek-right"></div>
        </div>
        <div class="eyes">
          <div class="eye-left">
            <div class="pupil"></div>
          </div>
          <div class="eye-right">
            <div class="pupil"></div>
          </div>
        </div>
        <div class="nose"></div>
      </div>
    </div>
  </div>
</div>

panda.scss

$panda-draw-color: #333;
$panda-cheek-color: lighten(#FEA89F, 10%);

.panda-position {
  display: flex;
  height: 200px;
  justify-content: center;

  .panda-container {
    height: 100%;
    position: relative;
    width: 100%;

    .panda-face {
      border: 2px solid $panda-draw-color;
      border-radius: 50%;
      display: flex;
      height: 120px;
      left: 50%;
      margin-left: -80px;
      margin-top: -60px;
      position: absolute;
      top: 50%;
      width: 160px;

      .ears {
        width: 100%;
        position: absolute;

        .ear-left {
          background: $panda-draw-color;
          border-radius: 50%;
          height: 48px;
          left: 0;
          position: absolute;
          width: 48px;
          z-index: 1;
        }

        .ear-right {
          background: $panda-draw-color;
          border-radius: 50%;
          height: 48px;
          position: absolute;
          right: 0;
          width: 48px;
          z-index: 1;
        }
      }

      .head {
        background: #fff;
        border-radius: 50%;
        height: 100%;
        width: 100%;
        z-index: 2;

        .cheeks {
          position: absolute;
          top: 72%;
          width: 100%;
          z-index: 3;

          .cheek-left {
            background-color: $panda-cheek-color;
            border-radius: 50%;
            height: 8px;
            left: 12%;
            position: absolute;
            transform: rotate(45deg);
            width: 12px;
            z-index: 4;
          }
          .cheek-right {
            background-color: $panda-cheek-color;
            border-radius: 50%;
            height: 8px;
            position: absolute;
            right: 12%;
            transform: rotate(-45deg);
            width: 12px;
            z-index: 4;
          }
        }

        .eyes {
          height: 48px;
          position: absolute;
          top: 38%;
          width: 100%;
          z-index: 5;

          .eye-left {
            background-color: $panda-draw-color;
            border-radius: 50%;
            height: 100%;
            left: 15%;
            position: absolute;
            transform: rotate(40deg);
            width: 40px;
            z-index: 6;

            .pupil {
              background-color: #fff;
              border-radius: 50%;
              height: 8px;
              position: absolute;
              top: 50%;
              left: 50%;
              width: 8px;
            }
          }
          .eye-right {
            background-color: $panda-draw-color;
            border-radius: 50%;
            height: 100%;
            position: absolute;
            right: 15%;
            transform: rotate(-40deg);
            width: 40px;
            z-index: 6;

            .pupil {
              background-color: #fff;
              border-radius: 50%;
              height: 8px;
              position: absolute;
              top: 50%;
              right: 50%;
              width: 8px;
            }
          }
        }
        .nose {
          border: 3px solid $panda-draw-color;
          border-right-width: 6px;
          border-left-width: 6px;
          border-radius: 50%;
          bottom: 22%;
          content: '';
          left: 50%;
          margin-left: -6px;
          margin-top: -3px;
          position: absolute;
          z-index: 7;
        }
      }
    }
  }
}