💡 Projekt (11) Animated text effect SVG Free | CSS HTML tutorial code

CSS3
.container { width: 100%; height: 100vh; background: black; } svg{ font-size: 150px; padding-top: 11%; } .copy{ fill: none; stroke: #fefefe; stroke-width: 2px; stroke-dasharray: 8% 20%; stroke-dashoffset: 0%; animation: textanimation 6s linear infinite; } @keyframes textanimation{ 100%{ stroke-dashoffset: -35%; } } .copy1{ stroke:#f30101; animation-delay: -1s; } .copy2{ stroke:#751aff; animation-delay: -2s; } .copy3{ stroke:#ff8000; animation-delay: -3s; } .copy4{ stroke:#ffff00; animation-delay: -4s; } .copy5{ stroke:#ff00bf; animation-delay: -5s; }
HTML 5
<div class="container"> <svg viewBox="0 0 1000 400"> <text id="mytext" x="50%" y="50%" text-anchor="middle" fill="none">CSS HTML</text> <use xlink:href="#mytext" class="copy copy1"></use> <use xlink:href="#mytext" class="copy copy2"></use> <use xlink:href="#mytext" class="copy copy3"></use> <use xlink:href="#mytext" class="copy copy4"></use> <use xlink:href="#mytext" class="copy copy5"></use> </svg> </div>