.line {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.willAnimate .line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-duration: 1500ms;
  animation-timing-function: ease-in-out;
}

.animate .line {
  animation-name: draw;
}

.willAnimate .fill {
  opacity: 0;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-duration: 800ms;
  animation-timing-function: ease-in-out;
  animation-delay: 300ms;
}

.animate .fill {
  animation-name: fillIn;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fillIn {
  to {
    opacity: 0.18;
  }
}