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.

https://cdn.dribbble.com/users/1409133/screenshots/13003620/media/7092ce9b822df20efa48c77394ac3e0b.mp4

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

Add Comment
0 Answer(s)

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.