This project is a web service that dynamically generates SVG images displaying chess statistics for a given Chess.com user. Using data fetched from the Chess.com API, the service creates visually appealing, customizable SVG graphics that showcase a user's performance in different game modes such as Rapid, Bullet, and Blitz.
- Dynamic Data Fetching: Retrieves real-time chess statistics from the Chess.com API.
- Customizable Themes: Supports different themes to customize the appearance of the SVG images.
- Game Mode Statistics: Displays user ratings for Rapid, Bullet, and Blitz chess modes.
- Error Handling: Gracefully handles errors such as missing usernames or users not found on Chess.com.
- Disable Animations: Option to disable animations in the generated SVG.
If you want to use this project on your GitHub profile, I recommend forking and deploying it to your own Vercel instance and using the project with your own URLs.
To deploy on Vercel, click the button below.
After deployment, access the service at http://your-vercel-url/stats?username={Chess.com Username}
to get the SVG image.
[![ChessStats](https://chesscom-profile-svg.vercel.app/stats?username={Chess.com_Username}&theme={Theme}&borderRadius={Radius}](https://chesscom-profile-svg.vercel.app/stats?username=PrathamRex)
<img src="https://chesscom-profile-svg.vercel.app/stats?username={Chess.com_Username}&theme={Theme}&borderRadius={Radius}" alt="ChessStats"/>
/stats?username={Chess.com Username}
: Fetches and generates an SVG image for the specified Chess.com user.
Parameter | Description | Example |
---|---|---|
username |
The Chess.com username for which you want statistics. | username=viditchess |
theme |
(Optional) The theme for the SVG image. Defaults to default . |
theme=dark |
borderRadius |
(Optional) The border radius (in pixels) for the SVG image. Defaults to 10 . |
borderRadius=8 |
disableAnimations |
(Optional) Disable animations in the SVG image. Set to true to disable. |
disableAnimations=true |
Example:
/stats?username=viditchess&theme=dark&borderRadius=8&disableAnimations=true
Use ?theme=THEME_NAME
parameter.
default |
light |
---|---|
graywhite |
dark |
If you'd like to add more themes, you can edit the themes.js
file here.
Contributions are welcome! Please open an issue or submit a pull request.
If you like this project, give it a ⭐
This project is licensed under the MIT License.