CSS TEXT

HTML
<svg viewBox="0 0 800 600"> <symbol id="s-text"> <text class="text--line" y="35%" x="50%" text-anchor="middle"> INDIA </text> <text class="text--line2" y="68%" x="50%" text-anchor="middle"> by Vishal </text> </symbol> <g class="g-ants"> <use class="text-copy" xlink:href="#s-text"/> <use class="text-copy" xlink:href="#s-text"/> <use class="text-copy" xlink:href="#s-text"/> <use class="text-copy" xlink:href="#s-text"/> <use class="text-copy" xlink:href="#s-text"/> </g> </svg>
CSS
HTML, BODY { height: 100%; } BODY { background: #082330; background-size: .12em 100%; font: 16em/1 Arial; } .text--line { font-size: 2.5em; } svg { position: absolute; width: 100%; height: 100%; } .text-copy { fill: none; stroke: white; stroke-dasharray: 7% 28%; stroke-width: 3px; -webkit-animation: stroke-offset 9s infinite linear; animation: stroke-offset 9s infinite linear; } .text-copy:nth-child(1) { stroke: #360745; stroke-dashoffset: 7%; } .text-copy:nth-child(2) { stroke: #D61C59; stroke-dashoffset: 14%; } .text-copy:nth-child(3) { stroke: #E7D84B; stroke-dashoffset: 21%; } .text-copy:nth-child(4) { stroke: #EFEAC5; stroke-dashoffset: 28%; } .text-copy:nth-child(5) { stroke: #1B8798; stroke-dashoffset: 35%; } @-webkit-keyframes stroke-offset { 50% { stroke-dashoffset: 35%; stroke-dasharray: 0 87.5%; } } @keyframes stroke-offset { 50% { stroke-dashoffset: 35%; stroke-dasharray: 0 87.5%; } }
JAVASCRIPT
Expand for more options Login