A CodePen by George Norris. Responsive tDR 'Angry Man'

index.slim

.container
  .man
    .head
      .face
        .eyes
          .eye.left
          .eye.right
        .mouth
    .arms
    .legs
      .leg.left
      .leg.right


.message
  a href='http://kck.st/ZxBVBA'
    | Inspired by <br>
    | The Designers Republic
  

style.sass

@import "compass"
$sans-stack: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif
$black: #161616 

body, html
  height: 100%
  min-height: 100%
  
.head, .eyes, .eye, 
.mouth, .arms, .legs, .leg
  margin: 0
  height: 0

.arms, .head, .leg, .mouth
  background-color: $black

.container
  margin: 0 auto
  display: table
  width: 100%
  min-height: 100%
  max-width: 1000px
  
    
.man
  +translateZ(0)
  display: table-cell
  vertical-align: middle
  width: 85%
  height: 85%
  cursor: pointer
  *
    +box-sizing(border-box)
    margin: auto auto

    
.arms
  width: 55.5%
  padding-bottom: 8.75%
  
  
.head
  +border-radius(30% 30% 0 0 / 35% 35% 0 0)
  width: 42%
  padding-bottom: (42% - 10.8%)
  position: relative
  margin-bottom: 2.5%
  .face
    position: absolute
    content: ''
    width: 61%
    height: 71%
    background: white
    bottom: 0
    left: 50%
    margin-left: -30%
    .eyes
      margin-top: 10%
      padding-bottom: 41%
    .eye.left,
    .eye.right
      +transform-origin(0, 0)
      animation: blink 0.07s steps(1) infinite
      animation-fill-mode: both
      background-color: #ec008c
      width: 31%
      padding-bottom: 41%
    .eye.right
      +skewX(-30deg)
      float: right
    .eye.left
      +skewX(30deg)
      float: left
    .mouth
      background: $black
      margin: 0 11%
      height: 41%
      position: relative
      &:after
        $mouth-width: 45%
        content: ''
        background: white
        position: absolute
        top: 0
        margin-left: -($mouth-width/2)
        width: $mouth-width
        left: 50%
        height: 50%
        
      
.legs
  width: 37%
  .leg
    width: 24.55%
    padding-bottom: 24.25%
    &.left
      float: left
      +rotate(-20)
      +skewX(-30deg)
    &.right
      float: right
      +rotate(20)
      +skewX(30deg)
    
        
.man
  animation: bounceIn 0.5s
  animation-fill-mode: both    
  

@keyframes blink
  0%
    background-color: #ec008c
  50%
    background-color: complement(#ec008c)

  
@keyframes bounceIn
  0%
    opacity: 0
    +scale(0.3)
  50%
    opacity: 1
    +scale(1.05)
  70%
    +scale(0.9)
  100%
    +scale(1)


.message
  text-align: right
  position: absolute
  bottom: 35px
  right: 30px
  letter-spacing: -4px
  line-height: 0.8em
  font:
    family: $sans-stack
    weight: 700
    size: 2.25em
  a:link, a:visited
    color: $black
    display: block
    text-decoration: none
  a:hover
    color: #fe271a