Animated SVG banners for GitHub READMEs, repositories, and websites.

Table of Contents

• Features
• Technology Stack
• Technical Block
  • Project Structure
  • Key Design Decisions
• Getting Started
  • Prerequisites
  • Installation
• Testing
• Deployment
• Usage
• Configuration
• License
• Contacts
• Support the Project

Features

This project is intentionally simple on the outside and very practical on the inside.

• Pure SVG output: the API returns static SVG markup with embedded SVG animations, no runtime JavaScript required in the rendered image.
• GitHub-friendly: generated images are safe for markdown embedding in README files and profile pages.
• 20 animation engines out of the box (typing, fade, slide, glitch, matrix, rainbow, etc.).
• Serverless-first architecture: deploys cleanly on Vercel via lightweight API routes.
• Animation parameterization via query string: customize text lines, timings, colors, dimensions, alignment, repeat mode, and spacing.
• Demo UI included: a no-build frontend (index.html + vanilla JS/CSS) to tune params and copy ready-to-paste markdown.
• Fast iteration loop: edit files, rerun vercel dev, test instantly with raw API URLs.
• Separation of concerns: each animation is isolated in its own module and registered centrally.

Technology Stack

Core stack used in this repository:

• Runtime: Node.js 18+
• Backend/API: Vercel Serverless Functions (CommonJS modules)
• Frontend: vanilla HTML, CSS, and JavaScript (no framework, no bundler)
• Output format: SVG + native SVG animation primitives (animate, animateTransform, SVG/CSS animation patterns)
• Deployment target: Vercel
• Source control workflow: Git + GitHub PRs

Technical Block

Project Structure

readme-SVG-typing-generator/
├── api/
│   ├── index.js                # Main API entrypoint: validates params and composes full SVG response
│   ├── animations.js           # API-level animation exports adapter
│   └── animations/
│       ├── index.js            # Registry: animation name -> module
│       ├── _utils.js           # Shared animation helpers
│       ├── typing.js           # One animation implementation per file
│       ├── fade.js
│       ├── slide.js
│       └── ...
├── assets/
│   ├── css/styles.css          # Demo page styling
│   └── js/app.js               # Demo page logic (controls, previews, URL generation)
├── index.html                  # Demo web UI
├── vercel.json                 # Routing/runtime config for Vercel
├── CONTRIBUTING.md             # Contributor workflow and collaboration contract
└── README.md                   # Project documentation

Key Design Decisions

• No heavy framework layer: this repo avoids framework lock-in and ships straight-up JS modules, which keeps cold starts and cognitive load low.
• Animation modules are pluggable: every animation is self-contained, so adding new effects is a low-risk delta.
• Param normalization in API layer: query inputs are parsed once and exposed as normalized options to animation modules.
• Demo and API are decoupled: index.html can evolve independently without changing the generation contract.
• URL-driven API contract: reproducibility is excellent; a single URL is both config and artifact locator.

Getting Started

Prerequisites

Install these dependencies on your machine:

• Git (latest stable)
• Node.js 18+ (LTS recommended)
• npm (bundled with Node.js)
• Vercel CLI for local serverless simulation

node -v
npm -v

If node is below 18, upgrade before continuing.

Installation

# 1) Fork repository on GitHub, then clone your fork
git clone https://github.com/YOUR_USERNAME/readme-SVG-typing-generator.git
cd readme-SVG-typing-generator

# 2) Install Vercel CLI globally (skip if already installed)
npm install -g vercel

# 3) Start local development server
vercel dev

Local endpoints you will use most:

• http://localhost:3000/ -> demo UI
• http://localhost:3000/api -> SVG generation endpoint

Testing

There is no monolithic test suite in this repository right now, so validation is primarily functional smoke testing against API responses and visual checks.

Recommended local checks:

# Start local runtime
vercel dev

# Basic API sanity: should return SVG XML
curl "http://localhost:3000/api?lines=Hello+World&animation=typing"

# Multi-line + animation variant
curl "http://localhost:3000/api?lines=Line+1;Line+2;Line+3&animation=rainbow&multiline=true&height=120"

# Non-looping variant
curl "http://localhost:3000/api?lines=One+Shot&animation=glitch&repeat=false"

What to verify:

• Response is valid SVG content.
• Text is positioned correctly for center / vCenter.
• Timings behave correctly for duration, pause, and repeat.
• No broken markup when lines include encoded spaces and separators.

Deployment

Option A: One-click Vercel deploy

Use the deploy badge at the top of this README. It clones and provisions a deployable project in Vercel with minimal friction.

Option B: Manual Vercel deployment

# Login once (if needed)
vercel login

# Deploy preview
vercel

# Deploy production
vercel --prod

CI/CD notes

• Vercel automatically builds/deploys from connected GitHub branches.
• Production deployments are typically tied to the default branch.
• Pull Requests can produce preview URLs for visual/API QA before merge.

Usage

Typical markdown embed for README/profile:

[![Typing SVG](https://readme-svg-typing-generator.vercel.app/api?lines=Senior+Engineer;Building+cool+things&animation=typing&color=36BCF7&size=24&duration=3000&pause=1000&center=true&vCenter=true&width=700&height=80)](https://github.com/OstinUA)

Raw HTML usage:

<!-- Drop into docs site, personal page, or dashboard -->
<img
  alt="Animated SVG typing banner"
  src="https://readme-svg-typing-generator.vercel.app/api?lines=API+First;SVG+Animations&animation=neon&color=00e5ff&background=00000000&size=28&width=760&height=90&repeat=true"
/>

Local debug flow:

# 1) Launch local server
vercel dev

# 2) Open in browser or fetch via curl
open "http://localhost:3000/api?lines=Debug+Run&animation=matrix&size=32"

# 3) Iterate params fast by editing query string

Configuration

The project is primarily configured through API query params.

Parameter	Default	Description
lines	Hello+World!	Text lines separated by ; (or custom separator)
animation	typing	Animation engine identifier
color	36BCF7	Hex text color without #
background	00000000	8-digit RGBA hex background
size	20	Font size in pixels
font	monospace	Font preset: monospace, code, sans, serif
duration	5000	Per-line animation duration in ms
pause	1000	Pause between lines in ms
width	435	SVG width
height	50	SVG height
center	false	Horizontal centering toggle
vCenter	false	Vertical centering toggle
multiline	false	Render all lines simultaneously
repeat	true	Loop animation
random	false	Randomize line sequence
letterSpacing	normal	CSS letter-spacing value
separator	;	Custom line delimiter

Environment variables:

• No mandatory .env file is required for the default local flow.
• Vercel project-level env vars can still be added if your deployment pipeline requires custom behavior.

License

This project is distributed under the GPL-3.0 license. See LICENSE for legal details.

Contacts

• GitHub: OstinUA
• Issues: Project Issues
• Discussions/updates: use repository social links below

❤️ Support the Project

If you find this tool useful, consider leaving a ⭐ on GitHub or supporting the author directly: