
I built a dynamic SVG generator for GitHub READMEs using Svelte 5 and SvelteKit SSR
https://reddit.com/link/1ue452p/video/cjtn01xbx59h1/player
Hey Svelters!
I wanted an animated Star History chart for my GitHub READMEs. Existing tools mostly generate static PNGs or rely on JS (which gets stripped out by GitHub's image proxy).
So I decided to build one myself using Svelte 5 and SvelteKit!
How it works:
- It uses a
+server.tsendpoint to fetch the GitHub API and renders aStarGraphSVG.sveltecomponent on the server using Svelte 5'srenderfunction fromsvelte/server. - To bypass the JS limitation on GitHub, all the line drawing and "pop" animations are done entirely via Pure CSS
-@keyframesembedded directly inside the SVG component's<style>block.
It works perfectly natively inside any markdown file!
Source Code: https://github.com/YusufCeng1z/star-history
Live Web App: https://starhistory.link
I had a blast using Svelte 5 runes ($state, $derived) and SSR for this project. Would love to hear your feedback on the architecture or the code!