<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="row"> <svg viewBox="0 0 860 250"> <symbol id="web-coderskull"> <text text-anchor="middle" x="50%" y="70%">Raj Saini</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>

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%;} }