<div class="container">
  <div class="ear"></div>
  <div class="ear" style="--right: 0"></div>
  <div class="face">
    <div class="eye" style="--left: 20%"></div>
    <div class="eye" style="--right: 20%"></div>
    <div class="around-mouth"></div>
    <div class="nose">
      <div class="mouth"></div>
    </div>
    <div class="beard" style="--left: 15%"></div>
    <div class="beard" style="--right: 15%; --rotate: -1"></div>
    <div class="top-pattern"></div>
    <div class="side-pattern"></div>
    <div class="side-pattern" style="--right: 0; --rotate: -1"></div>
  </div>
</div>

/* カスタムプロパティ */
:root {
  --tiger-color: #fcdb57;
  --tiger-border: #594639;
  --right: auto;
  --left: auto;
  --rotate: 1;
}

/* 共通のスタイル */
.face *,
.face *::before,
.face *::after {
  position: absolute;
  content: "";
}

/* コンテナ */
.container {
  position: relative;
  width: 260px;
  height: 220px;
}

/* 輪郭 */
.face {
  position: relative;
  width: 250px;
  height: 210px;
  overflow: hidden;
  background-color: var(--tiger-color);
  border: solid 5px var(--tiger-border);
  border-radius: 50% / 60% 60% 40% 40%;
}

/* 耳 */
.ear {
  position: absolute;
  right: var(--right);
  z-index: -1;
  width: 60px;
  height: 60px;
  background-color: var(--tiger-color);
  border: solid 5px var(--tiger-border);
  border-radius: 50%;
}

.ear::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  content: "";
  background-color: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* 目 */
.eye {
  top: 45%;
  right: var(--right);
  left: var(--left);
  width: 25px;
  height: 25px;
  background-color: var(--tiger-border);
  border-radius: 50%;
}

/* 鼻 */
.nose {
  top: 57%;
  left: 50%;
  width: 35px;
  height: 25px;
  background-color: var(--tiger-border);
  border-radius: 50% / 40% 40% 60% 60%;
  transform: translateX(-50%);
}

/* 口 */
.mouth {
  top: 23px;
  left: 50%;
  width: 70px;
  height: 15px;
  transform: translateX(-50%);
}

.mouth::before,
.mouth::after {
  box-sizing: border-box;
  width: 35px;
  height: 15px;
  content: "";
  border: solid 5px var(--tiger-border);
  border-top: 0;
  border-radius: 0 0 75px 75px;
}

.mouth::before {
  left: 0;
}

.mouth::after {
  left: 50%;
}

/* ひげ */
.beard {
  top: 67%;
  right: var(--right);
  left: var(--left);
  width: 25px;
  height: 3px;
  background-color: var(--tiger-border);
}

.beard::before,
.beard::after {
  right: calc(var(--rotate) * -5px);
  width: 25px;
  height: 3px;
  background-color: var(--tiger-border);
}

.beard::before {
  top: -13px;
  transform: rotate(calc(var(--rotate) * 20deg));
}

.beard::after {
  top: 13px;
  transform: rotate(calc(var(--rotate) * -20deg));
}

/* 口周りの白い部分 */
.around-mouth {
  bottom: 0;
  left: 50%;
  width: 150px;
  height: 100px;
  background-color: white;
  border-radius: 50% / 80% 80% 20% 20%;
  transform: translateX(-50%);
}

/* 模様(上) */
.top-pattern {
  left: 50%;
  width: 20px;
  height: 70px;
  background-color: var(--tiger-border);
  border-radius: 50% / 0% 0% 100% 100%;
  transform: translateX(-50%);
}

.top-pattern::before,
.top-pattern::after {
  left: 50%;
  height: 15px;
  background-color: var(--tiger-border);
  border-radius: 50% / 70% 70% 30% 30%;
  transform: translateX(-50%);
}

.top-pattern::before {
  top: 20%;
  width: 70px;
}

.top-pattern::after {
  top: 55%;
  width: 60px;
}

/* 模様(左右) */
.side-pattern {
  top: 50%;
  right: var(--right);
  width: 70px;
  height: 15px;
  background-color: var(--tiger-border);
  border-radius: 50%;
  transform: translateX(calc(var(--rotate) * -50%))
    rotate(calc(var(--rotate) * -15deg));
}

.side-pattern::before,
.side-pattern::after {
  position: absolute;
  width: 70px;
  height: 15px;
  background-color: var(--tiger-border);
  border-radius: 50%;
}

.side-pattern::before {
  top: -25px;
  left: calc(var(--rotate) * 10px);
}

.side-pattern::after {
  bottom: -25px;
  left: calc(var(--rotate) * -10px);
}