Photography — entry 018 of 25
Readme typing SVG
Readme Typing SVG renders an animated typewriter-effect SVG from a `lines` query parameter, meant to be dropped straight into a GitHub profile README or repo as an `<img>` tag — no signup or key required. Query options control font, colors, size, typing speed, and pause duration, and a hosted demo page lets you preview and copy the generated markdown live. The service is open source (DenverCoder1 on GitHub) and runs on a Heroku-backed host behind Cloudflare.
Readme Typing SVG renders an animated typewriter-effect SVG entirely from query parameters on a single GET endpoint, meant to be dropped straight into a GitHub profile README or repo as an <img> tag — no signup or key required. Query options control the lines of text, font, colors, size, typing speed, and pause duration; the service itself just returns the generated SVG document, with the animation played by whatever renders the SVG (GitHub's own markdown viewer, in the intended use case).
GreatAPIs Score
Embed this badge
<a href="https://greatapis.com/api/readme-typing-svg/"><img src="https://greatapis.com/badge/readme-typing-svg.svg" alt="Scored 88 on greatapis.com"></a>Auth quickstart
- No API key or account is needed — every request is a bare GET against the query string, and GitHub's markdown renderer displays the returned SVG's built-in animation automatically when it's embedded as an
<img src="...">.
Your key is stored only in this browser (localStorage) and sent directly to the API — never to greatapis.
Generate a typing-effect SVG
GEThttps://readme-typing-svg.demolab.com/?lines=Hello+World
<!-- https://github.com/DenverCoder1/readme-typing-svg/ -->
<svg xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
viewBox='0 0 400 50'
style='background-color: #00000000;'
width='400px' height='50px'>
<path id='path0'>
<!-- Single line -->
<animate id='d0' attributeName='d' begin='0s;d0.end'
dur='5000ms' fill='remove'
values='m0,25 h0 ; m0,25 h400 ; m0,25 h400 ; m0,25 h0' keyTimes='0;0.8;0.8;1' />
</path>
<text font-family='"monospace", monospace' fill='#36BCF7' font-size='20'
dominant-baseline='auto'
x='0%' text-anchor='start'
letter-spacing='normal'>
<textPath xlink:href='#path0'>
Hello World
</textPath>
</text>
</svg>Captured byte-for-byte from this run's live probe with only the required lines parameter set — every other value (font, color, size, timing) shown here is the service's own default, not something this run chose.
Developer reference
Gotchas & limits
linestakes one or more entries separated by;(e.g.lines=Hello+World;Second+line), and each becomes its own animated<path>/<animate>block cycling in sequence — a singlelinesvalue, as in this probe, still produces the full multi-path SVG structure with just one path used.- The response has no
cache-control: no-store— it'sno-cache, must-revalidatewith anexpiresheader set to the same UTC day at 23:59 (confirmed live), so a browser or CDN can and will cache a given exact query string's SVG for the rest of that day rather than re-rendering on every view. - A request with no
linesat all (a bare GET to/) doesn't render a default SVG or error — it 302-redirects to/demo/, the interactive demo page, confirmed live. Always includelines; omitting it entirely does not fail safely with a placeholder image. - There is no JSON error mode: an unrecognized query parameter (e.g. a misspelled option name) is silently ignored rather than rejected, and the SVG still renders with default values for whatever it couldn't parse — a typo in a parameter name fails silently, not loudly. Recognized style params like
colorandfontdo take effect immediately, confirmed live by a probe withcolor=FF0000rendering that exact hex into the SVG'sfillattribute. - The project runs on a Heroku-backed host (confirmed via the
via: 1.1 heroku-routerresponse header) fronted by Cloudflare — cold-start latency on the first request after idle time is possible even though the service itself needs no account.