Introduction
Transforming text into a dynamic visual experience can be achieved with SVGs and CSS animations. In this guide, we’ll create an animated “India” using SVG graphics, CSS, and HTML. Let’s dive in!
The Code
1. HTML Structure:
Create an index.html file and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animating India with SVGs</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<body>
<!-- Letter I -->
<svg class="letter letter-i" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
<path class="cls-1 stem" style="--color: rgb(246, 9, 149)" d="M534,688c-21.86-.21-46.54-1.64-60.89-18.14-11.57-13.31-12.73-32.47-13.32-50.1q-3.09-92.09-6.16-184.16c-2-59.35-3.65-120.66,18.22-175.87a1078.09,1078.09,0,0,1-201.94,61.42c19.19-1.82,41.22-2.67,54.66,11.13,11,11.33,12.29,28.69,12.83,44.49q4.38,127.62,2.16,255.36c-.21,11.76-.66,24.21-7.08,34.07-10.83,16.63-32.76,19-50.79,20.49-4.64.37-25.91-.25-23.84,5.56,2.43,6.8,20.9,4.78,25.36,4.62q80.61-2.88,161.22-5.7C474.19,690.11,504.23,687.72,534,688Z"/>
<path class="cls-1 dot" style="--color: rgb(88, 40, 215)" d="M378.7,89.91c-17.65,14.52-34.72,30.92-43.88,51.86S326,189.21,341,206.48c8.14,9.39,19.75,15.23,31.72,18.55,25.22,7,53.35,3.24,75.49-10.7s37.77-38,40.81-64c1.33-11.45.17-23.6-5.85-33.43-6.27-10.25-17-16.86-28-21.87-14.09-6.45-29.52-10.94-44.95-9.58s-30.85,9.36-38.26,23"/>
<path class="cls-1 dot" style="--color: rgb(246, 9, 149)" d="M360,95a85.56,85.56,0,0,0-34.89,62.73c-1,15.07,2.42,31,12.41,42.35,7.93,9,19.27,14.35,30.81,17.67,22.29,6.41,46.87,5.91,68.14-3.37s38.78-27.73,45-50.08.3-48.15-16.48-64.17c-15-14.32-36.51-19.77-57.22-20.88S354.37,85.36,343.42,106"/>
<path class="cls-1 dot" style="--color: rgb(254, 219, 59)" d="M350.86,214.05c16.6,13.44,40.51,12.88,61.34,8.15,18.88-4.28,37.51-11.67,51.9-24.63,14.64-13.18,17.36-23.28,14-41.64A63.93,63.93,0,0,0,449.66,113c-19.08-12.13-43.28-14.4-65.45-9.91-17.84,3.61-35.33,11.77-47,25.78-9.84,11.86-16.54,31.25-10.52,46.34C331.89,188.16,339.89,205.18,350.86,214.05Z"/>
</svg>
<!-- Letter N -->
<svg class="letter letter-n" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
<path class="cls-1 stem" style="--color: rgb(254, 219, 59)" d="M150,700 L150,100 L200,100 L650,700 L600,700 L150,150 L150,700 Z" />
<path class="cls-1 dot" style="--color: rgb(88, 40, 215)" d="M650,100 L650,700 L600,700 L600,100 Z" />
</svg>
<!-- Letter D -->
<svg class="letter letter-d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
<path class="cls-1 stem" style="--color: rgb(49, 191, 186)" d="M150,100 L150,700 C150,700 400,700 500,550 C600,400 400,100 150,100 Z" />
<path class="cls-1 dot" style="--color: rgb(246, 9, 149)" d="M200,150 L200,650 C200,650 380,650 450,525 C520,400 380,150 200,150 Z" />
</svg>
<!-- Letter I -->
<svg class="letter letter-i" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
<!-- Reuse the original "I" SVG path here -->
<path class="cls-1 stem" style="--color: rgb(246, 9, 149)" d="M534,688c-21.86-.21-46.54-1.64-60.89-18.14-11.57-13.31-12.73-32.47-13.32-50.1q-3.09-92.09-6.16-184.16c-2-59.35-3.65-120.66,18.22-175.87a1078.09,1078.09,0,0,1-201.94,61.42c19.19-1.82,41.22-2.67,54.66,11.13,11,11.33,12.29,28.69,12.83,44.49q4.38,127.62,2.16,255.36c-.21,11.76-.66,24.21-7.08,34.07-10.83,16.63-32.76,19-50.79,20.49-4.64.37-25.91-.25-23.84,5.56,2.43,6.8,20.9,4.78,25.36,4.62q80.61-2.88,161.22-5.7C474.19,690.11,504.23,687.72,534,688Z"/>
<path class="cls-1 dot" style="--color: rgb(88, 40, 215)" d="M378.7,89.91c-17.65,14.52-34.72,30.92-43.88,51.86S326,189.21,341,206.48c8.14,9.39,19.75,15.23,31.72,18.55,25.22,7,53.35,3.24,75.49-10.7s37.77-38,40.81-64c1.33-11.45.17-23.6-5.85-33.43-6.27-10.25-17-16.86-28-21.87-14.09-6.45-29.52-10.94-44.95-9.58s-30.85,9.36-38.26,23"/>
<path class="cls-1 dot" style="--color: rgb(246, 9, 149)" d="M360,95a85.56,85.56,0,0,0-34.89,62.73c-1,15.07,2.42,31,12.41,42.35,7.93,9,19.27,14.35,30.81,17.67,22.29,6.41,46.87,5.91,68.14-3.37s38.78-27.73,45-50.08.3-48.15-16.48-64.17c-15-14.32-36.51-19.77-57.22-20.88S354.37,85.36,343.42,106"/>
<path class="cls-1 dot" style="--color: rgb(254, 219, 59)" d="M350.86,214.05c16.6,13.44,40.51,12.88,61.34,8.15,18.88-4.28,37.51-11.67,51.9-24.63,14.64-13.18,17.36-23.28,14-41.64A63.93,63.93,0,0,0,449.66,113c-19.08-12.13-43.28-14.4-65.45-9.91-17.84,3.61-35.33,11.77-47,25.78-9.84,11.86-16.54,31.25-10.52,46.34C331.89,188.16,339.89,205.18,350.86,214.05Z"/>
</svg>
<!-- Letter A -->
<svg class="letter letter-a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
<path class="cls-1 stem" style="--color: rgb(246, 9, 149)" d="M400,100 L200,700 L250,700 L350,450 L450,700 L500,700 L400,100 Z" />
<path class="cls-1 dot" style="--color: rgb(254, 219, 59)" d="M300,400 L500,400 L450,550 L350,550 Z" />
</svg>
</body>
</html>
CSS Styling:
Create a styles.css file with the following code:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
}
.letter {
width: 35vh;
height: 35vh;
margin: 0 2vh;
}
.cls-1 {
fill: none;
stroke: #000;
stroke-miterlimit: 10;
stroke-width: 10px;
stroke-linecap: round;
stroke-dasharray: 500;
animation: lines 3s infinite;
}
.dot {
stroke-dasharray: 500;
stroke: var(--color);
}
.stem {
stroke: var(--color);
}
@keyframes lines {
100% {
stroke-dashoffset: 3000;
}
}Conclusion
By combining SVGs with CSS animations, you can create engaging and visually appealing text effects. This tutorial provided a basic setup to get you started with animated text using SVG and CSS. Feel free to experiment with different designs and animations to enhance your web projects!
