Like Us Like Us Facebook Subscribe Subscribe us YouTube Whatsapp Share us Whatsapp Query Send your queries

How to create Animate Text with SVG and CSS

How to create Animate Text with SVG and CSS

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>

OUTPUT Animate Text with SVG and CSS :

Codentricks

5 1 vote
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments