<div class="logo">
  <svg viewBox="0 0 600 300">

    <!-- the copy -->
    <symbol id="s-text">
      <text text-anchor="middle" x="50%" y="50%" dy=".35em">
        Illusid
      </text>
    </symbol>  

    <!-- duplicate copy for dashes -->
    <use xlink:href="#s-text" class="text"></use>
    <use xlink:href="#s-text" class="text"></use> 
    <use xlink:href="#s-text" class="text"></use>
    <use xlink:href="#s-text" class="text"></use>
    <use xlink:href="#s-text" class="text"></use>
  </svg>
</div>
<div class="overlay-content">
  <nav>
    <!-- <section><div><a href="#">bio</a></div></section>
    <section><div><a href="#">blog</a></div></section>
    <section><div><a href="#">music</a></div></section>
    <section><div><a href="#">video</a></div></section>
    <section><div><a href="#">swag</a></div></section> -->
  </nav>
</div>
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:900);
.logo {
  display: inline;
  font: 6rem 'Playfair Display';
  text-transform: uppercase;
  margin: 0;
}
.overlay-content {
  color: white;
  font: 1rem serif;
  position: absolute;
  z-index: 2;
}
a.link-text {
  font-weight: bold;
  font-size: 1rem;
  text-decoration: none;
  color: white;
  position: absolute;
  left: 3rem;
  top: 3rem;
  z-index: 2;
}
.text {
  fill: none;
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-dasharray: 70 330;
  stroke-dashoffset: 0;
  -webkit-animation: stroke 6s infinite linear;
  animation: stroke 6s infinite linear;
}

.text:nth-child(5n + 1) {
  stroke: #F2385A;
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
.text:nth-child(5n + 2) {
  stroke: #F5A503;
  -webkit-animation-delay: -2.0s;
  animation-delay: -2.0;
}

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

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

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

@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

html, body {
  height: 100%;
}

body {
  background: #111;
  background-size: .2rem 100%;
}

svg {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

section > div, section > div a {
  font-size: 1.6rem;
  font-family: Futura; 
  padding: .8rem;
  color: #F5A503;
  // color: #F2385A;
  // color: #E9F1DF;
  // color: #56D9CD;
}

section > div {
  font-size: 1.6rem;
  font-family: "Futura Koya", Futura, san-serif; 
  font-weight: bold;
  padding: .8rem;
  color: white;
  // color: #F2385A;
  // color: #E9F1DF;
  // color: #56D9CD;
  a {
    text-decoration: none;
    color: #F5A503;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.