<link href='https://fonts.googleapis.com/css?family=Montserrat+Alternates' rel='stylesheet' type='text/css'>

<svg id="logo" width="600" height="300">
  <text id="logo-text" x="50%" y="50%" text-anchor="middle">eye cycle</text>
</svg>

body {
  text-align: center;
}

#logo {
  fill: transparent;
  font-family: 'Montserrat Alternates', sans-serif;
  font-size: 120px;
  stroke-dasharray: 650 650;
  stroke-dashoffset: 650;
  stroke: #000;
  stroke-width: 3px;
  -ms-transition: stroke-dashoffset 5s linear;
  -webkit-transition: stroke-dashoffset 5s linear;
  -moz-transition: stroke-dashoffset 5s linear;
  transition: stroke-dashoffset 5s linear;
}

#logo.trace {
  stroke-dashoffset: 0;
}

var logoEl = document.getElementById('logo');

setTimeout(function () {
    
  logoEl.setAttribute('class', 'trace');
    
}, 50);