<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="lazy" data src="http://res.cloudinary.com/okompier/image/upload/v1493170546/448665-macaron_1_h1v1z0.jpg)"> </div> <div class="container"> <div class="row"> <svg viewBox="0 0 1060 400"> <symbol id="s-text"> <text text-anchor="middle" x="50%" y="80%">zed macarons</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> <div class="row"> </div> </div> </div>

html, body{ height: 100%; font-weight: 800; } body{ background-color:#00e6b8; font-family: verdana; } svg { display: block; font: 10.5em verdana; width: 1060px; height: 400px; 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: #4d0039; animation-delay: -1; } .text-copy:nth-child(2){ stroke: #ff3399; animation-delay: -2s; } .text-copy:nth-child(3){ stroke: #f2f2f2; animation-delay: -3s; } .text-copy:nth-child(4){ stroke: #9999ff; animation-delay: -4s; } .text-copy:nth-child(5){ stroke: #ffffb3; animation-delay: -5s; } @keyframes stroke-offset{ 100% {stroke-dashoffset: -35%;} }