Skip to content

Instantly share code, notes, and snippets.

@ThomasThoren
Created April 5, 2016 01:12
Show Gist options
  • Save ThomasThoren/7f9f922eb7c78088f2ff5cb5477015a6 to your computer and use it in GitHub Desktop.
Save ThomasThoren/7f9f922eb7c78088f2ff5cb5477015a6 to your computer and use it in GitHub Desktop.
FiveThirtyEight text animation
<!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="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text"></use>
</svg>
</div>
</body>
</html>
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment