https://annajona.is/ is the website I am talking about. The logo you see right after the website loads is a bit mysterious to me. I guess the css code should be something like the code below with the animation keyword. However, I cannot search that word at all when I inspect the website. Is there anything else that can simulate writing letters, with two colors, and start writing the second letter when the first letter is halfly written?

.hero-name-line {
  stroke-dasharray: 450;
  stroke-dashoffset: 450;
  animation: draw 5s linear forwards;
}

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

Another extra question is how the head logo, which is "hero-head-circle", is animated with filling? From the source code, transform may be the answer, I think.