How can I make this type of text stroke HTML CSS Design?
I need this type of CSS effect as shown in this link background Text on 404 at random places. I hope you can help me or redirect to code where this type of design code already written. This text stroke animation is what I am seeking for.
I have done this till now.
<html> <head> <title>SPlash screen</title> <style> body{ background-color: darkslategray; } svg{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 550px; } svg text{ font-size: 300px; fill: rgba(0,0,0,.1); stroke-width: 4px; stroke:aliceblue; stroke-linejoin: round; animation: animate 40s linear infinite; stroke-dasharray: 500; } @keyframes animate { 100%{ stroke-dashoffset: 760; } } </style> </head> <body> <svg> <symbol id="text"> <text text-anchor="middle" x="50%" y="50%">DAVV</text> </symbol> <use xlink:href="#text"></use> </svg> </body> </html>
Thanks