JSFiddle - React, Tailwind, and code Playground

by Alvaro Montoro

HTML

<div class="canvas">
  <div class="beard"></div>
  <div class="head"></div>
  <div class="eyes"></div>
  <div class="cheeks"></div>
  <div class="mustache"></div>
  <div class="mustache"></div>
</div>

CSS

.canvas {
  --skin: #fca;
  --eyes: #630a;
  --cheeks: #f001;
  --beard: #eee;
  --mustache: #fff;
  width: 80vmin;
  height: 80vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #ddd;
  background-image:
    repeating-linear-gradient(transparent 0 9.8%, #ddd 0 10%),
    repeating-linear-gradient(to right, transparent 0 9.8%, #ddd 0 10%);
}

.head {
  position: absolute;
  top: 10%;
  left: 50%;
  border-radius: 50%;
  width: 25%;
  height: 25%;
  transform: translate(-50%, 0);
  background: var(--skin);
}


.eyes {
  position: absolute;
  top: 23%;
  left: 45%;
  width: 2%;
  height: 2%;
  background: var(--eyes);
  border-radius: 50%;
  box-shadow: 6.66vmin 0 var(--eyes);
}

.cheeks {
  position: absolute;
  top: 25.5%;
  left: 43%;
  width: 5%;
  height: 3%;
  background: var(--cheeks);
  border-radius: 50%;
  box-shadow: 7.25vmin 0 var(--cheeks);
}


.beard {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 30%;
  height: 40%;
  background: var(--beard);
  transform: translate(-50%, 0);
  border-radius: 100% / 120% 120% 80% 80%;
}

.mustache {
  position: absolute;
  top: 31%;
  left: 51%;
  width: 10%;
  height: 10%;
  background: var(--mustache);
  border-radius: 100% 20% 100% 0;
  transform-origin: top right;
  transform: translate(-100%, 0) rotate(25deg);
}

.mustache + .mustache {
  left: 49%;
  border-radius: 20% 100% 0 100%;
  transform-origin: top left;
  transform: rotate(-25deg);
}