<div class="face-1"></div>
<div class="face-2"></div>
<div class="face-3"></div>
<div class="face-4"></div>
<div class="face-5"></div>

<div class="eyebrow"></div>

<div class="eye">
	<div class="eye-inner-1"></div>
	<div class="eye-inner-2"></div>
	<div class="eye-inner-3"></div>
	<div class="eye-inner-4"></div>
	<div class="eye-inner-5"></div>
	<div class="eye-inner-6"></div>
</div>

<div class="eyebrow eyebrow-right"></div>

<div class="eye eye-right">
	<div class="eye-inner-1"></div>
	<div class="eye-inner-2"></div>
	<div class="eye-inner-3"></div>
	<div class="eye-inner-4"></div>
	<div class="eye-inner-5"></div>
	<div class="eye-inner-6"></div>
</div>

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

<div class="mouth-1"></div>
<div class="mouth-2"></div>
<div class="mouth-3"></div>
<div class="mouth-4"></div>
<div class="mouth-5"></div>
<div class="mouth-6"></div>
// colors
$bg-color: #000;
$face-color: #d8986e;
$eyebrow-color: #9b3924;
$eyelash-color: #000;
$eye-color: #fff;
$eyeball-color: #000;
$nose-color: #943722;
$mouth-color: #7e2e1d;
$mouth-line-color: #451910;

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;
    }
  }
}

.face {
  &-1 {
    width: 30vmin;
    height: 50vmin;
    background: $face-color;
    top: -25vmin;
    left: -21vmin;
    transform: rotate(-6deg);
    border-radius: 0 0 0 1vmin;

    &::before {
      width: 30vmin;
      height: 50vmin;
      background: $face-color;
      top: 3vmin;
      left: 20.2vmin;
      transform: rotate(11deg);
      border-radius: 0 0 1vmin 0;
    }

    &::after {
      width: 28vmin;
      height: 20vmin;
      background: $bg-color;
      top: 2.4vmin;
      left: -0.5vmin;
      transform: rotate(6deg);
      border-radius: 0% 100% 51% 49% / 86% 42% 58% 14%;
      box-shadow: 4vmin -7.5vmin 0 0.5vmin $bg-color,
        -1vmin -5vmin 0 0.3vmin $bg-color, 32vmin -12vmin 0 4.5vmin $bg-color;
    }
  }

  &-2 {
    width: 25.4vmin;
    height: 14vmin;
    background: $face-color;
    top: -58vmin;
    left: 28.5vmin;
    transform: rotate(11deg);
    border-radius: 50% 65% 100% 0% / 100% 100% 0% 0%;

    &::before {
      width: 25vmin;
      height: 26vmin;
      background: $face-color;
      top: 40.3vmin;
      left: 0.9vmin;
      transform: rotate(28deg);
      border-radius: 0 0 1.5vmin 0;
    }

    &::after {
      width: 26vmin;
      height: 26vmin;
      background: $face-color;
      top: 42vmin;
      left: -11.8vmin;
      transform: rotate(-50deg);
      border-radius: 0 0 0 1vmin;
    }
  }

  &-3 {
    width: 17vmin;
    height: 10vmin;
    background: $face-color;
    top: 61.4vmin;
    border-radius: 0 0 5vmin 5vmin;

    &::before {
      width: 17.5vmin;
      height: 10vmin;
      background: $face-color;
      top: -0.5vmin;
      left: 0.7vmin;
      border-radius: 0 0 5vmin 5vmin;
    }

    &::after {
      width: 17.5vmin;
      height: 10vmin;
      background: $face-color;
      top: -0.5vmin;
      left: -1.1vmin;
      border-radius: 0 0 5vmin 5vmin;
    }
  }

  &-4 {
    width: 4vmin;
    height: 8vmin;
    background: $bg-color;
    top: 30vmin;
    left: 48.6vmin;
    transform: rotate(16deg);

    &::before {
      width: 4vmin;
      height: 6vmin;
      background: $bg-color;
      top: 4.5vmin;
      left: -0.5vmin;
      transform: rotate(12deg);
    }
  }

  &-5 {
    width: 4vmin;
    height: 8vmin;
    background: $bg-color;
		top: 30vmin;
    left: -48.6vmin;
    transform: rotate(-16deg);

    &::before {
      width: 4vmin;
      height: 6vmin;
      background: $bg-color;
      top: 4.5vmin;
      left: 0.5vmin;
      transform: rotate(-12deg);
    }
  }
}

.eyebrow {
  width: 19vmin;
  height: 3vmin;
  background: $eyebrow-color;
  top: -20vmin;
  left: -28vmin;
  transform: rotate(15deg);
  border-radius: 5vmin 5vmin 0 0;
}

.eyebrow-right {
  left: 28vmin;
  transform: rotate(-15deg) scaleX(-1);
}

.eye {
  &-inner {
    &-1 {
      width: 10vmin;
      height: 5.5vmin;
      background: rgba($eye-color, 0.3);
      top: -5.2vmin;
      left: -30.5vmin;
      transform: rotate(-5deg) skewX(10deg);
      border-radius: 0 0 5vmin 5vmin;

      &::before {
        width: 10vmin;
        height: 5.5vmin;
        background: $eye-color;
        left: 0.7vmin;
        border-radius: 0 0 5vmin 5vmin;
      }

      &::after {
        width: 8vmin;
        height: 4vmin;
        background: $eye-color;
        top: 1.4vmin;
        left: 3.5vmin;
        transform: skewX(-20deg) rotate(-10deg);
        border-radius: 50%;
      }
    }

    &-2 {
      width: 7vmin;
      height: 4vmin;
      background: $eyelash-color;
      top: -9.5vmin;
      left: -25vmin;
      transform: skewX(35deg) rotate(5deg);
      border-radius: 0 8vmin 0 0;

      &::before {
        width: 5vmin;
        height: 3vmin;
        background: $eyelash-color;
        top: -0.4vmin;
        left: 1.2vmin;
        transform: rotate(-10deg);
        border-radius: 0 8vmin 0 0;
      }

      &::after {
        width: 7vmin;
        height: 3vmin;
        background: $eyelash-color;
        top: -0.4vmin;
        left: -2.5vmin;
        transform: skewX(-35deg) rotate(-7deg);
        border-radius: 50%;
      }
    }

    &-3 {
      width: 4vmin;
      height: 2.5vmin;
      background: $eyelash-color;
      top: -10.7vmin;
      left: -36.3vmin;
      transform: rotate(10deg);
      border-radius: 2vmin 0 0 0;

      &::before {
        width: 2.5vmin;
        height: 1.1vmin;
        background: $eyelash-color;
        top: 1.5vmin;
        left: -1.3vmin;
        transform: rotate(-46deg) skewX(-10deg);
        border-radius: 0 0 0 100%;
      }
    }

    &-4 {
      width: 5.5vmin;
      height: 3.5vmin;
      background: $eye-color;
      top: -8.5vmin;
      left: -22.7vmin;
      transform: skewX(35deg) rotate(4deg);
      border-radius: 0 8vmin 0 0;

      &::before {
        width: 7vmin;
        height: 3.5vmin;
        background: $eye-color;
        top: -0.35vmin;
        left: -3.9vmin;
        transform: rotate(4deg) skewX(-35deg);
        border-radius: 5vmin 5vmin 0 0;
        box-shadow: 0.8vmin 0.1vmin 0 0.1vmin $eye-color,
          -0.2vmin 0.1vmin 0 0.1vmin $eye-color;
      }

      &::after {
        width: 2.4vmin;
        height: 1vmin;
        background: $eye-color;
        top: 1.7vmin;
        left: -5.8vmin;
        transform: rotate(-22deg);
      }
    }

    &-5 {
      width: 1.2vmin;
      height: 0.4vmin;
      background: $eye-color;
      top: -5.3vmin;
      left: -16.5vmin;
      transform: skewX(30deg);

      &::before {
        width: 1vmin;
        height: 2vmin;
        background: $face-color;
        top: -3.8vmin;
        transform: rotate(-32deg);
      }

      &::after {
        width: 1vmin;
        height: 1vmin;
        background: $face-color;
        top: -0.3vmin;
        left: 1vmin;
        transform: skewX(-30deg);
      }
    }

    &-6 {
      width: 5vmin;
      height: 5vmin;
      background: $eyeball-color;
      top: -8.5vmin;
      left: -28vmin;
      border-radius: 50%;

      &::before {
        width: 00.7vmin;
        height: 0.7vmin;
        background: $eye-color;
        top: 0.7vmin;
        left: 1.9vmin;
        border-radius: 50%;
      }

      &::after {
        width: 1vmin;
        height: 1vmin;
        background: $eye-color;
        top: 1.2vmin;
        left: 2.9vmin;
        border-radius: 50%;
      }
    }
  }

  &-right {
    transform: scaleX(-1);

    .eye-inner-6 {
      &::before {
        width: 1vmin;
        height: 1vmin;
        top: 1vmin;
        left: 1.4vmin;
      }

      &::after {
        width: 0.7vmin;
        height: 0.7vmin;
        top: 0.7vmin;
        left: 2.7vmin;
      }
    }
  }
}

.nose {
  &-1 {
    width: 5vmin;
    height: 3vmin;
    background: $nose-color;
    top: -8.3vmin;
    left: -12vmin;
    transform: rotate(20deg);
    border-radius: 0 1.5vmin 0 100%;

    &::before {
      width: 4vmin;
      height: 1.5vmin;
      background: $face-color;
      top: 0.7vmin;
      left: -1vmin;
      transform: rotate(30deg);
      border-radius: 0 1vmin 0 0;
    }

    &::after {
      width: 1vmin;
      height: 5vmin;
      background: $face-color;
      top: 1.6vmin;
      left: 2.5vmin;
      transform: rotate(-20deg);
    }
  }

  &-2 {
    width: 2.3vmin;
    height: 18vmin;
    background: $nose-color;
    top: 11vmin;
    left: -9.5vmin;

    &::before {
      width: 6vmin;
      height: 5vmin;
      background: $nose-color;
      top: 15.4vmin;
    }

    &::after {
      width: 7vmin;
      height: 7vmin;
      background: $face-color;
      top: 14vmin;
      left: 2.1vmin;
      transform: rotate(4deg);
      border-radius: 0 0 0 6vmin;
    }
  }

  &-3 {
    width: 2vmin;
    height: 5.5vmin;
    background: $nose-color;
    top: 28.3vmin;
    left: -12.8vmin;
    border-radius: 2vmin 0 0 1.6vmin;

    &::before {
      width: 1vmin;
      height: 3vmin;
      background: $face-color;
      top: -0.54vmin;
      left: -0.3vmin;
      transform: rotate(42deg);
    }
  }
}

.mouth {
  &-1 {
    width: 16vmin;
    height: 8vmin;
    background: $mouth-color;
    top: 48vmin;
    left: -0.3vmin;
    border-radius: 0 0 7.5vmin 7.5vmin;

    &::before {
      width: 5vmin;
      height: 3vmin;
      background: $mouth-color;
      top: 3vmin;
      left: 12vmin;
      transform: rotate(-10deg);
    }

    &::after {
      width: 5vmin;
      height: 3vmin;
      background: $mouth-color;
      top: 2.8vmin;
      left: -0.7vmin;
      transform: rotate(15deg);
    }
  }

  &-2 {
    z-index: 3;
    width: 7vmin;
    height: 3vmin;
    background: $face-color;
    top: 53vmin;
    left: 13.8vmin;
    transform: rotate(-28deg);
    border-radius: 80% 0 0 0;

    &::before {
      width: 7vmin;
      height: 3vmin;
      background: $face-color;
      top: -6.5vmin;
      left: -12.2vmin;
      transform: rotate(58deg);
      border-radius: 0 100% 0 0;
    }
  }

  &-3 {
    z-index: 3;
    width: 8vmin;
    height: 5vmin;
    background: $face-color;
    top: 42.7vmin;
    left: 10vmin;
    border-radius: 0 0 0 100%;

    &::before {
      width: 8vmin;
      height: 5vmin;
      background: $face-color;
      left: -10vmin;
      border-radius: 0 0 100% 0;
    }

    &::after {
      width: 0;
      height: 0;
      border-top: 2.5vmin solid $face-color;
      border-left: 3.8vmin solid transparent;
      border-right: 3.8vmin solid transparent;
      top: 2vmin;
      left: -4.9vmin;
      box-shadow: 0 -2vmin 0 0.5vmin $face-color;
    }
  }

  &-4 {
    width: 5vmin;
    height: 0.2vmin;
    background: $mouth-line-color;
    top: 47.9vmin;
    left: 12vmin;
    transform: rotate(-2deg);
    border-radius: 0 0 0 1vmin;

    &::before {
      width: 5vmin;
      height: 0.2vmin;
      background: $mouth-line-color;
      top: -0.4vmin;
      left: -12.5vmin;
      transform: rotate(1deg);
      border-radius: 0 0 0 1vmin;
    }

    &::after {
      width: 2vmin;
      height: 2vmin;
      background: transparent;
      top: -1.9vmin;
      left: -4.8vmin;
      border-radius: 50%;
      border: 0.23vmin solid $mouth-line-color;
    }
  }

  &-5 {
    width: 2vmin;
    height: 2vmin;
    background: $mouth-color;
    top: 46.4vmin;
    left: 1.4vmin;
    transform: rotate(-12deg);

    &::before {
      width: 2vmin;
      height: 2vmin;
      background: $mouth-color;
      top: -0.3vmin;
      left: -1.4vmin;
      transform: rotate(28deg);
    }

    &::after {
      width: 2vmin;
      height: 0.2vmin;
      background: $mouth-line-color;
      top: 2vmin;
      left: 0.4vmin;
    }
  }

  &-6 {
    width: 1.6vmin;
    height: 0.2vmin;
    background: $mouth-line-color;
    top: 47.9vmin;
    left: 6vmin;
    transform: rotate(4deg);
    border-radius: 1vmin 0 0 0;

    &::before {
      width: 2vmin;
      height: 0.2vmin;
      background: $mouth-line-color;
      top: 0.4vmin;
      left: -4.9vmin;
      transform: rotate(10deg);
      border-radius: 1vmin 0 0 0;
    }

    &::after {
      width: 1.6vmin;
      height: 0.2vmin;
      background: $mouth-line-color;
      top: 0.4vmin;
      left: -6.2vmin;
      transform: rotate(-5deg);
    }
  }
}
View Compiled
// design source
// https://dribbble.com/shots/14571164-Queen-s-Gambit/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.