TypeFlow

Create stunning animated SVG text for your GitHub READMEs and projects

_{Inspired by readme-typing-svg 💙}

A beautiful, feature-rich Python Flask application that generates stunning dynamic animated SVGs with 20+ animation styles, custom dropdowns, and realistic effects like fire 🔥. Built with extensive customization options, local fonts for reliable GitHub embeds, and optimized for Vercel deployment.

✨ Features

🎭 Animation Styles (26+ Types!)

Classic Effects

• typing - Classic typewriter effect with cursor
• typewriter - Letter-by-letter reveal animation
• fade - Fade-in with letter stagger
• slide - Slide in from left
• wave - Smooth wave motion
• zoom - Zoom in reveal
• pulse - Pulsing scale effect
• flip - 3D flip rotation
• bounce - Bouncy spring animation
• stroke - Handwriting stroke animation

Glitch & Distortion

• glitch - RGB glitch effect
• glitch-heavy - Intense glitchy corruption
• glitch-scan - Scanline glitch with color shift
• corrupt - Scrambled corruption effect
• static - TV static noise effect
• shake - Vibrating shake motion

Light & Color Effects

• glow - Pulsing glow effect
• neon - Neon sign with realistic flicker
• rainbow - Cycling rainbow hue rotation
• sparkle - Sparkling brightness animation
• gradient-shift - Smooth gradient color cycling
• blur-focus - Blur to focus reveal

Special Effects

• fire 🔥 - NEW! Realistic flame animation with triple-layered glow, flickering, and upward movement
• rotate3d - 3D rotation animation
• matrix - Matrix rain cascade
• terminal - Terminal-style with cursor
• obfuscated - Minecraft-style scrambled text (supports ?(text) syntax)

💡 Obfuscated Text Syntax

The ?(text) syntax lets you scramble specific words while keeping others normal - perfect for creating Minecraft-style text effects!

How to use: Wrap any word in ?() to make it scramble:

This animates "Hello" normally while "World" rapidly scrambles through random characters!

More Examples:

Compatible Animations: flip, bounce, zoom, rotate3d, pulse, slide, obfuscated

Note: The obfuscated animation scrambles all text by default. Use ?(text) syntax with other animations for selective scrambling.

🎨 Advanced Customization

Text & Typography

• Multi-line support with semicolon separator
• Local fonts - 7 embedded TTF fonts (Fira Code, Inter, JetBrains Mono, Roboto, Poppins, Montserrat, Oswald)
• Font size - Customizable from 10px to 100px+
• Letter spacing - Adjust spacing between characters

Colors & Effects

• Gradient support - Use multiple colors separated by commas
• Gradient angle - Control gradient direction (0-360°)
• Background color - Solid or transparent backgrounds
• Glow effects - Neon and shadow effects

Animation Control

• Duration - Control animation speed (ms)
• Pause - Delay between loops (ms)
• Repeat - Loop infinitely or play once
• Stagger delay - Control letter-by-letter timing
• Glitch intensity - Adjust glitch effect strength (1-20)

Layout

• Width & Height - Custom dimensions
• Center alignment - Center or left-align text
• Multiline - Stack multiple lines vertically

🚀 Usage

Quick Start

The endpoint is: https://animatedsvg.vercel.app/generate

Add parameters using ? and &. Important: Use URL encoding for special characters (; = %3B, space = %20, etc.)

Basic Examples

Simple typing animation:

Multiple lines (use %3B for semicolons):

Choose an animation:

Add colors (use commas for gradients):

Customize font and size:

Complete customization:

📋 URL Parameters Reference

Parameter	Default	Description	Example Values
lines	"Hello;World!"	Text content (use %3B for ; separator, %20 for spaces)	lines=Hello%20World%3BLine%202
animation	"typing"	Animation style (see list above)	animation=wave
font	"Fira Code"	Font family (local fonts available)	font=JetBrains+Mono
color	"409EFF"	Text color (hex without #) or gradient	color=FF6B6B or color=FF6B6B,4ECDC4,45B7D1
bg_color	"transparent"	Background color	bg_color=000000 or bg_color=transparent
size	20	Font size in pixels	size=32
width	600	SVG width in pixels	width=800
height	100	SVG height in pixels	height=150
duration	5000	Animation duration in milliseconds	duration=3000
pause	1000	Pause between animation loops (ms)	pause=2000
repeat	true	Loop animation infinitely	repeat=true or repeat=false
center	true	Center text horizontally	center=true or center=false
multiline	auto	Stack lines vertically (auto enables for multiple lines)	multiline=true
letter_spacing	0	Spacing between letters in pixels	letter_spacing=2
glitch_intensity	5	Glitch effect strength (1-20)	glitch_intensity=15
stagger_delay	50	Delay between character animations (ms)	stagger_delay=100
gradient_angle	45	Gradient direction in degrees (0-360)	gradient_angle=90

🎯 Preset Templates

Copy and paste these ready-to-use examples into your README:

Cyberpunk Theme

Terminal Style

Matrix Effect

Neon Sign

Fire Effect

Rainbow Wave

Glitch Corruption

Retro Gaming

🛠️ Installation & Deployment

Local Development

1. Install dependencies:

pip install -r requirements.txt

2. Run locally:

python api/app.py

3. Access:

• Main endpoint: http://localhost:5000/

Deploy to Vercel

1. Install Vercel CLI:

npm i -g vercel

2. Deploy:

vercel

3. Production deployment:

vercel --prod

Configuration

The project includes vercel.json for automatic routing:

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/api/app"
    }
  ]
}

🎨 Popular Font Options

• Fira Code - Clean coding font with ligatures
• JetBrains Mono - Modern monospace
• Roboto Mono - Geometric monospace
• Space Mono - Retro monospace
• Orbitron - Futuristic/sci-fi
• Press Start 2P - Retro 8-bit gaming
• VT323 - Terminal/console style
• Share Tech Mono - Tech-inspired
• Courier New - Classic typewriter

🌟 Examples in the Wild

GitHub Profile README

Project Banner

Status Badge

🔧 Tech Stack

• Backend: Flask 3.0.0 (Python 3.11)
• Templating: Jinja2
• Deployment: Vercel Serverless Functions
• Frontend: Tailwind CSS (demo page)

📝 Notes

• All SVGs include Cache-Control: no-cache headers for immediate updates
• Animations use CSS @keyframes for broad browser support
• Google Fonts are loaded dynamically via CDN
• Character-level animations (wave, fade, matrix) split text into individual <tspan> elements

🤝 Contributing

Feel free to fork, modify, and extend! Some ideas:

• Add emoji/icon animation support
• Implement path morphing effects
• Create sound wave visualizations
• Add particle effects around text
• Build export functionality (download as SVG/GIF)

📜 License

MIT License - Feel free to use in your projects!

---

Built with ⚡ Python & Flask | Optimized for 🚀 Vercel