SVG Stroke Text Effect

index.html

<div class="logo">
  <svg viewBox="0 0 300 100">
  <symbol id="s-text">
    <text text-anchor="middle" x="50%" y="50%" dy=".35em">
      blanc
    </text>
  </symbol>
  <use xlink:href="#s-text" class="text"></use> 
</svg>
</div>

style.css

/* Main styles */


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

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

.logo {
  position:relative;
  width: 300px;
  height: 100px;
  margin: 1em;
}

.text {
  fill: none;
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-dasharray: 10 10;
  stroke-dashoffset: 0;
  -webkit-animation: stroke 1s infinite linear;
  animation: stroke 1s infinite linear;
  stroke: #fb2668;
}

/* Other styles */

html,
body {
  height: 100%;
}

body {
  background: #ffffff;
  font: 1em/1.5 'Accord ExtraBold', 'Accord';
  margin: 0;
  font-weight: bold;
  
}

svg {
  font: 8.5em/1 'Accord ExtraBold', 'Accord';
  margin: 0 0 0 -0.02em;
  font-weight: bold;
  letter-spacing: -0.01em;
  position: absolute;
  width: 100%;
  height: 100%;
}

SVG Stroke Text Effect.markdown

SVG Stroke Text Effect

Forked from Michael Musgrove's Pen SVG Stroke Text Effect.

Forked from Michael Musgrove's Pen SVG Stroke Text Effect.

A Pen by Stephen Hawkes on CodePen.

License.