# A tool to make your GitHub README impossible to ignore 🚀

> Source: <https://dev.to/dhanushnehru/a-tool-to-make-your-github-readme-impossible-to-ignore-19ac>
> Published: 2026-05-23 08:43:38+00:00

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.