.wrapper
  .clock
    - (1..3).each do |i|
      .number{class: "number_#{i}" }
        - (1..2).each do |j|
          .digit{ 'data-number': 0 }
            %svg{ class: 'digit__svg', viewbox: '0 0 50 100', xmlns: 'http://www.w3.org/svg/2000' }
              %path{ d: 'M0,0 L50,0 L50,50 L50,100 L0,100 L0,25 L0,0'}

body, html {
  height: 100%;
  display: grid;
  background-color: #181a27;
}

.wrapper {
  margin: auto;
  padding: 20px;
}

.clock {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 5%;
  grid-row-gap: 0;
}

.number {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 5%;
  grid-row-gap: 0;
}

.digit {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 0;
  grid-row-gap: 0;
}

.digit__svg {
  width: 100%;
  height: auto;
  stroke: #e88565;
  stroke-width: 1px;
  fill: none;
  display: block;
}

let numbers = [
  'M0,0 L50,0 L50,50 L50,100 L0,100 L0,25 L0,0',
  'M50,0 L50,15 L50,30 L50,45 L50,60 L50,75 L50,100',
  'M0,0 L50,0 L50,50 L25,50 L0,50 L0,100 L50,100',
  'M0,0 L50,0 L50,100 L0,100 L50,100 L50,50 L0,50',
  'M0,0 L0,50 L50,50 L50,0 L50,35 L50,70 L50,100',
  'M50,0 L0,0 L0,50 L25,50 L50,50 L50,100 L0,100',
  'M50,0 L0,0 L0,50 L0,100 L50,100, L50,50 L0,50',
  'M0,0 L50,0 L50,20 L50,40 L50,60 L50,80 L50,100',
  'M0,0 L50,0 L50,100 L0,100 L0,0 L0,50 L50,50',
  'M0,100 L50,100 L50,50 L50,0 L0,0 L0,50 L50,50'
];

let digit = document.getElementsByClassName('digit');

function setTime() {
    time_numbers = ((new Date()).toTimeString().substr(0,8)).split(':').join('');

    for (let i = 0; i < time_numbers.length; i++) {
        if (digit[i].dataset.number !== time_numbers.charAt(i)) {
          digit[i].dataset.number = time_numbers.charAt(i);
          morphDigit(digit[i].querySelector('path'), numbers[time_numbers.charAt(i)]);
        }
    }
};

function morphDigit(digit, numberPath) {
  anime({
    targets: digit,
    d: [
      { value: numberPath }
    ],
    easing: 'easeInOutExpo',
    duration: 800
  });
};

setTime();
setInterval(setTime, 1000);