<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 860 250"> <symbol id="web-coderskull"> <text text-anchor="middle" x="50%" y="70%">Coder Skull</text> </symbol> <g class = "webcoderskull"> <use xlink:href="#web-coderskull" class="web-coder-skull"></use> <use xlink:href="#web-coderskull" class="web-coder-skull"></use> <use xlink:href="#web-coderskull" class="web-coder-skull"></use> <use xlink:href="#web-coderskull" class="web-coder-skull"></use> <use xlink:href="#web-coderskull" class="web-coder-skull"></use> </g> </svg> </div> <div class="row"> <h4> By: Web Coder Skull</h4> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Roboto'); html, body{ height: 100%; font-weight: 800; } body{ background: #000; font-family: 'Roboto', sans-serif; } h4{ color:#fff; } svg { display: block; font: 10.5em 'Roboto'; font-family: 'Roboto', sans-serif; width: 960px; height: 300px; margin: 0 auto; } .web-coder-skull { fill: none; stroke: white; stroke-dasharray: 6% 29%; stroke-width: 5px; stroke-dashoffset: 0%; animation: stroke-offset 5.5s infinite linear; } .web-coder-skull:nth-child(6){ stroke: #263238; animation-delay: -1; } .web-coder-skull:nth-child(2){ stroke: #26abe2; animation-delay: -2s; } .web-coder-skull:nth-child(3){ stroke: orange; animation-delay: -3s; } .web-coder-skull:nth-child(4){ stroke: red; animation-delay: -4s; } .web-coder-skull:nth-child(5){ stroke: #fff; animation-delay: -5s; } .web-coder-skull:nth-child(1){ stroke: green; animation-delay: -1s; } @keyframes stroke-offset{ 100% {stroke-dashoffset: -35%;} }