Вы можете изменить анимацию кейфреймов css, чтобы создать задержку:

#p { 
  animation: strokeOffset 5s linear forwards; 
  animation-iteration-count: infinite;
}
   @keyframes strokeOffset { 
     50% {
       stroke-dashoffset: 0;
     }
     100% {
       stroke-dashoffset: 1;
     }
}

Логика такая:
1. От 0 процентов до 50 от времени анимации (в моем коде 5 секунд), анимация будет полностью выполняться, т.е. она проиграется за 5*50%=2.5 секунд.
Оставшиеся 2.5 секунды, с 50 до 100 процентов времени, она будет полностью заполнена и не меняться.
Вы можете поменять время анимации и время задержки в зависимости от своих нужд.