PxBadge - Dynamically generated Pixel Art Badges
Written by Lorddeathunter
As both Developer and Pixel Artist, I often find myself creating pixel art for my projects, be it placeholders, icons or even as larger parts of some application or game.
My latest such project came from the wish to showcase technologies I'm fond of on my GitHub profile. Instead of looking for specific technology logos, then manually editing the images, I wanted to have badges with a consistent style, that can be dynamically generated and tweaked in the future for different needs, as well as a way for anyone to create their own badges.
From looking around, I was unable to find any existing pixel art online for the majority of the techs I needed, and I hope with this project, future adventurers don't run into the same issues as me 😊
I drew pixel art of a few logos, made a custom badge and stars, and created a Python script that generates a badge with the desired logo and the specified rating underneath. I created a web API so anyone can make their own badges for whatever they desire, profile, portfolio, home page, game project, etc.
With all the different badge material, technology and rating options, there are over 4000 possible badge combinations. If we include the different scale options, this number jumps to over 80,000.
Implementation
The project implementation is quite simple and consists of a Vanilla JS frontend (as there is nothing fancy going on there), and a FastAPI backend.
The backend loads all the sprites from the assets folder initially and from then onwards they are stored in-memory, with an additional (protected) endpoint existing if I need to reload the loaded files.
Further optimizations were considered with caching, but ultimately skipped because of the sheer number of badge combinations.
Usage
The project is currently hosted here, and has an interactive live badge editor.
For API users, the endpoint for getting the list of technologies is https://badge.deathunter.com/techs,
and the list of badge backgrounds is: https://badge.deathunter.com/materials
There are over 100 different techs, each one being hand-drawn, including (but not limited to):
- Programming languages
- Frameworks
- Engines
- Tools/apps
- Browsers
- Operating Systems
- Website logos
- Company logos
