DEV Community

Cover image for Show off your games using this tool

Show off your games using this tool

ananto30 profile image Azizul Haque Ananto ใƒป1 min read

I have built this dynamic ๐Ÿ–ผ SVG generator that collects the ๐Ÿ•น games you play from Steam and generates an image that can be embedded in any site (cause all sites use html ๐Ÿ˜…). You can also put it in โ“˜ .md files (like readme)! For example in GitHub profile readme, look at mine -

GitHub logo Ananto30 / Ananto30

My profile with Steam stats card

All you need is to make your Steam profile public. The steps are shown in the repo -

GitHub logo Ananto30 / steam-stat

๐ŸŽฎ Dynamically generate your Steam (game) stats card on SVG


Steam stats svg generator. Create your own Steam stat dynamically and share anywhere.

This can be used with .md files!

You can put in your GitHub readme too ๐Ÿ˜ƒ

Example ๐Ÿ“

For .md files -


For using as img property in html or md files -

<img src=""/>


You need to provide the profile name in query parameter ?profileName=ananto.

Please ensure that your Steam profile is public!

How to get profile name or url

Go to profile Get profile name

How to make profile public

Make profile public


Contributions are welcomed โค๏ธ

There are many things to add, so please feel free to discuss and improve the code quality

Inspired by github-readme-stats and natemoo-re

I am attaching the following line in this blog post and it will dynamically generate the SVG every time someone visits this page!

Enter fullscreen mode Exit fullscreen mode

Result -

(Obviously this has some caching to reduce spamming the Steam API ๐Ÿ˜›)

Please give it a โญ๏ธ star if you like it. ๐Ÿ˜ƒ
Suggest any further improvements and contributions are also welcomed. ๐Ÿ‘
Share your profile in the comment! ๐Ÿ‘‡

Discussion (0)

Editor guide