<div class="clock">
  <div class="hours">
    <div class="digit">
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
</div>
  </div>
  <div class="hours">
    <div class="digit">
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
</div>
  </div>
  <div class="minutes">
    <div class="digit">
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
</div>
  </div>
  <div class="minutes">
    <div class="digit">
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
</div>
  </div>
  <div class="seconds">
    <div class="digit">
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
</div>
  </div>
  <div class="seconds">
    <div class="digit">
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
</div>
  </div>
</div>
body {
  font-size: 16px;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
}

.digit {
  background: #000;
  width: 110px;
  height: 200px;
  margin: auto;
  filter: blur(5px) contrast(5);

  .segment {
    background: white;
    width: calc(100px / 3);
    height: calc(100px / 3);
    position: absolute;
    border-radius: 100%;
    transform-origin: center;
    transform: scale(0.1);
    transition: transform ease 1000ms;
    // Row 1
    &:nth-child(1) {
      top: 5px;
      left: 5px;
    }
    &:nth-child(2) {
      top: 5px;
      left: calc(100px / 3 * 1);
    }
    &:nth-child(3) {
      top: 5px;
      left: calc(100px / 3 * 2);
    }
    // Row 2
    &:nth-child(4) {
      top: calc(200px / 6);
      left: 5px;
    }
    &:nth-child(5) {
      top: calc(200px / 6);
      left: calc(100px / 3 * 1);
    }
    &:nth-child(6) {
      top: calc(200px / 6);
      left: calc(100px / 3 * 2);
    }
    // Row 3
    &:nth-child(7) {
      top: calc(200px / 6 * 2);
      left: 5px;
    }
    &:nth-child(8) {
      top: calc(200px / 6 * 2);
      left: calc(100px / 3 * 1);
    }
    &:nth-child(9) {
      top: calc(200px / 6 * 2);
      left: calc(100px / 3 * 2);
    }
    // Row 4
    &:nth-child(10) {
      top: calc(200px / 6 * 3);
      left: 5px;
    }
    &:nth-child(11) {
      top: calc(200px / 6 * 3);
      left: calc(100px / 3 * 1);
    }
    &:nth-child(12) {
      top: calc(200px / 6 * 3);
      left: calc(100px / 3 * 2);
    }
    // Row 5
    &:nth-child(13) {
      top: calc(200px / 6 * 4);
      left: 5px;
    }
    &:nth-child(14) {
      top: calc(200px / 6 * 4);
      left: calc(100px / 3 * 1);
    }
    &:nth-child(15) {
      top: calc(200px / 6 * 4);
      left: calc(100px / 3 * 2);
    }
  }

  &.d-0 {
    .segment {
      // Row 1
      &:nth-child(1) {
        transform: scale(1);
      }
      &:nth-child(2) {
        transform: scale(1);
      }
      &:nth-child(3) {
        transform: scale(1);
      }
      // Row 2
      &:nth-child(4) {
        transform: scale(1);
      }
      &:nth-child(5) {
        
      }
      &:nth-child(6) {
        transform: scale(1);
      }
      // Row 3
      &:nth-child(7) {
        transform: scale(1);
      }
      &:nth-child(8) {

      }
      &:nth-child(9) {
        transform: scale(1);
      }
      // Row 4
      &:nth-child(10) {
        transform: scale(1);
      }
      &:nth-child(11) {
        
      }
      &:nth-child(12) {
        transform: scale(1);
      }
      // Row 5
      &:nth-child(13) {
        transform: scale(1);
      }
      &:nth-child(14) {
        transform: scale(1);
      }
      &:nth-child(15) {
        transform: scale(1);
      }
    }
  }
  
  &.d-1 {
    .segment {
      // Row 1
      &:nth-child(1) {
        
      }
      &:nth-child(2) {
        transform: scale(1);
      }
      &:nth-child(3) {
        transform: scale(1);
      }
      // Row 2
      &:nth-child(4) {
        
      }
      &:nth-child(5) {
        
      }
      &:nth-child(6) {
        transform: scale(1);
      }
      // Row 3
      &:nth-child(7) {
        
      }
      &:nth-child(8) {

      }
      &:nth-child(9) {
        transform: scale(1);
      }
      // Row 4
      &:nth-child(10) {
        
      }
      &:nth-child(11) {
        
      }
      &:nth-child(12) {
        transform: scale(1);
      }
      // Row 5
      &:nth-child(13) {
        
      }
      &:nth-child(14) {
        
      }
      &:nth-child(15) {
        transform: scale(1);
      }
    }
  }
  
  &.d-2 {
    .segment {
      // Row 1
      &:nth-child(1) {
        transform: scale(1);
      }
      &:nth-child(2) {
        transform: scale(1);
      }
      &:nth-child(3) {
        transform: scale(1);
      }
      // Row 2
      &:nth-child(4) {
        
      }
      &:nth-child(5) {
        
      }
      &:nth-child(6) {
        transform: scale(1);
      }
      // Row 3
      &:nth-child(7) {
        transform: scale(1);
      }
      &:nth-child(8) {
        transform: scale(1);
      }
      &:nth-child(9) {
        transform: scale(1);
      }
      // Row 4
      &:nth-child(10) {
        transform: scale(1);
      }
      &:nth-child(11) {
        
      }
      &:nth-child(12) {
       
      }
      // Row 5
      &:nth-child(13) {
        transform: scale(1);
      }
      &:nth-child(14) {
        transform: scale(1);
      }
      &:nth-child(15) {
        transform: scale(1);
      }
    }
  }
  
  &.d-3 {
    .segment {
      // Row 1
      &:nth-child(1) {
        transform: scale(1);
      }
      &:nth-child(2) {
        transform: scale(1);
      }
      &:nth-child(3) {
        transform: scale(1);
      }
      // Row 2
      &:nth-child(4) {
        
      }
      &:nth-child(5) {
        
      }
      &:nth-child(6) {
        transform: scale(1);
      }
      // Row 3
      &:nth-child(7) {
        transform: scale(1);
      }
      &:nth-child(8) {
        transform: scale(1);
      }
      &:nth-child(9) {
        transform: scale(1);
      }
      // Row 4
      &:nth-child(10) {
        
      }
      &:nth-child(11) {
        
      }
      &:nth-child(12) {
       transform: scale(1);
      }
      // Row 5
      &:nth-child(13) {
        transform: scale(1);
      }
      &:nth-child(14) {
        transform: scale(1);
      }
      &:nth-child(15) {
        transform: scale(1);
      }
    }
  }
  
  &.d-4 {
    .segment {
      // Row 1
      &:nth-child(1) {
        transform: scale(1);
      }
      &:nth-child(2) {
        
      }
      &:nth-child(3) {
        transform: scale(1);
      }
      // Row 2
      &:nth-child(4) {
        transform: scale(1);
      }
      &:nth-child(5) {
        
      }
      &:nth-child(6) {
        transform: scale(1);
      }
      // Row 3
      &:nth-child(7) {
        transform: scale(1);
      }
      &:nth-child(8) {
        transform: scale(1);
      }
      &:nth-child(9) {
        transform: scale(1);
      }
      // Row 4
      &:nth-child(10) {
        
      }
      &:nth-child(11) {
        
      }
      &:nth-child(12) {
       transform: scale(1);
      }
      // Row 5
      &:nth-child(13) {
        
      }
      &:nth-child(14) {
        
      }
      &:nth-child(15) {
        transform: scale(1);
      }
    }
  }
  
  &.d-5 {
    .segment {
      // Row 1
      &:nth-child(1) {
        transform: scale(1);
      }
      &:nth-child(2) {
        transform: scale(1);
      }
      &:nth-child(3) {
        transform: scale(1);
      }
      // Row 2
      &:nth-child(4) {
        transform: scale(1);
      }
      &:nth-child(5) {
        
      }
      &:nth-child(6) {
        
      }
      // Row 3
      &:nth-child(7) {
        transform: scale(1);
      }
      &:nth-child(8) {
        transform: scale(1);
      }
      &:nth-child(9) {
        transform: scale(1);
      }
      // Row 4
      &:nth-child(10) {
        
      }
      &:nth-child(11) {
        
      }
      &:nth-child(12) {
       transform: scale(1);
      }
      // Row 5
      &:nth-child(13) {
        transform: scale(1);
      }
      &:nth-child(14) {
        transform: scale(1);
      }
      &:nth-child(15) {
        transform: scale(1);
      }
    }
  }
  
  &.d-6 {
    .segment {
      // Row 1
      &:nth-child(1) {
        transform: scale(1);
      }
      &:nth-child(2) {
        transform: scale(1);
      }
      &:nth-child(3) {
        transform: scale(1);
      }
      // Row 2
      &:nth-child(4) {
        transform: scale(1);
      }
      &:nth-child(5) {
        
      }
      &:nth-child(6) {
        
      }
      // Row 3
      &:nth-child(7) {
        transform: scale(1);
      }
      &:nth-child(8) {
        transform: scale(1);
      }
      &:nth-child(9) {
        transform: scale(1);
      }
      // Row 4
      &:nth-child(10) {
        transform: scale(1);
      }
      &:nth-child(11) {
        
      }
      &:nth-child(12) {
       transform: scale(1);
      }
      // Row 5
      &:nth-child(13) {
        transform: scale(1);
      }
      &:nth-child(14) {
        transform: scale(1);
      }
      &:nth-child(15) {
        transform: scale(1);
      }
    }
  }
  
  &.d-7 {
    .segment {
      // Row 1
      &:nth-child(1) {
        transform: scale(1);
      }
      &:nth-child(2) {
        transform: scale(1);
      }
      &:nth-child(3) {
        transform: scale(1);
      }
      // Row 2
      &:nth-child(4) {
        
      }
      &:nth-child(5) {
        
      }
      &:nth-child(6) {
        transform: scale(1);
      }
      // Row 3
      &:nth-child(7) {
        
      }
      &:nth-child(8) {
        
      }
      &:nth-child(9) {
        transform: scale(1);
      }
      // Row 4
      &:nth-child(10) {
        
      }
      &:nth-child(11) {
        
      }
      &:nth-child(12) {
       transform: scale(1);
      }
      // Row 5
      &:nth-child(13) {
        
      }
      &:nth-child(14) {
        
      }
      &:nth-child(15) {
        transform: scale(1);
      }
    }
  }
  
  &.d-8 {
    .segment {
      // Row 1
      &:nth-child(1) {
        transform: scale(1);
      }
      &:nth-child(2) {
        transform: scale(1);
      }
      &:nth-child(3) {
        transform: scale(1);
      }
      // Row 2
      &:nth-child(4) {
        transform: scale(1);
      }
      &:nth-child(5) {
        
      }
      &:nth-child(6) {
        transform: scale(1);
      }
      // Row 3
      &:nth-child(7) {
        transform: scale(1);
      }
      &:nth-child(8) {
      transform: scale(1);
      }
      &:nth-child(9) {
        transform: scale(1);
      }
      // Row 4
      &:nth-child(10) {
        transform: scale(1);
      }
      &:nth-child(11) {
        
      }
      &:nth-child(12) {
        transform: scale(1);
      }
      // Row 5
      &:nth-child(13) {
        transform: scale(1);
      }
      &:nth-child(14) {
        transform: scale(1);
      }
      &:nth-child(15) {
        transform: scale(1);
      }
    }
  }
  
  &.d-9 {
    .segment {
      // Row 1
      &:nth-child(1) {
        transform: scale(1);
      }
      &:nth-child(2) {
        transform: scale(1);
      }
      &:nth-child(3) {
        transform: scale(1);
      }
      // Row 2
      &:nth-child(4) {
        transform: scale(1);
      }
      &:nth-child(5) {
        
      }
      &:nth-child(6) {
        transform: scale(1);
      }
      // Row 3
      &:nth-child(7) {
        transform: scale(1);
      }
      &:nth-child(8) {
      transform: scale(1);
      }
      &:nth-child(9) {
        transform: scale(1);
      }
      // Row 4
      &:nth-child(10) {
        
      }
      &:nth-child(11) {
        
      }
      &:nth-child(12) {
        transform: scale(1);
      }
      // Row 5
      &:nth-child(13) {
        
      }
      &:nth-child(14) {
        
      }
      &:nth-child(15) {
        transform: scale(1);
      }
    }
  }
}

.clock {
  & > div {
    float: left;
    
    &:nth-of-type(2n) {
      margin-right: 80px;
    }
  }
}
View Compiled
const hours = document.querySelectorAll('.hours');
const minutes = document.querySelectorAll('.minutes');
const seconds = document.querySelectorAll('.seconds');

setInterval(() => {
  const now = new Date();
  h = now.getHours(),
  m = now.getMinutes(),
  s = now.getSeconds();
  if (h < 10) h = '0' + h;
  if (m < 10) m = '0' + m;
  if (s < 10) s = '0' + s;
  updateDigits('hours', h);
  updateDigits('minutes', m);
  updateDigits('seconds', s);
}, 1000);

const updateDigits = (baseClass, digits) => {
  switch (baseClass) {
    case 'hours': {
      const numbers = `${digits}`.split('');
      numbers.forEach((number, index) => {
        hours[index].setAttribute('class', `digit ${baseClass} d-${number}`);
      });
    }
      case 'minutes': {
      const numbers = `${digits}`.split('');
      numbers.forEach((number, index) => {
        minutes[index].setAttribute('class', `digit ${baseClass} d-${number}`);
      });
      }
      
      case 'seconds': {
      const numbers = `${digits}`.split('');
      numbers.forEach((number, index) => {
        seconds[index].setAttribute('class', `digit ${baseClass} d-${number}`);
      });
    }
  }
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.