In this tutorial we going to create a Animate Text with SVG and CSS . Every one want something unique in their website, some one go for clean design , some people prefer colorful and vivid design and some want animation and effects. In this tutorial we are using word “Codentricks” and will animate with infinite loop.
Full Code for Animate Text with SVG and CSS :
create a file called index.html with code given below and save it and launch in any modern web browser.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animated Text</title> </head> <body> <svg viewbox="0 0 1350 650"> <text x="50%" y="50%" fill="transparent" text-anchor="middle"> Codentricks </text> </svg> <style> svg text{ stroke:#000; font-size: 150px; font-family: Arial,Times,serif; font-weight: 700; stroke-width:5; animation: animateText 6s infinite; } @keyframes animateText { 0%{ stroke-dasharray:0 50%; } 100%{ stroke-dasharray:50 0%; } } </style> </body> </html>