CodePen Embed - Challenge : Hero CSS Octocat

.hero
  .octocat
    .octocat__face
      .octocat__ear.octocat__ear--left
      .octocat__ear.octocat__ear--right
      .octocat__face-inner
        .octocat__eye.octocat__eye--left
          span
        .octocat__eye.octocat__eye--right
          span
        .octocat__nose
      .octocat__beard.octocat__beard--left
      .octocat__beard.octocat__beard--right
    .octocat__body
      .octocat__parts-top
      - for (var x = 0; x < 3; x++)
        .octocat__parts
          span.octocat__part
      .octocat__parts        
        - for (var x = 0; x < 3; x++)
          span.octocat__part
        - for (var x = 0; x < 5; x++)
          span.dot
      .octocat__parts
        span.octocat__part
  .shadow

View Compiled

$BLACK: #201f1f;
$FACE: #f3cab3;

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

@mixin animation($animation-name) {
  -webkit-animation: $animation-name;
  -moz-animation: $animation-name;
  animation: $animation-name;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

@mixin prefixes($property, $value) {
  @each $prefix in -webkit-, -moz-, -ms-, -o-, "" {
    #{$prefix}#{$property}: $value;
  }
}

.hero {
  position: relative;
  top: calc(50% - 190px);
  left: calc(50% - 157px);
  width: 380px;
  height: 340px;
}

.octocat {
  position: relative;
  width: 380px;
  height: 315px;
  @include animation(move 2s linear alternate infinite);

  &__face {
    position: absolute;
    top: 15px;
    left: 78px;
    width: 216px;
    height: 165px;
    border-radius: 44%;
    background-color: $BLACK;
  }
  &__ear {
    width: 57px;
    height: 100px;
    position: absolute;
    z-index: -1;
    &:before,
    &:after {
      background-color: $BLACK;
    }
    &--left {
      @include prefixes(transform, rotate(-36deg) translateX(19px) translateY(-2px));

      &:before {
        top: 0;
        left: 0;
        width: 42px;
        height: 100px;
        border-radius: 100% 0 0 0;
      }
      &:after {
        top: 0;
        left: 41px;
        width: 28px;
        height: 100px;
        border-radius: 0 100% 0 0;
        @include prefixes(transform, rotate(-8deg) translateX(3px) translateY(-2px));
      }
    }
    &--right {
      right: 0;
      @include prefixes(transform, rotate(36deg) translateX(-40px) translateY(-2px));

      &:before {
        top: 0;
        left: 0;
        width: 42px;
        height: 100px;
        border-radius: 100% 0 0 0;
      }
      &:after {
        top: 0;
        left: 41px;
        width: 28px;
        height: 100px;
        border-radius: 0 100% 0 0;
        @include prefixes(transform, rotate(-8deg) translateX(3px) translateY(-2px));
      }
    }
  }
  &__face-inner {
    position: absolute;
    bottom: 10px;
    left: 60px;
    border-radius: 30px;
    width: 100px;
    height: 85px;
    background-color: $FACE;
    &:before {
      bottom: 0px;
      left: -30px;
      border-radius: 37px 37px 50px 53px;
      width: 98px;
      height: 85px;
      background-color: $FACE;
    }
    &:after {
      bottom: 0px;
      right: -30px;
      border-radius: 53px 37px 50px 37px;
      width: 98px;
      height: 85px;
      background-color: $FACE;
    }
  }
  &__body {
    position: absolute;
    top: 178px;
    left: 130px;
    width: 114px;
    height: 110px;
  }
  &__parts-top {
    position: absolute;
    top: 0px;
    left: 16px;
    width: 85px;
    height: 20px;
    overflow: hidden;
    &:before {
      top: -8px;
      left: 0;
      border-radius: 50% 50% 0 0;
      width: 85px;
      height: 65px;
      background-color: $BLACK;
    }
  }
  &__parts {
    position: absolute;
    top: 11px;
    left: 14px;
    width: 18px;
    height: 71px;
    border-radius: 40% 13% 30% 13%;
    background-color: $BLACK;
    &:before {
      top: 57px;
      left: 0px;
      width: 18px;
      height: 21px;
      border-radius: 50% 0 50% 0%;
      background-color: $BLACK;
      @include prefixes(transform, rotate(-5deg));
    }
    &:after {
      top: 1px;
      left: 12px;
      width: 10px;
      height: 26px;
      border-radius: 0px 36px 24px 15px;
      background-color: $BLACK;
      @include prefixes(transform, rotate(-28deg));
    }
    .octocat__part {
      position: absolute;
      top: 75px;
      left: -12px;
      width: 25px;
      height: 8px;
      border-radius: 0px 36px 24px 15px;
      background-color: $BLACK;
      @include prefixes(transform, rotate(-27deg) rotateY(180deg));

      &:before {
        top: -4px;
        left: -8px;
        width: 26px;
        height: 14px;
        border-radius: 50%;
        background-color: $BLACK;
        @include prefixes(transform, rotate(-27deg) rotateY(180deg));
      }
      &:after {
        top: -1px;
        left: -2px;
        width: 26px;
        height: 11px;
        border-radius: 50%;
        background-color: $BLACK;
        @include prefixes(transform, rotate(5deg));
      }
    }
    &:nth-of-type(2) {
      top: 9px;
      left: 37px;
      width: 18px;
      height: 89px;
      border-radius: 0 0 27% 0;
      &:before {
        top: 8px;
        left: 1px;
        width: 10px;
        height: 17px;
        @include prefixes(transform, rotate(-13deg));
      }
      &:after {
        top: 81px;
        left: -5px;
        width: 17px;
        height: 13px;
        border-radius: 0px 36px 24px 15px;
        @include prefixes(transform, rotate(-65deg));
      }
      .octocat__part {
        position: absolute;
        top: 85px;
        left: -4px;
        width: 14px;
        height: 10px;
        border-radius: 26px 36px 24px 8px;
        @include prefixes(transform, rotate(-30deg));

        &:before {
          top: -1px;
          left: -5px;
          width: 15px;
          height: 12px;
          border-radius: 50% 32% 50% 6px;
          @include prefixes(transform, rotate(20deg));
        }
        &:after {
          top: -2px;
          left: -2px;
          width: 22px;
          height: 13px;
          border-radius: 50%;
          @include prefixes(transform, rotate(11deg));
        }
      }
    }
    &:nth-of-type(3) {
      top: 9px;
      left: 60px;
      width: 18px;
      height: 89px;
      border-radius: 0 0 0 27%;
      &:before {
        top: 57px;
        left: 0px;
        width: 18px;
        height: 28px;
        border-radius: 50% 0 0 50%;
        @include prefixes(transform, rotate(-1deg));
      }
      &:after {
        top: 81px;
        left: 5px;
        width: 17px;
        height: 13px;
        border-radius: 0px 36px 24px 15px;
        @include prefixes(transform, rotate(65deg));
      }
      .octocat__part {
        position: absolute;
        top: 85px;
        left: 7px;
        width: 14px;
        height: 10px;
        border-radius: 26px 36px 24px 8px;
        @include prefixes(transform, rotate(30deg));

        &:before {
          top: -1px;
          left: -5px;
          width: 15px;
          height: 12px;
          border-radius: 50% 32% 50% 6px;
          @include prefixes(transform, rotate(20deg));
        }
        &:after {
          top: -2px;
          left: -2px;
          width: 22px;
          height: 13px;
          border-radius: 50%;
          @include prefixes(transform, rotate(11deg));
        }
      }
    }
    &:nth-of-type(4) {
      top: 9px;
      left: 84px;
      width: 18px;
      height: 71px;
      border-radius: 0 40% 30% 13%;
      .octocat__part {
        top: 75px;
        left: 5px;
        width: 25px;
        height: 8px;
        border-radius: 0px 36px 24px 15px;
        @include prefixes(transform, rotate(24deg));

        &:before {
          top: -4px;
          left: -8px;
          width: 26px;
          height: 14px;
          border-radius: 50%;
          @include prefixes(transform, rotate(20deg));
        }
        &:after {
          top: -1px;
          left: -2px;
          width: 26px;
          height: 11px;
          border-radius: 50%;
          @include prefixes(transform, rotate(5deg));
        }
      }
      &:before {
        top: 57px;
        left: 0px;
        width: 18px;
        height: 21px;
        border-radius: 50% 0 0 50%;
        @include prefixes(transform, rotate(-5deg));
      }
      &:after {
        top: 3px;
        left: -4px;
        width: 10px;
        height: 29px;
        border-radius: 0px 36px 24px 15px;
        @include prefixes(transform, rotate(-28deg));
      }
    }
    &:nth-of-type(5) {
      top: 11px;
      left: 0px;
      width: 16px;
      height: 38px;
      border-radius: 40% 13% 30% 13%;
      @include animation(handmove 3s linear alternate infinite);
      @include prefixes(transform-origin, right);
      @include prefixes(transform, rotate(70deg));

      &:before {
        top: 28px;
        left: -7px;
        width: 18px;
        height: 21px;
        border-radius: 0% 22% 50% 50%;
        @include prefixes(transform, rotate(38deg));
        background-color: $BLACK;
      }
      &:after {
        top: 10px;
        left: 8px;
        width: 10px;
        height: 26px;
        border-radius: 0px 36px 24px 15px;
        @include prefixes(transform, rotate(18deg));
      }
      .octocat__part {
        top: 57px;
        left: -52px;
        width: 25px;
        height: 8px;
        border-radius: 0px 36px 24px 15px;
        background-color: $BLACK;
        @include prefixes(transform, rotate(-41deg) rotateY(180deg) rotateX(180deg));

        &:nth-of-type(1) {
          top: 40px;
          left: -23px;
          width: 32px;
          height: 15px;
          border-radius: 16% 0% 34% 50%;
          @include prefixes(transform, rotate(-28deg));

          &:before {
            top: -2px;
            left: 5px;
            width: 26px;
            height: 6px;
            border-radius: 50%;
            @include prefixes(transform, rotate(-13deg));
          }
        }
        &:nth-of-type(2) {
          top: 47px;
          left: -40px;
          width: 42px;
          height: 14px;
          border-radius: 16% 0% 34% 50%;
          @include prefixes(transform, rotate(-21deg));

          &:before {
            top: -2px;
            left: 5px;
            width: 26px;
            height: 6px;
            border-radius: 50%;
            @include prefixes(transform, rotate(2deg));
          }
          &:after {
            top: -18px;
            left: 39px;
            width: 26px;
            height: 6px;
            border-radius: 50%;
            @include prefixes(transform, rotate(-46deg));
          }
        }
        &:nth-of-type(3) {
          &:before, &:after {
            content: none;
          }
        }
        &:nth-of-type(4) {
          top: 57px;
          left: -52px;
          width: 25px;
          height: 8px;
          border-radius: 0px 36px 24px 15px;
          @include prefixes(transform, rotate(-41deg) rotateY(180deg) rotateX(180deg));

          &:before {
            top: -4px;
            left: -8px;
            width: 26px;
            height: 14px;
            border-radius: 50%;
            background-color: $BLACK;
            @include prefixes(transform, rotate(20deg));
          }
          &:after {
            top: -1px;
            left: -2px;
            width: 26px;
            height: 11px;
            border-radius: 50%;
            background-color: $BLACK;
            @include prefixes(transform, rotate(5deg));
          }
        }
      }
    }
    &:nth-of-type(6) {
      &:after {
        @include prefixes(transform, rotate(28deg));
      }
      .octocat__part {
        &:before {
          content: none;
        }
      }
    }
  }
  .dot {
    position: absolute;
    width: 5px;
    height: 6px;
    left: 0px;
    top: 25px;
    background-color: #a0def3;
    border-radius: 50%;
    z-index: 10;
    &:before {
      width: 5px;
      height: 6px;
      left: 2px;
      top: -11px;
      background-color: #a0def3;
      border-radius: 50%;
    }
    &:after {
      width: 5px;
      height: 6px;
      left: -5px;
      top: 10px;
      background-color: #a0def3;
      border-radius: 50%;
      @include prefixes(transform, rotate(38deg));
    }
    &:nth-of-type(5) {
      width: 4px;
      height: 7px;
      left: -21px;
      top: 48px;
      @include prefixes(transform, rotate(63deg));

      &:before {
        width: 4px;
        height: 6px;
        left: -1px;
        top: -11px;
      }
      &:after {
        width: 4px;
        height: 6px;
        left: -3px;
        top: 11px;
        @include prefixes(transform, rotate(8deg));
      }
    }
    &:nth-of-type(6) {
      width: 3px;
      height: 4px;
      left: -46px;
      top: 60px;
      @include prefixes(transform, rotate(63deg));

      &:before {
        width: 3px;
        height: 5px;
        left: -2px;
        top: -9px;
      }
      &:after {
        content: none;
      }
    }
  }

  &__eye {
    position: absolute;
    top: 13px;
    width: 33px;
    height: 48px;
    border-radius: 50%;
    background-color: #fff;
    z-index: 1;
    &:before {
      top: 9px;
      width: 22px;
      height: 33px;
      border-radius: 50%;
      background-color: #ab5c53;
    }
    &:after {
      top: 15px;
      left: 11px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: #fff;
    }
    span {
      position: absolute;
      top: 0;
      width: 33px;
      height: 0;
      border-radius: 50%;
      background-color: $FACE;
      z-index: 10;
      @include animation(eye 4s linear alternate infinite);
    }
    &--left {
      left: -12px;
      span {
        left: 0;
      }
      &:before {
        left: 7px;
      }
    }
    &--right {
      right: -12px;
      span {
        right: 0;
      }
      &:before {
        right: 7px;
      }
    }
  }
  &__nose {
    position: absolute;
    bottom: 22px;
    left: 45px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ab5c53;
    z-index: 10;
    &:before {
      top: 4px;
      left: -5px;
      width: 20px;
      height: 14px;
      border-radius: 0 0 50% 50%;
      border-bottom: 2px solid #ab5c53;
    }
  }
  &__beard {
    position: absolute;
    top: 115px;
    border-top: 1px solid #201f1f;
    width: 89px;
    height: 20px;
    border-radius: 50%;
    &:before {
      top: 10px;
      border-top: 1px solid #201f1f;
      width: 89px;
      height: 20px;
      border-radius: 30%;
    }
    &--right {
      right: -68px;
      left: auto;
      @include prefixes(transform, rotate(2deg));

      &:before {
        @include prefixes(transform, rotate(2deg));
      }
    }
    &--left {
      right: auto;
      left: -68px;
      @include prefixes(transform, rotate(2deg));

      &:before {
        @include prefixes(transform, rotate(2deg));
      }
    }
  }
}

.shadow {
  position: absolute;
  left: calc(50% - 75px);
  bottom: 0;
  width: 150px;
  height: 20px;
  border-radius: 50%;
  background-color: #9edaef;
  @include animation(shadow 2s linear alternate infinite);
}

@include keyframes(move) {
  0% {
    top: 0px;
  }
  100% {
    top: 20px;
  }
}

@keyframes move {
  0% {
    top: 0px;
  }
  100% {
    top: 20px;
  }
}

@include keyframes(handmove) {
  0% {
    @include prefixes(transform, rotate(80deg));
  }
  100% {
    @include prefixes(transform, rotate(50deg));
  }
}

@include keyframes(shadow) {
  0% {
    left: calc(50% - 50px);
    width: 100px;
  }
  100% {
    left: calc(50% - 75px);
    width: 150px;
  }
}

@include keyframes(eye) {
  0% {
    height: 0;
  }
  48% {
    height: 0;
  }
  50% {
    height: 48px;
  }
  52% {
    height: 0;
  }
  100% {
    height: 0;
  }
}

// base
html, body {
  width: 100%;
  height: 100%;
}

html {
  overflow: hidden;
  background-color: #555;
}

body {
  margin: 0;
}

* {
  &:before,
  &:after {
    content: "";
    position: absolute;
  }
}

View Compiled

// （｀・ω・´）
// No images, just CSS.
// Chrome recommended.
// twitter.com/study_dedede

This Pen is owned by Deren on CodePen.

See more by @deren2525 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.