$data-1: 70%;
$data-2: 50%;
$data-3: 60%;
$data-4: 23%;
$data-5: 50%;
$data-6: 67%;
$data-7: 57%;
$data-8: 68%;
$data-9: 70%;
$data-10: 55%;
$data-11: 10%;

body {
  background: #fdfcfa;
}
.grid {
  border: 1px solid #ccc;
  border-top: 0;
  border-bottom: 0;
  width: 80%;
  max-width: 700px;
  height: 260px;
  margin: 50px auto;
  position: relative;
  i.x {
    background: transparent;
    width: 100%; 
    height: 0;
    z-index:0;
    position: absolute;
    border-top: 1px dotted #ccc;
    left: 0;
    @for $i from 1 through 13 {
      &:nth-of-type(#{$i}) {
        bottom: #{($i * 20)}px;
        &:before {
          content: '#{$i}';
          position: absolute;
          right: 100%;
          font-style: normal;
          top: 50%;
          @include transform(translateY(-50%));
          font-size: 12px;
          color: #999;
          width: 30px;
          margin-right: 10px;
          text-align: right;
          -webkit-font-smoothing: antialiased;
        }
      }
    }
  }
}
.graph {
  @include linear-gradient(#036564, #033649);
  opacity: .65;
  width: 100%;
  height: 100%;
  position: relative;
  @include transition(all 400ms ease-in-out);
  z-index:1;
  clip-path: polygon(
    0% $data-1,
    10% $data-2,
    20% $data-3,
    30% $data-4,
    40% $data-5,
    50% $data-6,
    60% $data-7,
    70% $data-8,
    80% $data-9,
    90% $data-10,
    100% $data-11,
    // base
    100% 100%,
    0% 100%
  );
  -webkit-clip-path: polygon(
    0% $data-1,
    10% $data-2,
    20% $data-3,
    30% $data-4,
    40% $data-5,
    50% $data-6,
    60% $data-7,
    70% $data-8,
    80% $data-9,
    90% $data-10,
    100% $data-11,
    // base
    100% 100%,
    0% 100%
  );
  @include animation(do 1.2s ease-in-out forwards);
  &:hover {
    opacity: .8;
  }
}
@include keyframes(do){
  from {
    clip-path: polygon(
    0% 100%,
    10% 100%,
    20% 100%,
    30% 100%,
    40% 100%,
    50% 100%,
    60% 100%,
    70% 100%,
    80% 100%,
    90% 100%,
    100% 100%,
    // base
    100% 100%,
    0% 100%
  );
    -webkit-clip-path: polygon(
    0% 100%,
    10% 100%,
    20% 100%,
    30% 100%,
    40% 100%,
    50% 100%,
    60% 100%,
    70% 100%,
    80% 100%,
    90% 100%,
    100% 100%,
    // base
    100% 100%,
    0% 100%
  );
  }
}
.label {
  color: #999;
  font-size: .9em;
  font-style: italic;
  text-align: center;
  margin: 1em 0;
  -webkit-font-smoothing: antialiased; 
}