div.container
  div#hourglass
    div.outline
    div.fill
    div.curtain
    div.curtain
    div.sand-fall
    div.sand-fall
    div.sand

  div#ring1
    div
    div

  div#ring2
    div

div.container
  div#circle
    div
    div

  div#pinwheel1
    div.colors
      - for (var h = 0; h < 6; ++h) {
        div
      - }
    div.bw
      - for (var g = 0; g < 9; ++g) {
        div
      - }
      div
        - for (var gc = 0; gc < 4; ++gc) {
          div
        - }

  div#pinwheel2
    div.wrapper
      - for (var i = 0; i < 6; ++i) {
        div
      - }
View Compiled
$scale: 4;
$animOn: 1;
$anim1Dur: 6s;
$anim2_3Dur: 1.5s;
$anim4Dur: 0.375s;
$anim5_6Dur: 0.75s;
$pixel: 1px * $scale;
$ringW: 3px * $scale;
$ringB: 1px * ceil($scale/2);
$h: $pixel * 22;
$w: $pixel * 13;
$black: #000;
$white: #fff;
$pinwheelColor1: rgb(40,200,50) rgb(20,150,140) rgb(0,0,170) rgb(90,00,100) rgb(130,0,0) rgb(220,220,0);
$pinwheelColor2: rgb(255,60,50) rgb(255,160,0) rgb(255,210,0) rgb(70,190,30) rgb(0,150,250) rgb(180,90,210);
$pinwheelCircleW: $h * 0.7;

$circleSprite0: $pixel*5 0 $black,$pixel*6 0 $black,$pixel*7 0 $black,$pixel*8 0 $black,$pixel*9 0 $black,$pixel*10 $pixel*1 $black,$pixel*11 $pixel*1 $black,$pixel*12 $pixel*2 $black,$pixel*13 $pixel*3 $black,$pixel*13 $pixel*4 $black,$pixel*14 $pixel*5 $black,$pixel*14 $pixel*6 $black,$pixel*14 $pixel*7 $black,$pixel*14 $pixel*8 $black,$pixel*14 $pixel*9 $black,$pixel*13 $pixel*10 $black,$pixel*13 $pixel*11 $black,$pixel*12 $pixel*12 $black,$pixel*11 $pixel*13 $black,$pixel*10 $pixel*13 $black,$pixel*9 $pixel*14 $black,$pixel*8 $pixel*14 $black,$pixel*7 $pixel*14 $black,$pixel*6 $pixel*14 $black,$pixel*5 $pixel*14 $black,$pixel*4 $pixel*13 $black,$pixel*3 $pixel*13 $black,$pixel*2 $pixel*12 $black,$pixel*1 $pixel*11 $black,$pixel*1 $pixel*10 $black,0 $pixel*9 $black,0 $pixel*8 $black,0 $pixel*7 $black,0 $pixel*6 $black,0 $pixel*5 $black,$pixel*1 $pixel*4 $black,$pixel*1 $pixel*3 $black,$pixel*2 $pixel*2 $black,$pixel*3 $pixel*1 $black,$pixel*4 $pixel*1 $black,$pixel*7 $pixel*1 $white,$pixel*8 $pixel*1 $white,$pixel*9 $pixel*1 $white,$pixel*7 $pixel*2 $white,$pixel*8 $pixel*2 $white,$pixel*9 $pixel*2 $white,$pixel*10 $pixel*2 $white,$pixel*11 $pixel*2 $white,$pixel*7 $pixel*3 $white,$pixel*8 $pixel*3 $white,$pixel*9 $pixel*3 $white,$pixel*10 $pixel*3 $white,$pixel*11 $pixel*3 $white,$pixel*12 $pixel*3 $white,$pixel*7 $pixel*4 $white,$pixel*8 $pixel*4 $white,$pixel*9 $pixel*4 $white,$pixel*10 $pixel*4 $white,$pixel*11 $pixel*4 $white,$pixel*12 $pixel*4 $white,$pixel*7 $pixel*5 $white,$pixel*8 $pixel*5 $white,$pixel*9 $pixel*5 $white,$pixel*10 $pixel*5 $white,$pixel*11 $pixel*5 $white,$pixel*12 $pixel*5 $white,$pixel*13 $pixel*5 $white,$pixel*7 $pixel*6 $white,$pixel*8 $pixel*6 $white,$pixel*9 $pixel*6 $white,$pixel*10 $pixel*6 $white,$pixel*11 $pixel*6 $white,$pixel*12 $pixel*6 $white,$pixel*13 $pixel*6 $white,$pixel*7 $pixel*7 $white,$pixel*8 $pixel*7 $white,$pixel*9 $pixel*7 $white,$pixel*10 $pixel*7 $white,$pixel*11 $pixel*7 $white,$pixel*12 $pixel*7 $white,$pixel*13 $pixel*7 $white,$pixel*1 $pixel*7 $white,$pixel*2 $pixel*7 $white,$pixel*3 $pixel*7 $white,$pixel*4 $pixel*7 $white,$pixel*5 $pixel*7 $white,$pixel*6 $pixel*7 $white,$pixel*1 $pixel*8 $white,$pixel*2 $pixel*8 $white,$pixel*3 $pixel*8 $white,$pixel*4 $pixel*8 $white,$pixel*5 $pixel*8 $white,$pixel*6 $pixel*8 $white,$pixel*7 $pixel*8 $white,$pixel*1 $pixel*9 $white,$pixel*2 $pixel*9 $white,$pixel*3 $pixel*9 $white,$pixel*4 $pixel*9 $white,$pixel*5 $pixel*9 $white,$pixel*6 $pixel*9 $white,$pixel*7 $pixel*9 $white,$pixel*2 $pixel*10 $white,$pixel*3 $pixel*10 $white,$pixel*4 $pixel*10 $white,$pixel*5 $pixel*10 $white,$pixel*6 $pixel*10 $white,$pixel*7 $pixel*10 $white,$pixel*2 $pixel*11 $white,$pixel*3 $pixel*11 $white,$pixel*4 $pixel*11 $white,$pixel*5 $pixel*11 $white,$pixel*6 $pixel*11 $white,$pixel*7 $pixel*11 $white,$pixel*3 $pixel*12 $white,$pixel*4 $pixel*12 $white,$pixel*5 $pixel*12 $white,$pixel*6 $pixel*12 $white,$pixel*7 $pixel*12 $white,$pixel*5 $pixel*13 $white,$pixel*6 $pixel*13 $white,$pixel*7 $pixel*13 $white,$pixel*5 $pixel*1 $white,$pixel*6 $pixel*1 $white,$pixel*3 $pixel*2 $white,$pixel*4 $pixel*2 $white,$pixel*5 $pixel*2 $white,$pixel*6 $pixel*2 $white,$pixel*2 $pixel*3 $white,$pixel*3 $pixel*3 $white,$pixel*4 $pixel*3 $white,$pixel*5 $pixel*3 $white,$pixel*6 $pixel*3 $white,$pixel*2 $pixel*4 $white,$pixel*3 $pixel*4 $white,$pixel*4 $pixel*4 $white,$pixel*5 $pixel*4 $white,$pixel*6 $pixel*4 $white,$pixel*1 $pixel*5 $white,$pixel*2 $pixel*5 $white,$pixel*3 $pixel*5 $white,$pixel*4 $pixel*5 $white,$pixel*5 $pixel*5 $white,$pixel*6 $pixel*5 $white,$pixel*1 $pixel*6 $white,$pixel*2 $pixel*6 $white,$pixel*3 $pixel*6 $white,$pixel*4 $pixel*6 $white,$pixel*5 $pixel*6 $white,$pixel*6 $pixel*6 $white,$pixel*8 $pixel*8 $white,$pixel*9 $pixel*8 $white,$pixel*10 $pixel*8 $white,$pixel*11 $pixel*8 $white,$pixel*12 $pixel*8 $white,$pixel*13 $pixel*8 $white,$pixel*8 $pixel*9 $white,$pixel*9 $pixel*9 $white,$pixel*10 $pixel*9 $white,$pixel*11 $pixel*9 $white,$pixel*12 $pixel*9 $white,$pixel*13 $pixel*9 $white,$pixel*8 $pixel*10 $white,$pixel*9 $pixel*10 $white,$pixel*10 $pixel*10 $white,$pixel*11 $pixel*10 $white,$pixel*12 $pixel*10 $white,$pixel*8 $pixel*11 $white,$pixel*9 $pixel*11 $white,$pixel*10 $pixel*11 $white,$pixel*11 $pixel*11 $white,$pixel*12 $pixel*11 $white,$pixel*8 $pixel*12 $white,$pixel*9 $pixel*12 $white,$pixel*10 $pixel*12 $white,$pixel*11 $pixel*12 $white,$pixel*8 $pixel*13 $white,$pixel*9 $pixel*13 $white;

$circleSprite1: $pixel*7 $pixel*1 $black,$pixel*8 $pixel*1 $black,$pixel*9 $pixel*1 $black,$pixel*7 $pixel*2 $black,$pixel*8 $pixel*2 $black,$pixel*9 $pixel*2 $black,$pixel*10 $pixel*2 $black,$pixel*11 $pixel*2 $black,$pixel*7 $pixel*3 $black,$pixel*8 $pixel*3 $black,$pixel*9 $pixel*3 $black,$pixel*10 $pixel*3 $black,$pixel*11 $pixel*3 $black,$pixel*12 $pixel*3 $black,$pixel*7 $pixel*4 $black,$pixel*8 $pixel*4 $black,$pixel*9 $pixel*4 $black,$pixel*10 $pixel*4 $black,$pixel*11 $pixel*4 $black,$pixel*12 $pixel*4 $black,$pixel*7 $pixel*5 $black,$pixel*8 $pixel*5 $black,$pixel*9 $pixel*5 $black,$pixel*10 $pixel*5 $black,$pixel*11 $pixel*5 $black,$pixel*12 $pixel*5 $black,$pixel*13 $pixel*5 $black,$pixel*7 $pixel*6 $black,$pixel*8 $pixel*6 $black,$pixel*9 $pixel*6 $black,$pixel*10 $pixel*6 $black,$pixel*11 $pixel*6 $black,$pixel*12 $pixel*6 $black,$pixel*13 $pixel*6 $black,$pixel*7 $pixel*7 $black,$pixel*8 $pixel*7 $black,$pixel*9 $pixel*7 $black,$pixel*10 $pixel*7 $black,$pixel*11 $pixel*7 $black,$pixel*12 $pixel*7 $black,$pixel*13 $pixel*7 $black,$pixel*1 $pixel*7 $black,$pixel*2 $pixel*7 $black,$pixel*3 $pixel*7 $black,$pixel*4 $pixel*7 $black,$pixel*5 $pixel*7 $black,$pixel*6 $pixel*7 $black,$pixel*1 $pixel*8 $black,$pixel*2 $pixel*8 $black,$pixel*3 $pixel*8 $black,$pixel*4 $pixel*8 $black,$pixel*5 $pixel*8 $black,$pixel*6 $pixel*8 $black,$pixel*7 $pixel*8 $black,$pixel*1 $pixel*9 $black,$pixel*2 $pixel*9 $black,$pixel*3 $pixel*9 $black,$pixel*4 $pixel*9 $black,$pixel*5 $pixel*9 $black,$pixel*6 $pixel*9 $black,$pixel*7 $pixel*9 $black,$pixel*2 $pixel*10 $black,$pixel*3 $pixel*10 $black,$pixel*4 $pixel*10 $black,$pixel*5 $pixel*10 $black,$pixel*6 $pixel*10 $black,$pixel*7 $pixel*10 $black,$pixel*2 $pixel*11 $black,$pixel*3 $pixel*11 $black,$pixel*4 $pixel*11 $black,$pixel*5 $pixel*11 $black,$pixel*6 $pixel*11 $black,$pixel*7 $pixel*11 $black,$pixel*3 $pixel*12 $black,$pixel*4 $pixel*12 $black,$pixel*5 $pixel*12 $black,$pixel*6 $pixel*12 $black,$pixel*7 $pixel*12 $black,$pixel*5 $pixel*13 $black,$pixel*6 $pixel*13 $black,$pixel*7 $pixel*13 $black;

$circleSprite2: $pixel*7 $pixel*7 $black,$pixel*6 $pixel*8 $black,$pixel*6 $pixel*9 $black,$pixel*5 $pixel*10 $black,$pixel*5 $pixel*11 $black,$pixel*4 $pixel*12 $black,$pixel*6 $pixel*6 $black,$pixel*5 $pixel*6 $black,$pixel*4 $pixel*5 $black,$pixel*3 $pixel*5 $black,$pixel*2 $pixel*4 $black,$pixel*8 $pixel*6 $black,$pixel*8 $pixel*5 $black,$pixel*9 $pixel*4 $black,$pixel*9 $pixel*3 $black,$pixel*10 $pixel*2 $black,$pixel*8 $pixel*8 $black,$pixel*9 $pixel*8 $black,$pixel*10 $pixel*9 $black,$pixel*11 $pixel*9 $black,$pixel*12 $pixel*10 $black,$pixel*1 $pixel*5 $black,$pixel*2 $pixel*5 $black,$pixel*1 $pixel*6 $black,$pixel*2 $pixel*6 $black,$pixel*3 $pixel*6 $black,$pixel*4 $pixel*6 $black,$pixel*1 $pixel*7 $black,$pixel*2 $pixel*7 $black,$pixel*3 $pixel*7 $black,$pixel*4 $pixel*7 $black,$pixel*5 $pixel*7 $black,$pixel*6 $pixel*7 $black,$pixel*1 $pixel*8 $black,$pixel*2 $pixel*8 $black,$pixel*3 $pixel*8 $black,$pixel*4 $pixel*8 $black,$pixel*5 $pixel*8 $black,$pixel*1 $pixel*9 $black,$pixel*2 $pixel*9 $black,$pixel*3 $pixel*9 $black,$pixel*4 $pixel*9 $black,$pixel*5 $pixel*9 $black,$pixel*2 $pixel*10 $black,$pixel*3 $pixel*10 $black,$pixel*4 $pixel*10 $black,$pixel*2 $pixel*11 $black,$pixel*3 $pixel*11 $black,$pixel*4 $pixel*11 $black,$pixel*3 $pixel*12 $black,$pixel*11 $pixel*2 $black,$pixel*10 $pixel*3 $black,$pixel*11 $pixel*3 $black,$pixel*12 $pixel*3 $black,$pixel*10 $pixel*4 $black,$pixel*11 $pixel*4 $black,$pixel*12 $pixel*4 $black,$pixel*9 $pixel*5 $black,$pixel*10 $pixel*5 $black,$pixel*11 $pixel*5 $black,$pixel*12 $pixel*5 $black,$pixel*13 $pixel*5 $black,$pixel*9 $pixel*6 $black,$pixel*10 $pixel*6 $black,$pixel*11 $pixel*6 $black,$pixel*12 $pixel*6 $black,$pixel*13 $pixel*6 $black,$pixel*8 $pixel*7 $black,$pixel*9 $pixel*7 $black,$pixel*10 $pixel*7 $black,$pixel*11 $pixel*7 $black,$pixel*12 $pixel*7 $black,$pixel*13 $pixel*7 $black,$pixel*10 $pixel*8 $black,$pixel*11 $pixel*8 $black,$pixel*12 $pixel*8 $black,$pixel*13 $pixel*8 $black,$pixel*12 $pixel*9 $black,$pixel*13 $pixel*9 $black;

$circleSprite3: $pixel*1 $pixel*5 $black,$pixel*1 $pixel*6 $black,$pixel*1 $pixel*7 $black,$pixel*1 $pixel*8 $black,$pixel*1 $pixel*9 $black,$pixel*2 $pixel*3 $black,$pixel*2 $pixel*4 $black,$pixel*2 $pixel*5 $black,$pixel*2 $pixel*6 $black,$pixel*2 $pixel*7 $black,$pixel*2 $pixel*8 $black,$pixel*2 $pixel*9 $black,$pixel*2 $pixel*10 $black,$pixel*2 $pixel*11 $black,$pixel*3 $pixel*3 $black,$pixel*3 $pixel*4 $black,$pixel*3 $pixel*5 $black,$pixel*3 $pixel*6 $black,$pixel*3 $pixel*7 $black,$pixel*3 $pixel*8 $black,$pixel*3 $pixel*9 $black,$pixel*3 $pixel*10 $black,$pixel*3 $pixel*11 $black,$pixel*7 $pixel*7 $black,$pixel*6 $pixel*6 $black,$pixel*5 $pixel*5 $black,$pixel*4 $pixel*4 $black,$pixel*6 $pixel*8 $black,$pixel*5 $pixel*9 $black,$pixel*4 $pixel*10 $black,$pixel*4 $pixel*9 $black,$pixel*4 $pixel*8 $black,$pixel*4 $pixel*7 $black,$pixel*4 $pixel*6 $black,$pixel*4 $pixel*5 $black,$pixel*5 $pixel*6 $black,$pixel*5 $pixel*7 $black,$pixel*5 $pixel*8 $black,$pixel*6 $pixel*7 $black,$pixel*8 $pixel*6 $black,$pixel*9 $pixel*5 $black,$pixel*10 $pixel*4 $black,$pixel*11 $pixel*3 $black,$pixel*12 $pixel*3 $black,$pixel*8 $pixel*8 $black,$pixel*9 $pixel*9 $black,$pixel*10 $pixel*10 $black,$pixel*11 $pixel*11 $black,$pixel*8 $pixel*7 $black,$pixel*9 $pixel*6 $black,$pixel*9 $pixel*7 $black,$pixel*9 $pixel*8 $black,$pixel*10 $pixel*5 $black,$pixel*10 $pixel*6 $black,$pixel*10 $pixel*7 $black,$pixel*10 $pixel*8 $black,$pixel*10 $pixel*9 $black,$pixel*11 $pixel*4 $black,$pixel*11 $pixel*5 $black,$pixel*11 $pixel*6 $black,$pixel*11 $pixel*7 $black,$pixel*11 $pixel*8 $black,$pixel*11 $pixel*9 $black,$pixel*11 $pixel*10 $black,$pixel*12 $pixel*4 $black,$pixel*12 $pixel*5 $black,$pixel*12 $pixel*6 $black,$pixel*12 $pixel*7 $black,$pixel*12 $pixel*8 $black,$pixel*12 $pixel*9 $black,$pixel*12 $pixel*10 $black,$pixel*12 $pixel*11 $black,$pixel*13 $pixel*5 $black,$pixel*13 $pixel*6 $black,$pixel*13 $pixel*7 $black,$pixel*13 $pixel*8 $black,$pixel*13 $pixel*9 $black;

@mixin flexbox() {
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
  align-items: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
}

@mixin posCircle($pos) {
  border-radius: 50%;
  @if ($pos == "a") {
    position: absolute;
  }
  @if ($pos == "r") {
    position: relative;  
  }
}

body {
  background-color: #047;
  height: 100vh;
  overflow: hidden;
  @include flexbox();
  flex-direction: column;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-justify-content: center;
}

.container {
  background-color: inherit;
  @include flexbox();
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-justify-content: space-between;
  font-family: Helvetica, sans-serif;
  position: relative;
  z-index: 0;
  height: $h * 1.5;
  width: $w * 6;
}

#hourglass {
  position: relative;
  height: $h;
  width: $w;
  @if ($animOn == 1) {
    animation: flip $anim1Dur steps(8) infinite;
  }
  div {
    background: $black;
    position: absolute;
    width: $pixel;
    height: $pixel;
    transform-origin: center top;
  }
  .outline {
    box-shadow: $pixel*1 0 $black,$pixel*2 0 $black,$pixel*3 0 $black,$pixel*4 0 $black,$pixel*5 0 $black,$pixel*6 0 $black,$pixel*7 0 $black,$pixel*8 0 $black,$pixel*9 0 $black,$pixel*10 0 $black,$pixel*11 0 $black,$pixel*12 0 $black,0 $pixel*1 $black,$pixel*1 $pixel*1 $black,$pixel*11 $pixel*1 $black,$pixel*12 $pixel*1 $black,0 $pixel*2 $black,$pixel*1 $pixel*2 $black,$pixel*2 $pixel*2 $black,$pixel*3 $pixel*2 $black,$pixel*4 $pixel*2 $black,$pixel*5 $pixel*2 $black,$pixel*6 $pixel*2 $black,$pixel*7 $pixel*2 $black,$pixel*8 $pixel*2 $black,$pixel*9 $pixel*2 $black,$pixel*10 $pixel*2 $black,$pixel*11 $pixel*2 $black,$pixel*12 $pixel*2 $black,$pixel*1 $pixel*3 $black,$pixel*1 $pixel*4 $black,$pixel*1 $pixel*5 $black,$pixel*1 $pixel*6 $black,$pixel*11 $pixel*3 $black,$pixel*11 $pixel*4 $black,$pixel*11 $pixel*5 $black,$pixel*11 $pixel*6 $black,$pixel*1 $pixel*7 $black,$pixel*2 $pixel*7 $black,$pixel*2 $pixel*8 $black,$pixel*3 $pixel*8 $black,$pixel*3 $pixel*9 $black,$pixel*4 $pixel*9 $black,$pixel*4 $pixel*10 $black,$pixel*5 $pixel*10 $black,$pixel*11 $pixel*7 $black,$pixel*10 $pixel*7 $black,$pixel*10 $pixel*8 $black,$pixel*9 $pixel*8 $black,$pixel*9 $pixel*9 $black,$pixel*8 $pixel*9 $black,$pixel*8 $pixel*10 $black,$pixel*7 $pixel*10 $black,$pixel*4 $pixel*11 $black,$pixel*5 $pixel*11 $black,$pixel*7 $pixel*11 $black,$pixel*8 $pixel*11 $black,$pixel*3 $pixel*12 $black,$pixel*4 $pixel*12 $black,$pixel*8 $pixel*12 $black,$pixel*9 $pixel*12 $black,$pixel*2 $pixel*13 $black,$pixel*3 $pixel*13 $black,$pixel*9 $pixel*13 $black,$pixel*10 $pixel*13 $black,$pixel*1 $pixel*14 $black,$pixel*2 $pixel*14 $black,$pixel*10 $pixel*14 $black,$pixel*11 $pixel*14 $black,$pixel*1 $pixel*15 $black,$pixel*1 $pixel*16 $black,$pixel*1 $pixel*17 $black,$pixel*1 $pixel*18 $black,$pixel*11 $pixel*15 $black,$pixel*11 $pixel*16 $black,$pixel*11 $pixel*17 $black,$pixel*11 $pixel*18 $black,$pixel*0 $pixel*19 $black,$pixel*1 $pixel*19 $black,$pixel*2 $pixel*19 $black,$pixel*3 $pixel*19 $black,$pixel*4 $pixel*19 $black,$pixel*5 $pixel*19 $black,$pixel*6 $pixel*19 $black,$pixel*7 $pixel*19 $black,$pixel*8 $pixel*19 $black,$pixel*9 $pixel*19 $black,$pixel*10 $pixel*19 $black,$pixel*11 $pixel*19 $black,$pixel*12 $pixel*19 $black,$pixel*0 $pixel*20 $black,$pixel*1 $pixel*20 $black,$pixel*11 $pixel*20 $black,$pixel*12 $pixel*20 $black,$pixel*0 $pixel*21 $black,$pixel*1 $pixel*21 $black,$pixel*2 $pixel*21 $black,$pixel*3 $pixel*21 $black,$pixel*4 $pixel*21 $black,$pixel*5 $pixel*21 $black,$pixel*6 $pixel*21 $black,$pixel*7 $pixel*21 $black,$pixel*8 $pixel*21 $black,$pixel*9 $pixel*21 $black,$pixel*10 $pixel*21 $black,$pixel*11 $pixel*21 $black,$pixel*12 $pixel*21 $black;
    z-index: 4;
  }
  .fill {
    box-shadow: $pixel*2 $pixel*1 $white,$pixel*3 $pixel*1 $white,$pixel*4 $pixel*1 $white,$pixel*5 $pixel*1 $white,$pixel*6 $pixel*1 $white,$pixel*7 $pixel*1 $white,$pixel*8 $pixel*1 $white,$pixel*9 $pixel*1 $white,$pixel*10 $pixel*1 $white,$pixel*2 $pixel*3 $white,$pixel*3 $pixel*3 $white,$pixel*4 $pixel*3 $white,$pixel*5 $pixel*3 $white,$pixel*6 $pixel*3 $white,$pixel*7 $pixel*3 $white,$pixel*8 $pixel*3 $white,$pixel*9 $pixel*3 $white,$pixel*10 $pixel*3 $white,$pixel*2 $pixel*4 $white,$pixel*3 $pixel*4 $white,$pixel*4 $pixel*4 $white,$pixel*5 $pixel*4 $white,$pixel*6 $pixel*4 $white,$pixel*7 $pixel*4 $white,$pixel*8 $pixel*4 $white,$pixel*9 $pixel*4 $white,$pixel*10 $pixel*4 $white,$pixel*2 $pixel*5 $white,$pixel*3 $pixel*5 $white,$pixel*4 $pixel*5 $white,$pixel*5 $pixel*5 $white,$pixel*6 $pixel*5 $white,$pixel*7 $pixel*5 $white,$pixel*8 $pixel*5 $white,$pixel*9 $pixel*5 $white,$pixel*10 $pixel*5 $white,$pixel*2 $pixel*6 $white,$pixel*3 $pixel*6 $white,$pixel*4 $pixel*6 $white,$pixel*5 $pixel*6 $white,$pixel*6 $pixel*6 $white,$pixel*7 $pixel*6 $white,$pixel*8 $pixel*6 $white,$pixel*9 $pixel*6 $white,$pixel*10 $pixel*6 $white,$pixel*3 $pixel*7 $white,$pixel*4 $pixel*7 $white,$pixel*5 $pixel*7 $white,$pixel*6 $pixel*7 $white,$pixel*7 $pixel*7 $white,$pixel*8 $pixel*7 $white,$pixel*9 $pixel*7 $white,$pixel*4 $pixel*8 $white,$pixel*5 $pixel*8 $white,$pixel*6 $pixel*8 $white,$pixel*7 $pixel*8 $white,$pixel*8 $pixel*8 $white,$pixel*5 $pixel*9 $white,$pixel*6 $pixel*9 $white,$pixel*7 $pixel*9 $white,$pixel*6 $pixel*10 $white,$pixel*6 $pixel*11 $white,$pixel*5 $pixel*12 $white,$pixel*6 $pixel*12 $white,$pixel*7 $pixel*12 $white,$pixel*8 $pixel*13 $white,$pixel*7 $pixel*13 $white,$pixel*6 $pixel*13 $white,$pixel*5 $pixel*13 $white,$pixel*4 $pixel*13 $white,$pixel*9 $pixel*14 $white,$pixel*8 $pixel*14 $white,$pixel*7 $pixel*14 $white,$pixel*6 $pixel*14 $white,$pixel*5 $pixel*14 $white,$pixel*4 $pixel*14 $white,$pixel*3 $pixel*14 $white,$pixel*10 $pixel*15 $white,$pixel*9 $pixel*15 $white,$pixel*8 $pixel*15 $white,$pixel*7 $pixel*15 $white,$pixel*6 $pixel*15 $white,$pixel*5 $pixel*15 $white,$pixel*4 $pixel*15 $white,$pixel*3 $pixel*15 $white,$pixel*2 $pixel*15 $white,$pixel*10 $pixel*16 $white,$pixel*9 $pixel*16 $white,$pixel*8 $pixel*16 $white,$pixel*7 $pixel*16 $white,$pixel*6 $pixel*16 $white,$pixel*5 $pixel*16 $white,$pixel*4 $pixel*16 $white,$pixel*3 $pixel*16 $white,$pixel*2 $pixel*16 $white,$pixel*10 $pixel*17 $white,$pixel*9 $pixel*17 $white,$pixel*8 $pixel*17 $white,$pixel*7 $pixel*17 $white,$pixel*6 $pixel*17 $white,$pixel*5 $pixel*17 $white,$pixel*4 $pixel*17 $white,$pixel*3 $pixel*17 $white,$pixel*2 $pixel*17 $white,$pixel*10 $pixel*18 $white,$pixel*9 $pixel*18 $white,$pixel*8 $pixel*18 $white,$pixel*7 $pixel*18 $white,$pixel*6 $pixel*18 $white,$pixel*5 $pixel*18 $white,$pixel*4 $pixel*18 $white,$pixel*3 $pixel*18 $white,$pixel*2 $pixel*18 $white,$pixel*10 $pixel*20 $white,$pixel*9 $pixel*20 $white,$pixel*8 $pixel*20 $white,$pixel*7 $pixel*20 $white,$pixel*6 $pixel*20 $white,$pixel*5 $pixel*20 $white,$pixel*4 $pixel*20 $white,$pixel*3 $pixel*20 $white,$pixel*2 $pixel*20 $white;
    z-index: 1;
  }
  .curtain {
    background: #fff;
    top: $pixel*3;
    left: $pixel*2;
    height: $pixel*6;
    width: $pixel*9;
    z-index: 3;
    @if ($animOn == 1) {
      animation: sandEmpty $anim1Dur steps(1) infinite;
    }
    &:nth-of-type(3) {
      top: $pixel*13;
      @if ($animOn == 1) {
        animation: sandFill $anim1Dur steps(1) infinite;
      }
    }
  }
  .sand-fall {
    background: transparent;
    box-shadow: $pixel*6 $pixel*7 $black;
    z-index: 5;
    @if ($animOn == 1) {
      animation: sandFall $anim1Dur steps(11) infinite;
    }
    &:nth-of-type(5) {
      @if ($animOn == 1) {
        animation-delay: 0s + (4/45)*($anim1Dur);
      }
    }
  }
  .sand {
     box-shadow: $pixel*2 $pixel*3 $black,$pixel*4 $pixel*3 $black,$pixel*6 $pixel*3 $black,$pixel*8 $pixel*3 $black,$pixel*10 $pixel*3 $black,$pixel*3 $pixel*4 $black,$pixel*5 $pixel*4 $black,$pixel*7 $pixel*4 $black,$pixel*9 $pixel*4 $black,$pixel*4 $pixel*5 $black,$pixel*6 $pixel*5 $black,$pixel*8 $pixel*5 $black,$pixel*5 $pixel*6 $black,$pixel*7 $pixel*6 $black,$pixel*6 $pixel*7 $black,$pixel*2 $pixel*18 $black,$pixel*4 $pixel*18 $black,$pixel*6 $pixel*18 $black,$pixel*8 $pixel*18 $black,$pixel*10 $pixel*18 $black,$pixel*3 $pixel*17 $black,$pixel*5 $pixel*17 $black,$pixel*7 $pixel*17 $black,$pixel*9 $pixel*17 $black,$pixel*4 $pixel*16 $black,$pixel*6 $pixel*16 $black,$pixel*8 $pixel*16 $black,$pixel*5 $pixel*15 $black,$pixel*7 $pixel*15 $black,$pixel*6 $pixel*14 $black;
    z-index: 2;
  }
}

#ring1 {
  @include posCircle("r");
  background-color: inherit;
  border: 1px solid rgb(0,98,96);
  box-shadow: 0 0 2px 1px*$scale rgba(0,98,96,0.33);
  width: $h - ($ringW * 2);
  height: $h - ($ringW * 2);
  margin-left: 0px + ($scale*2);
  div {
    @include posCircle("a");
    background-image: -webkit-radial-gradient(80% 50%, 80% 160%, rgba(255,255,255,0.5), rgba(255,255,255,0.5) 12%, transparent 18%), -webkit-radial-gradient(0% -120%, rgba(255,255,255,0.4), rgba(255,255,255,0.4) 70%, transparent 70%);
    background-image: -moz-radial-gradient(66% 50%, circle farthest-corner, rgba(255,255,255,0.5), rgba(255,255,255,0.5) 30%, transparent 36%), -moz-radial-gradient(0% -120%, rgba(255,255,255,0.4), rgba(255,255,255,0.4) 70%, transparent 70%);
    background-image: radial-gradient(80% 160% at 80% 50%, rgba(255,255,255,0.5), rgba(255,255,255,0.5) 12%, transparent 18%), radial-gradient(at 0% -120%, rgba(255,255,255,0.4), rgba(255,255,255,0.4) 70%, transparent 70%);
    border: $ringB solid rgb(0,98,96);
    top: -$ringW - $ringB;
    left: -$ringW - $ringB;
    transform: rotate(56deg) translateZ(0);
    width: $h;
    height: $h;
    z-index: -1;
  }
  div + div {
    background-color: rgb(0,98,96);
    background-image: -webkit-radial-gradient(17% 77%, #fff 6%, transparent 12%), -webkit-radial-gradient(25% 85%, rgb(0,241,227) 12%, transparent 35%);
    background-image: -moz-radial-gradient(17% 77%, #fff 6%, transparent 12%), -moz-radial-gradient(25% 85%, rgb(0,241,227) 12%, transparent 35%);
    background-image: radial-gradient(at 17% 77%, #fff 6%, transparent 12%), radial-gradient(at 25% 85%, rgb(0,241,227) 12%, transparent 35%);
    transform: rotate(0deg);
    z-index: -2;
    @if ($animOn == 1) {
      animation: spin $anim2_3Dur linear infinite;
    }
  }
}

#ring2 {
  @include posCircle("r");
  background-color: inherit;
  width: $h - ($ringW * 2);
  height: $h - ($ringW * 2);
  margin: 0 $ringW;
  div {
    background-color: rgb(0,158,239);
    background-image: -webkit-radial-gradient(18% 82%, rgb(0,208,252) 25%, transparent 25%);
    background-image: -moz-radial-gradient(18% 82%, rgb(0,208,252) 25%, transparent 25%);
    background-image: radial-gradient(at 18% 82%, rgb(0,208,252) 25%, transparent 25%);
    border-radius: 50%;
    top: -$ringW;
    left: -$ringW;
    position: absolute;
    width: $h;
    height: $h;
    z-index: -1;
    @if ($animOn == 1) {
      animation: spin $anim2_3Dur linear infinite;
    }
  }
}

#circle {
  height: $h;
  width: $pixel*15;
  position: relative;
  div {
    position: absolute;
    top: $pixel*3.5;
    left: 0;
    width: $pixel;
    height: $pixel;
    box-shadow: $circleSprite0;
    z-index: 0;
    + div {
      box-shadow: $circleSprite1;
      z-index: 1;
      @if ($animOn == 1) {
      animation: spriteSpin $anim4Dur steps(1) infinite;
      }
    }
  }
}

#pinwheel1, #pinwheel2 {
  box-shadow: 0 2px*$scale 2px*$scale rgba(0,0,0,0.5);
}

#pinwheel1 {
  @include posCircle("r");
  border: 1px solid #000;
  overflow: hidden;
  height: $h;
  width: $h;
  &:before, &:after {
    @include posCircle("a");
    content: "";
    display: block;
    z-index: 1;
  }
  &:before {
    background: linear-gradient(rgba(255,255,255,0.75), transparent 75%);
    top: 5%;
    left: 10%;
    height: $h*0.7;
    width: $h*0.8;
  }
  &:after {
    box-shadow: 0 0 10px #000 inset;
    height: $h;
    width: $h;
  }
  .bw {
    @include posCircle("a");
    overflow: hidden;
    opacity: 0.15;
    height: 100%;
    width: 100%;
    @if ($animOn == 1) {
      animation: spin $anim5_6Dur linear infinite;
    }
    > div {
      @include posCircle("a");
      background: #000;
      top: 50%;
      transform-origin: 50% 0%;
      height: 100%;
      width: 100%;
      &:nth-of-type(even) {
          background: #fff;
      }
      @for $g from 1 through 10 {
          &:nth-of-type(#{$g}) {
              transform: rotate(-36deg * ($g - 1));
              @if $g == 10 {
                  overflow: hidden;
                  > div {
                  @include posCircle("a");
                      background-color: #000;
                      top: 0;
                      transform-origin: 50% 0%;
                      width: 100%;
                      height: 100%;
                      &:nth-of-type(even) {
                          background-color: #fff;
                      }
                @for $d from 1 through 4 {
                  &:nth-of-type(#{$d}) {
                    transform: rotate(-36deg * $d);
                  }
                  }
                  }
              }
          }
      }
    }
  }
.colors {
    @include posCircle("a");
    overflow: hidden;
    height: 100%;
    width: 100%;
    z-index: 0;
    div {
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: 0% 0%;
      height: 100%;
      width: 100%;
      filter: blur(10px);
      -webkit-filter: blur(10px);
      -ms-filter: blur(10px);
      @for $h from 1 through 6 {
        &:nth-of-type(#{$h}) {
          background-color: nth($pinwheelColor1, $h);
          transform: rotate(-60deg * ($h - 1));
          @if $h == 6 {
            &:before {
              background-image: linear-gradient(45deg, nth($pinwheelColor1, 1), nth($pinwheelColor1, 1) 50%, transparent 50%, transparent);
              content: "";
              display: block;
              position: absolute;
              transform-origin: 0% 0%;
              transform: rotate(-60deg);
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}

#pinwheel2 {
  @include posCircle("r");
  height: $h;
  width: $h;
  .wrapper {
    @include posCircle("a");
    overflow: hidden;
    width: 100%;
    height: 100%;
    &:before {
      background: radial-gradient(transparent, rgba(0,0,0,0.25));
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 2;
    }
    @if ($animOn == 1) {
      animation: spin $anim5_6Dur linear infinite;
    }
  }
  div > div {
    @include posCircle("a");
    top: 50%;
    left: 50%;
    margin-left: -$pinwheelCircleW / 2;
    transform-origin: 50% 0%;
    height: $pinwheelCircleW;
    width: $pinwheelCircleW;
    @for $i from 1 through 6 {
      &:nth-of-type(#{$i}) {
        background-color: nth($pinwheelColor2, $i);
        transform: rotate(-60deg * ($i - 1));
        @if $i == 6 {
          overflow: hidden;
          &:before, &:after {
            content: "";
            display: block;
            position: absolute;
            transform-origin: 50% 0%;
            width: 100%;
            height: 100%;
          }
          &:before {
            background-image: radial-gradient(nth($pinwheelColor2, 1), nth($pinwheelColor2, 1) 70%, transparent 70%, transparent);
            transform: rotate(-60deg);
          }
          &:after {
            background-image: radial-gradient(nth($pinwheelColor2, 2), nth($pinwheelColor2, 2) 70%, transparent 70%, transparent);
            transform: rotate(-120deg);
          }
        }
      }
    }
  }
}

/** Hourglass animations **/
@keyframes flip {
  from {
    transform: rotate(0deg);
  }
  92% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

/* About the percentage calculation below */
/* A 1x1 grain of sand will travel down and abruptly go back to the top 6 times, traveling 1 less pixel than the other. If it takes 1 second for the grain to travel 11 pixels down, this would be 1/6 (16.667%) of the animation. If it were not to travel 1 less pixel each time, then the total distance in pixels would be 66. So at the same rate of 11 pixels/sec, it would take 0.909 second to travel 10 pixels and be 15.152% of the animation (10 / 66), 0.818 to travel 9 and be 13.636% (9 / 66), etc. then I compound these percentages one by one until they add up to 68.182%, when the grain travels 7 pixels the final time. In the long run, the grain will not be traveling slower each time it touches the sand pile at the bottom of the hourglass. */
@keyframes sandFall {
  from {
    transform: translateY(0);
    visibility: visible;
  }
  16.667% {
    transform: translateY($pixel*11);
  }
  16.668% {
    transform: translateY(0);
  }
  31.819% {
    transform: translateY($pixel*10);
  }
  31.82% {
    transform: translateY(0);
  }
  45.455% {
    transform: translateY($pixel*9);
  }
  45.456% {
    transform: translateY(0);
  }
  57.576% {
    transform: translateY($pixel*8);
  }
  57.577% {
    transform: translateY(0);
  }
  68.182% {
    transform: translateY($pixel*7);
  visibility: visible;
  }
  68.183% {
    transform: translateY($pixel*7);
    visibility: hidden;
  }
  to {
    transform: translateY($pixel*7);
    visibility: hidden;
  }
}
@keyframes sandEmpty {
  from {
    transform: scale(1,0);
  }
  16.667% {
    transform: scale(1,0.167);
  }
  31.819% {
    transform: scale(1,0.333);
  }
  45.455% {
    transform: scale(1,0.5);
  }
  57.576% {
    transform: scale(1,0.667);
  }
  68.182% {
    transform: scale(1,0.833);
  }
  100% {
    transform: scale(1,1);
  }
}
@keyframes sandFill {
  from {
    transform: scale(1,1);
  }
  16.667% {
    transform: scale(1,0.833);
  }
  31.819% {
    transform: scale(1,0.667);
  }
  45.455% {
    transform: scale(1,0.5);
  }
  57.576% {
    transform: scale(1,0.333);
  }
  68.182% {
    transform: scale(1,0.167);
  }
  100% {
    transform: scale(1,0);
  }
}

/** Black and white circle spin **/
@keyframes spriteSpin {
  from {
      box-shadow: $circleSprite1;
    }
  12.5% {
      box-shadow: $circleSprite2;
    }
  25% {
      box-shadow: $circleSprite3;
    }
  37.5% {
      box-shadow: $circleSprite2;
    transform: scale(-1,1) translate($pixel*-14,0);
    }
  50% {
      box-shadow: $circleSprite1;
    transform: scale(-1,1) translate($pixel*-14,0);
    }
  62.5% {
      box-shadow: $circleSprite2;
    transform: scale(1,1) translate($pixel*14,0) rotate(90deg);
    }
  75% {
      box-shadow: $circleSprite3;
    transform: scale(1,1) translate($pixel*14,0) rotate(90deg);
    }
  87.5% {
      box-shadow: $circleSprite2;
    transform: scale(-1,1) translate(0,0) rotate(90deg);
    }
  to {
      box-shadow: $circleSprite1;
    }
}

/* Pinwheel spin */
@keyframes spin {
  from {
      transform: rotate(0deg);
    }
  to {
      transform: rotate(360deg);
    }
}

View Compiled
/*
Image References

http://www.overheadcompartment.org/wp-content/uploads/2014/02/windows_cursor1.gif
http://dc428.4shared.com/img/saBfkpx8/13f0ce5c828/aero_busy.png
http://www.tenforums.com/attachments/tutorials/18478d1430852858-mouse-pointers-change-windows-10-a-save_pointers_scheme-1.png
http://orig03.deviantart.net/e88f/f/2014/093/0/9/mac_os_9_cursors_for_windows_by_nonme85851-d7cy4v2.png
http://www.macobserver.com/imgs/tmo_articles/20140425-02-Cursors2.jpg
http://orig15.deviantart.net/5e02/f/2015/326/c/0/mac_os_x_el_capitan_cursor_pack_for_win___by_sees_by_spysees-d9hllin.jpg
*/
Rerun