How to Add a Typing Animation to Your GitHub Profile README

The readme-typing-svg project renders an animated SVG that simulates typing and erasing text. You configure it entirely through URL parameters — the text strings to display, the typing speed, pause duration, font, color, and size. The resulting image URL can be embedded directly in your README as a standard image tag.

The animation loops continuously, cycling through each string in order. Common use cases include rotating job titles ('Full Stack Developer', 'Open Source Contributor', 'TypeScript Enthusiast'), cycling through a personal tagline and technical focus, or alternating between a serious description and a lighthearted one. The animation works in both GitHub's light and dark themes when you choose appropriate colors.

The service is hosted at readme-typing-svg.demolab.com and requires no account. Build your animation URL by configuring the parameters:

[![Typing SVG](https://readme-typing-svg.demolab.com?font=Fira+Code&size=22&pause=1000&color=58A6FF&width=435&lines=Full+Stack+Developer;Open+Source+Contributor;Coffee+Addict)](https://git.io/typing-svg)

Key parameters:

• font: Google Fonts name (e.g., Fira+Code, Roboto, Montserrat)
• size: Font size in pixels (default: 20)
• pause: Milliseconds to pause after completing each line (default: 1000)
• color: Hex color without # (e.g., color=58A6FF for GitHub blue)
• width: SVG width in pixels (default: 435)
• lines: Text strings separated by semicolons
• repeat: Set to false to animate once instead of looping

Use the interactive generator at readme-typing-svg.demolab.com/demo/ to preview and build your URL without editing parameters manually.

For dark mode compatibility, use colors that read well on both light and dark backgrounds. GitHub blue (58A6FF) and GitHub green (3FB950) are good defaults since they match GitHub's own UI accent colors. Avoid very light colors (near white) which will be invisible on light-mode profiles.

Keep each line under 40 characters to prevent wrapping on narrow screens. If you want a multiline layout with a static first line, combine the typing SVG with a regular H1 heading: use the heading for your name, and the typing SVG for your rotating role. Wrapping the image in a center-align div or using align=center in the img tag creates a clean header layout that works across screen sizes.

If the SVG shows as a broken image, check that your lines parameter uses + instead of spaces and ; instead of line breaks. Special characters must be URL-encoded — an ampersand in your text needs to be %26, and a colon becomes %3A.

If the animation appears but the text is cut off, increase the width parameter. The default 435px fits standard GitHub profile widths, but some themes or screen sizes may require adjustments. If the font doesn't render correctly, verify the font name matches exactly what is available on Google Fonts — try Fira+Code instead of FiraCode if the monospace variant isn't loading.