<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <svg viewBox="0 0 960 300"> <symbol id="s-text"> <text text-anchor="middle" x="50%" y="80%">Rose Skead </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> </div> <p> <a href="http://bootsnipp.com/iframe/qr0vx" target="_blank">View Full Screen</a> <br> <a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fbootsnipp.com%2Ffullscreen%2Fqr0vx" target="_blank">HTML 5 Valid</a></small> </p> <div class="row"> <address> author by: Ganesh Gujjeti </address> </div> </div>

@import url(https://fonts.googleapis.com/css?family=Montserrat); html, body{ height: 100%; font-weight: 800; } body{ background: #bf004c; 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: #c64bee; animation-delay: -1; } .text-copy:nth-child(2){ stroke: #6693e6; animation-delay: -2s; } .text-copy:nth-child(3){ stroke: #b0ebf6; animation-delay: -3s; } .text-copy:nth-child(4){ stroke: #e6cb17; animation-delay: -4s; } .text-copy:nth-child(5){ stroke: #e64d17; animation-delay: -5s; } @keyframes stroke-offset{ 100% {stroke-dashoffset: -35%;} }