:root {
    --duration: 5s;
    --ease: cubic-bezier(.6, 0, .2, 1);
  }
 
  
  .year {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  svg {
    /* outline: 1px solid blue; */
  }
  
  .digit {
    stroke-width: 30;
    animation: var(--duration) var(--ease) both alternate infinite;
    animation-delay: calc( (var(--i) * 0.05s));
    /* animation-play-state: paused; */
  }
  
  .digit circle,
  .digit path {
    animation: inherit;
    stroke: var(--color);
    stroke-linejoin: round;
    stroke-linecap: round;
    /* Additional offsets for rounded stroke */
    stroke-dashoffset: -1.2;
    stroke-dasharray: 1 1.2;
  }
  
  .digit circle {
    animation-name: circle-draw;
  }
  
  @keyframes circle-draw {
    0%, 5% {  
      stroke-dasharray: 0 1.2 .2 .3;
      stroke-dashoffset: 1.75; 
    }
  
    18%, 50% {
      stroke-dasharray: 1 1.1;
      stroke-dashoffset: 0; 
    }
    70%, 100% { stroke-dashoffset: -1.1; }
  }
  
  .digit path {
    animation-name: path-draw;
  }
  
  @keyframes path-draw {
    0%, 43% { stroke-dashoffset: 1.1; }
    /* 25%, 50% { stroke-dashoffset: 0; } */
    90%, 100% { stroke-dashoffset: 0; }
  }
  
  .digit {
    animation-name: digit;
  }
  
  .digit:nth-child(1) {
    --x-offset: 150%;
  }
  
  .digit:nth-child(2) {
    --x-offset: 50%;
  }
  
  .digit:nth-child(3) {
    --x-offset: -50%;
  }
  
  .digit:nth-child(4) {
    --x-offset: -150%;
  }
  
  .digit:nth-child(even) {
    /* pixel pushing by Shaw™ */
    --y-offset: calc(-25% + 2%);
  }
  
  .digit:nth-child(odd) {
    --y-offset: calc(25% - 12%);
  }
  
  @keyframes digit {
    from, 15% {
      transform:
        translate(var(--x-offset, 0),var(--y-offset, 0));
    }
    30% {
      transform:
        translate(0%, var(--y-offset));
    }
    45%, to {
      transform: none;
    }
  }
  
  .digits {
    display: flex;
    flex-direction: row;
  }