Skip to content

Instantly share code, notes, and snippets.

@DrOctogon
Created December 13, 2019 06:48
Show Gist options
  • Save DrOctogon/29aa0674a96108f1e9b6cfc8f60ba484 to your computer and use it in GitHub Desktop.
Save DrOctogon/29aa0674a96108f1e9b6cfc8f60ba484 to your computer and use it in GitHub Desktop.
Text Animation: Montserrat
<svg viewBox="0 0 960 300">
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="80%">Montserrat</text>
</symbol>
<g class = "g-ants">
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
</g>
</svg>
/* This Pen is best viewable in Google Chrome.
*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);
html, body{
height: 100%;
font-weight: 800;
}
body{
background: #030321;
font-family: Arial;
}
svg {
display: block;
font: 10.5em 'Montserrat';
width: 960px;
height: 300px;
margin: 0 auto;
}
.text-copy {
fill: none;
stroke: white;
stroke-dasharray: 6% 29%;
stroke-width: 5px;
stroke-dashoffset: 0%;
animation: stroke-offset 5.5s infinite linear;
}
.text-copy:nth-child(1){
stroke: #4D163D;
animation-delay: -1;
}
.text-copy:nth-child(2){
stroke: #840037;
animation-delay: -2s;
}
.text-copy:nth-child(3){
stroke: #BD0034;
animation-delay: -3s;
}
.text-copy:nth-child(4){
stroke: #BD0034;
animation-delay: -4s;
}
.text-copy:nth-child(5){
stroke: #FDB731;
animation-delay: -5s;
}
@keyframes stroke-offset{
100% {stroke-dashoffset: -35%;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment