Skip to content

Instantly share code, notes, and snippets.

@hawkz
Created September 5, 2015 17:30
Show Gist options
  • Save hawkz/91f8add192fdc4e55ba9 to your computer and use it in GitHub Desktop.
Save hawkz/91f8add192fdc4e55ba9 to your computer and use it in GitHub Desktop.
SVG Stroke Text Effect
<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>
/* 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%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment