A tool to make your GitHub README impossible to ignore 🚀

ScribeSVG is a tool that generates customizable typing animation SVGs for GitHub README profiles, offering features like 14+ developer fonts, neon glows, linear gradients, and custom layouts such as a macOS Terminal frame. It overcomes GitHub's image proxy restrictions by fetching fonts from Google Fonts at runtime, converting them to Base64 Data URIs, and injecting them directly into the SVG's style block. The tool includes a visual builder that generates the necessary Markdown code without requiring users to write any code themselves.

Your GitHub profile is your developer resume. It's the first thing recruiters, open-source maintainers and other developers see when they click on your name. But let's be honest... most READMEs look exactly the same. I wanted to add something dynamic, eye-catching and personalized to my profile. I loved the idea of a "typing text" effect, but existing tools felt limited. You couldn't add modern design trends like neon glows, linear gradients, or glassmorphic macOS windows. So, I decided to build my own. Enter ScribeSVG: An ultra-fast, highly customizable typing animation generator for your GitHub README. I didn't just want to build another standard text generator. I wanted this to feel like a premium design tool for developers. Here is what I added: 🎨 14+ Developer Fonts: From Fira Code to Space Mono and Press Start 2P . 🌈 Linear Gradients & Neon Glows: Add cyber-punk glows or sleek Tokyo Night gradients to your text. 🪟 Custom Layouts: Choose between Raw Text, a macOS Terminal Frame, or a Glassmorphic Card. ⚡ Next.js Edge Runtime: It renders in milliseconds globally so your README never lags. Building this wasn't as simple as just returning an SVG. If you've ever tried to embed external assets in a GitHub README, you know that GitHub's camo image proxy is ruthless. GitHub strips out external stylesheets, blocks <script tags, and prevents standard web font imports via @import or <link . So, how did I get custom fonts like Fira Code to work inside an <img tag on GitHub? I had to build a custom renderer that fetches the font file directly from Google Fonts at runtime, converts the .woff2 font into a Base64 Data URI, and dynamically injects it directly into the <style block of the SVG payload. Combine that with CSS-only @keyframes animations, and everything is bundled into a single, self-contained SVG response that GitHub's proxy has no choice but to render perfectly 🎯 You don't need to write any code to use it. I built a visual builder that lets you customize everything and generates the Markdown for you. README.md It looks like this: Typing SVG https://scribesvg.vercel.app/api/render?lines=Hello+World;Rebuilding+in+Next.js;Attracting+Sponsors&font=Fira+Code&size=24&color=36bcf7¢er=true&vCenter=true&width=600&height=120 https://github.com/DhanushNehru/ScribeSVG Checkout my github readme to see how things are rendered.