Leverages the power of Svelte and its really simple server render, and this concept: since including images in osu! profiles is common and SVGs can be embedded as images, well...
This hacked together project is tailored towards my own use and purposes, but feel free to fork and season to your heart's content.
Quick and dirty editor: https://paturages.github.io/osu-profile/public/
This is just something to quickly generate something that looks good enough. I'm too lazy to figure out something to export it in a neat manner, so you'll have to screenshot the browser page and crop it yourself :^)
On the flipside, if you wanna add some items, you can generate the extra items and photoshop/paint insert them manually in the image, so you have that extra flexibility!
You may or may not get better results by "inspect element hacking" on the osu! website directly though idk
Make sure Node.js is installed (use whatever latest version).
Install dependencies in the command line with npm install.
You can then provide your own data in src/data and run npm run build.
The public/svg directory should be updated and pushable somewhere.
Assuming you're forking this repo somewhere else on GitHub, you can use GitHub Pages to expose
the public directory and get links to the SVGs (see below for examples).
You can add something like ?v=102831 to refresh browser caches if necessary.
https://paturages.github.io/osu-profile/public/svg/staffs.svg?v=574bc8b464f6de6ec50615a38851e643
https://paturages.github.io/osu-profile/public/svg/dans.svg?v=ea667dc95020cd41167367be32e500d5
