Animated SVG Text Generator
Write your text, pick a font and animation style, and get a fully animated SVG file you can drop straight into any website. No uploads, no accounts, no limits.
Text
Font
Animation
Letters draw themselves stroke by stroke
Colors
Canvas Size
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 160" width="720" height="160">
<style><![CDATA[
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
.wt { fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 15000; stroke-dashoffset: 15000;
animation: draw 2s ease forwards infinite; }
@keyframes draw {
0% { stroke-dashoffset: 15000; fill-opacity: 0; }
75% { fill-opacity: 0; }
100% { stroke-dashoffset: 0; fill-opacity: 1; fill: #ffffff; }
}
]]></style>
<rect width="720" height="160" fill="#1e1e2e"/>
<text class="wt" x="57.60000000000002" y="108.80000000000001" font-family=""Poppins", sans-serif" font-size="72" font-weight="normal" font-style="normal">Your Text Here</text>
</svg>How to use
Paste the SVG code directly into your HTML. Animations run in all modern browsers. The Google Font loads automatically when viewed online — for fully offline use, choose a system font like Georgia or Arial.
How to Create an Animated SVG
- ✏️
1. Type your text
Enter the text you want to animate — a word, a tagline, or your brand name.
- ✨
2. Choose a font and animation
Pick from 25+ Google Fonts and select one of 12 animation effects like wave, neon glow, typewriter, or glitch.
- 🎨
3. Adjust colors and timing
Set your text color, background color, animation speed, and loop count. Preview updates live.
- 📥
4. Download or copy the SVG
Click Download SVG or copy the code directly. Drop the file or code into any website — no JavaScript needed at runtime.
What You Can Do With Animated SVGs
Drop Into Any Website
Paste the SVG code directly into your HTML — no extra CSS file, no JavaScript, no dependencies. It just works.
Fully Scalable
SVG scales perfectly to any screen size. One file works on mobile, tablet, and desktop with crisp edges at every resolution.
CSS-Powered Animations
All animations are pure CSS keyframes inside the SVG. They run at 60fps using the browser's compositor — no JavaScript needed at runtime.
Frequently Asked Questions
Do the animations require JavaScript to run?⌄
No. All animations are pure CSS keyframes embedded inside the SVG file. Once downloaded, the SVG animates on its own — no JavaScript, no external CSS file, no dependencies. It works as an <img> tag or inline SVG.
Can I embed the SVG on my website?⌄
Yes. You can use the SVG as an <img src="animation.svg"> tag, paste the SVG code inline in your HTML, or use it as a CSS background-image. Inline embedding gives you the most control and allows CSS colour overrides.
Do the Google Fonts load in the downloaded SVG?⌄
The SVG includes a Google Fonts @import in its <style> block, so the font loads when the SVG is viewed in a browser connected to the internet. For offline use or email, the font falls back to a system font.
What is the difference between the animation effects?⌄
Stroke draw traces the text outline from left to right. Typewriter reveals one character at a time. Wave makes each letter rise and fall in sequence. Neon pulses a glow effect. Glitch shifts the text with a colour-split artefact. Rainbow cycles the hue of each character. Zoom, bounce, fade, slide, flicker, and shake are self-explanatory.
Can I use this on a dark background?⌄
Yes. Set the background to a dark colour (or transparent) and choose a light or vibrant text colour. The neon and rainbow effects look especially good on dark backgrounds.