{"slug": "a-tool-to-make-your-github-readme-impossible-to-ignore", "title": "A tool to make your GitHub README impossible to ignore 🚀", "summary": "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.", "body_md": "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.\nBut let's be honest... most READMEs look exactly the same.\nI 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.\nSo, I decided to build my own.\nEnter ScribeSVG: An ultra-fast, highly customizable typing animation generator for your GitHub README.\nI 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:\n🎨 14+ Developer Fonts: From Fira Code\nto Space Mono\nand Press Start 2P\n.\n🌈 Linear Gradients & Neon Glows: Add cyber-punk glows or sleek Tokyo Night gradients to your text.\n🪟 Custom Layouts: Choose between Raw Text, a macOS Terminal Frame, or a Glassmorphic Card.\n⚡ Next.js Edge Runtime: It renders in milliseconds globally so your README never lags.\nBuilding 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\nimage proxy is ruthless.\nGitHub strips out external stylesheets, blocks <script>\ntags, and prevents standard web font imports via @import\nor <link>\n.\nSo, how did I get custom fonts like Fira Code to work inside an <img>\ntag on GitHub?\nI had to build a custom renderer that fetches the font file directly from Google Fonts at runtime, converts the .woff2\nfont into a Base64 Data URI, and dynamically injects it directly into the <style>\nblock of the SVG payload.\nCombine that with CSS-only @keyframes\nanimations, and everything is bundled into a single, self-contained SVG response that GitHub's proxy has no choice but to render perfectly! 🎯\nYou 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.\nREADME.md\n!It looks like this:\n[![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)\nCheckout my github readme to see how things are rendered.", "url": "https://wpnews.pro/news/a-tool-to-make-your-github-readme-impossible-to-ignore", "canonical_source": "https://dev.to/dhanushnehru/a-tool-to-make-your-github-readme-impossible-to-ignore-19ac", "published_at": "2026-05-23 08:43:38+00:00", "updated_at": "2026-05-23 09:03:30.944850+00:00", "lang": "en", "topics": ["developer-tools", "open-source", "products"], "entities": ["ScribeSVG", "GitHub", "Fira Code", "Space Mono", "Press Start 2P", "Next.js", "Tokyo Night"], "alternates": {"html": "https://wpnews.pro/news/a-tool-to-make-your-github-readme-impossible-to-ignore", "markdown": "https://wpnews.pro/news/a-tool-to-make-your-github-readme-impossible-to-ignore.md", "text": "https://wpnews.pro/news/a-tool-to-make-your-github-readme-impossible-to-ignore.txt", "jsonld": "https://wpnews.pro/news/a-tool-to-make-your-github-readme-impossible-to-ignore.jsonld"}}