FiveThirtyEight text animation by thomasthoren

index.html

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="header">
    <svg viewBox="0 0 500 50">
      <symbol id="s-text">
      <text text-anchor="middle" x="50%" y="50%" dy=".35em">FiveThirtyEight Interactives</text>
      </symbol>
      <use xmlns:xlink="//www.w3.org/1999/xlink" xlink:href="#s-text" class="text"></use>
      <use xmlns:xlink="//www.w3.org/1999/xlink" xlink:href="#s-text" class="text"></use>
      <use xmlns:xlink="//www.w3.org/1999/xlink" xlink:href="#s-text" class="text"></use>
      <use xmlns:xlink="//www.w3.org/1999/xlink" xlink:href="#s-text" class="text"></use>
      <use xmlns:xlink="//www.w3.org/1999/xlink" xlink:href="#s-text" class="text"></use>
    </svg>
  </div>
</body>
</html>

style.css

body {
    background-color: #444;
    -webkit-font-smoothing: antialiased;
    text-transform: uppercase;
}

.text {
    fill: none;
    font-size: 1.5em;
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-dasharray: 70 340;
    stroke-dashoffset: 0;
    -webkit-animation: stroke 8s infinite linear;
    animation: stroke 8s infinite linear;
    letter-spacing: 0.1em;
}

.text:nth-child(5n+1) {
    stroke: #ffe100;
    -webkit-animation-delay: -1.6s;
    animation-delay: -1.6s;
}

.text:nth-child(5n+2) {
    stroke: #e9f1df;
    -webkit-animation-delay: -3.2s;
    animation-delay: -3.2s;
}

.text:nth-child(5n+3) {
    stroke: #f2385a;
    -webkit-animation-delay: -4.8s;
    animation-delay: -4.8s;
}

.text:nth-child(5n+4) {
    stroke: #56d9cd;
    -webkit-animation-delay: -6.4s;
    animation-delay: -6.4s;
}

.text:nth-child(5n+5) {
    stroke: #3aa1bf;
    -webkit-animation-delay: -8s;
    animation-delay: -8s;
}

@-webkit-keyframes stroke {
    to {
        stroke-dashoffset: -410;
    }
}

@keyframes stroke {
    to {
        stroke-dashoffset: -410;
    }
}

svg {
    width: 100%;
    height: 100px;
    margin-top: 15px;
}

svg text {
    font-family: DecimaMonoPro, Helvetica, sans-serif;
    text-transform: uppercase;
}

@media all and (-ms-high-contrast:none),
(-ms-high-contrast:active) {
    #projects .header {
        display: none;
    }
    #projects .header.ie {
        display: block;
        margin: 0 0 25px;
    }
    #projects .header.ie .text {
        text-transform: uppercase;
        font: 56px DecimaMonoPro;
        color: #ffe100;
        text-align: center;
        font-weight: 700;
    }
}