Prathamesh-B / chesscom-profile-svg

A service to generate SVG representations of chess.com profile data.

Chess.com Profile SVG Generator

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.

✨ Features

• 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.

📝 Usage

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.

💡 Example

[![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)

or

<img src="https://chesscom-profile-svg.vercel.app/stats?username={Chess.com_Username}&theme={Theme}&borderRadius={Radius}" alt="ChessStats"/>

🛣️ Endpoints

• /stats?username={Chess.com Username}: Fetches and generates an SVG image for the specified Chess.com user.

🛠️ Parameters

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

🎨 Themes

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.

🤝 Contributing

Contributions are welcome! Please open an issue or submit a pull request.

🌟 Support

If you like this project, give it a ⭐

⚖️ License

This project is licensed under the MIT License.