explaingit

aza-ali/github-readme-crisp-links

16PythonAudience · developerComplexity · 1/5ActiveSetup · easy

TLDR

CLI and web app that generate SVG text wrapped in a markdown link, removing the underline GitHub adds under README links.

Mindmap

mindmap
  root((crisp-links))
    Inputs
      Project name
      Color or gradient
      Batch json
    Outputs
      SVG file
      Markdown snippet
    Use Cases
      Clean a project list
      Style profile README
      Batch render links
    Tech Stack
      Python
      Pillow
      fontTools
      SVG

Things people build with this

USE CASE 1

Replace underlined text links in a README project list with crisp SVG-wrapped links.

USE CASE 2

Generate a gradient title SVG using a preset like rainbow or sunset, or a custom hex list.

USE CASE 3

Batch-render a long list of project links from a JSON file in one CLI run.

USE CASE 4

Produce paired light and dark mode SVGs and reference them with a picture element.

Tech stack

PythonPillowfontToolsSVG

Getting it running

Difficulty · easy Time to first run · 5min

Pillow is the only dependency; the cached SVG image proxy on GitHub means a version query string is needed after edits.

In plain English

GitHub puts an underline under any link that contains text in a README. That underline is fine in body copy, but it can make a project list look busy when each entry already shows an icon, a name, and a short description. GitHub strips the usual tricks people try in order to turn the underline off: inline style attributes, font tags, and style blocks at the top of the file. The author of this small Python tool found that one thing GitHub does not strip is a link whose only contents are an image. With no text inside the link, there is nothing for the underline rule to paint, and the line goes away. This project is a CLI, plus a small browser app on GitHub Pages, that automates the workaround. You give it a project name and a color, and it writes an SVG that renders that name in your chosen color, then prints the matching markdown snippet that wraps the SVG in a link. You paste the snippet into your README and the underline is gone. The CLI measures the width of the text against Helvetica Bold using Pillow so the SVG canvas fits the glyphs without clipping. Pillow is the only dependency, and the project says it has been tested on Python 3.8 and above. The tool also supports gradients. You can pick a preset such as rainbow, sunset, ocean, mint, candy, or dusk, or you can pass a list of hex codes. For gradients the tool bakes the letter shapes into the SVG as path data using fontTools, then applies the gradient as a fill, which avoids the blurry edges that browsers produce when filling small text with a gradient. Solid colors stay as text elements because the system text renderer is sharper for single colors. A batch mode reads a JSON file with one item per project, so a long list of links can be rendered in one run. The README also covers two practical issues: GitHub caches SVGs through its image proxy for a long time, so you may need a version query string or a renamed file after an update, and a single SVG only carries one color, so for separate light and dark mode colors you generate two SVGs and reference them with a picture element.

Copy-paste prompts

Prompt 1
Use github-readme-crisp-links to generate an SVG for the project name awesome-tool in deep purple, and give me the markdown line to paste.
Prompt 2
Batch-render 20 project links from a JSON file with github-readme-crisp-links, each using the ocean gradient.
Prompt 3
Generate two SVGs with github-readme-crisp-links for light and dark mode, and write the picture element that references both.
Prompt 4
Add a new gradient preset called forest to github-readme-crisp-links by editing the source, and show the diff.
Prompt 5
Explain why GitHub strips inline styles in READMEs but allows image-only links, using github-readme-crisp-links as the worked example.
Open on GitHub → Explain another repo

Generated 2026-05-22 · Model: sonnet-4-6 · Verify against the repo before relying on details.