Frankenstein

HTML -

<!-- DAILY CSS IMAGES 16 - FRANKENSTEIN -->

<div class="canvas">
  <div class="head">
    <div class="earring"></div>
    <div class="hair"></div>
    <div class="head-copy"></div>
    <div class="hair"></div>
    <div class="scar">
    <ul class="scars">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    </div>
    <div class="eyebrow"></div>
    <div class="eyes">
      <div class="left">
        <div class="inner-eye"></div>
      </div>
      <div class="right">
        <div class="inner-eye"></div>
      </div>
    </div>
    <div class="mouth">
      <div class="teeth"></div>
    </div>
    <div class="neck">
      <div class="bolts">
        <div class="left"></div>
        <div class="right"></div>
      </div>
    </div>
  </div>
  
</div>

---------------------------------------------------------------

CSS-

/* COLORS */
$bg: #222233
$lgreen: #00CF80
$dgreen: #3CB572
$silver: #AAAAAA
$black: #383838
$grey: #494949
$blood: #AA5C5C

/* MIXINS */

@mixin pseudo ($position: absolute, $display: block, $content: '')
  position: $position
  display: $display
  content: $content

@mixin eye-blink ($name: blink, $timef: linear, $dur: 5s, $delay: 2s, $iter: infinite, $fill: forward)
  animation-name: $name
  animation-timing-function: $timef
  animation-duration: $dur
  animation-delay: $delay
  animation-iteration-count: $iter
  animation-fill-mode: $fill

*
  box-sizing: border-box

body, html
  height: 100%
  width: 100%
  background: $bg

.canvas
  position: relative
  top: 15%
  margin: auto
  height: 350px
  width: 350px
  background: $bg

/* FRANKENSTEIN'S MONSTER*/

/* HEAD, EARS, EYES, HAIR */

%ears
  top: 55%
  height: 20%
  width: 25%
  background: $lgreen
  border-radius: 50%

%inner-ears
  top: 60%
  height: 10%
  width: 8%
  background: $dgreen

%eyes
  position: absolute
  height: 15px
  width: 12px
  background: $black
  border-radius: 50% / 25%
  transform-origin: 100%

%bone
  top: -12px
  height: 8px
  width: 40px
  border-top: 2px solid $lgreen
  border-left: 2px solid transparent
  border-right: 2px solid transparent
  border-radius: 40%
  z-index: 3

%eyebrow  
  height: 7px
  width: 25px
  background: $black
  border-radius: 5px

.hair
  position: absolute
  top: -1px
  background: $black
  width: 100%
  height: 15%
  border-radius: 1em 1em 0 0
  z-index: 2

  &::after
    @include pseudo
    top: 80%
    height: 100%
    width: 100%
    background: linear-gradient(45deg, $black 0, transparent 0%, transparent 66.667%, #383838 0%), linear-gradient(-45deg, transparent 33.333%, transparent 0%, transparent 66.667%, #383838 0%)
    background-size: 30px 30px
    background-repeat: repeat-X
  
.head
  position: absolute
  top: 5%
  left: 27.5%
  height: 50%
  width: 45%
  background: $lgreen
  border-radius: 2em 2em 3em 3em
  
  &::before
    @include pseudo
    @extend %ears
    left: -11%
  
  &::after
    @include pseudo
    @extend %ears
    right: -11%
  
.head-copy
  position: absolute
  height: 100%
  width: 100%
  background: $lgreen
  border-left: 2px solid $dgreen
  border-right: 2px solid $dgreen
  border-bottom: 1px solid $dgreen
  border-radius: 2em 2em 3em 3em
  z-index: 2

  &::before
    @include pseudo
    @extend %inner-ears
    left: -8%
    border-radius: 50% 0 0 50%
  
  &::after
    @include pseudo
    @extend %inner-ears
    right: -8%
    border-radius: 0 50% 50% 0  
  
.eyebrow
  position: absolute
  top: 50%
  width: 100%
  z-index: 4

  &::before
    @include pseudo
    @extend %eyebrow
    top: 1px
    left: 30%
    transform: rotate(10deg)
    
  &::after
    @include pseudo
    @extend %eyebrow
    right: 30%
    transform: rotate(-10deg)
  
.eyes
  position: absolute
  top: 52%
  width: 100%
  z-index: 3

  &::before
    @include pseudo
    @extend %bone
    left: 20%
    transform: rotate(-5deg)
    
  &::after
    @include pseudo
    @extend %bone
    right: 20%
    transform: rotate(5deg)

  .left
    @extend %eyes
    left: 34% 
    @include eye-blink
  
  .right
    @extend %eyes
    right: 34%  
    @include eye-blink

  .inner-eye
    position: absolute
    top: 15%
    left: 1px
    background: #fff
    height: 4px
    width: 4px
    border-radius: 50%  
  
.earring
  position: absolute
  bottom: 22%
  left: -4%
  background: $silver
  height: 10px
  width: 3px
  transform: rotate(10deg)

.scar
  position: absolute
  top: 35%
  left: 15%
  height: 2px
  width: 40%
  background: $grey
  z-index: 4
  transform: rotate(-15deg)

.scars
  position: absolute
  top: -9px
  width: 100%
  margin: 0
  padding: 0
  list-style-type: none
  text-align: center

  li
    margin-top: -10px
    display: inline-block
    background: $grey
    height: 8px
    width: 2px
    margin: 0 3px
  
/* MOUTH, NOSE */ 

%teeth
  width: 10px
  background: #fff
  border-radius: 1px 1px 0 0

.mouth
  position: absolute
  bottom: 15%
  left: 35%
  height: 3px
  width: 30%
  background: $black
  z-index: 2
  
  &::before
    @include pseudo
    top: -28px
    left: 15px
    height: 5px
    width: 12px
    border-radius: 0 0 1em 1em
    border-bottom: 3px solid $black
    border-left: 3px solid $black
    border-right: 3px solid $black
    
.teeth
  &::before
    @include pseudo
    @extend %teeth
    top: -5px
    left: 5px
    height: 5px
    border-right: 1px solid $silver
  
  &::after
    @include pseudo
    @extend %teeth
    top: -4px
    left: 16px
    height: 4px
  
/* NECK, BOLTS */

%bolts
  position: absolute
  top: 40%
  height: 35%
  width: 25%
  background: $silver

%end-of-bolt
  top: -4px
  background: $silver
  height: 21px
  width: 8px

.neck
  position: absolute
  bottom: -20%
  left: 30%
  height: 25%
  width: 40%
  background: $lgreen
  border: 2px solid $dgreen
  border-radius: 0 0 5px 5px
  z-index: 1

.bolts
  .left
    @extend %bolts
    left: -22%
    border-right: 2px solid $blood
    border-radius: 5px 0 0 5px
  
    &::before
      @include pseudo
      @extend %end-of-bolt
      left: -5px
      border-radius: 1em
  
  .right
    @extend %bolts
    right: -22%
    border-left: 2px solid $blood
    border-radius: 0 5px 5px 0
  
    &::before
      @include pseudo
      @extend %end-of-bolt
      right: -5px
      border-radius: 1em
  


/* ANIMATIONS /*  

@keyframes blink
  0%
    transform: scale(1)
  1%
    transform: translateY(5px) scaleY(0.1)
  3%, 100%
    transform: scale(1)