<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row"> <div class="col-xs-12 col-sm-12 center"> <svg class="aa" viewBox="0 0 100% 250"> <symbol id="web-coderskull"> <text text-anchor="middle" x="50%" y="70%">Săn Sự Kiện</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>

.aa { display: block; font: 10.5em 'Roboto'; font-family: 'Roboto', sans-serif; /*width: 960px;*/ /*height: 300px;*/ 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%;} }