Generate a contribution-style activity chart for your Codewars profile – similar to GitHub's contribution graph.
Codewars Activity SVG Generator is a lightweight Express.js application that creates a visual calendar-like heatmap (in SVG format) representing your daily coding activity on Codewars. This project allows you to embed your Codewars stats in any website, GitHub README, or dashboard!
Inspired by GitHub’s contribution chart and developed with simplicity and performance in mind.
- 🎯 Fetches kata completion data directly from the official Codewars API.
- 📆 Generates a calendar-like SVG chart showing the days when katas were completed.
- 🎨 Color-coded squares represent activity intensity (number of katas solved per day).
- 🌍 Multi-language support: English, French, and Spanish.
- 🖼️ Embeddable for websites and markdown files.
Here is a real example of the SVG chart generated for a Codewars user:
Embed it anywhere you want using:
<iframe src="https://codewars-activity.vercel.app/armanceau/en/activity.svg" width="720" height="120" frameborder="0"></iframe>Or in Markdown:
Additionally, you can embed a dynamic badge in your repository or website to showcase your Codewars progress. This badge will update automatically based on your recent activity! By default, the badge will be displayed.
If you'd like to hide the badge, you can append ?streak=false to the URL. If you don't specify this parameter, the badge will be displayed by default.
Example of a Codewars activity badge:
To hide the badge, use this Markdown (badge displayed by default):
<iframe src="https://codewars-activity.vercel.app/armanceau/en/activity.svg?streak=false" width="720" height="120" frameborder="0"></iframe>Or in Markdown:
To generate your own Codewars activity chart:
| Parameter | Type | Required | Description |
|---|---|---|---|
username |
STRING | Yes | Your Codewars username |
langue |
STRING | Yes | Language for the labels. Supported: : fr, en, es |
🔹English chart:
https://codewars-activity.vercel.app/yourUsername/en/activity.svg
🔹French version:
https://codewars-activity.vercel.app/yourUsername/fr/activity.svg
🔹Spanish version:
https://codewars-activity.vercel.app/yourUsername/es/activity.svg
To run this project locally:
- Clone this repository:
git clone https://github.com/armanceau/codewars-activity.git
cd codewars-activity- Install the dependencies:
npm install
cd src
node server.js- Your API is now running at
http://localhost:3000.
-
Express.js – lightweight Node.js framework
-
Axios – for making HTTP requests to Codewars API
-
SVG – for generating dynamic, scalable contribution charts
There are many fun ways to visualize developer activity. This tool is designed for Codewars users who want to:
- Track their daily kata completions.
- Showcase their activity in a portfolio or GitHub README.
- Get motivated by visual feedback.
Unlike other services, this project is fully open-source, embeddable, lightweight, and can be hosted anywhere.
codewars activity graph, codewars stats svg, codewars contribution calendar, github-style activity chart for codewars, svg chart from codewars data, codewars kata tracker, open-source codewars svg chart
Made with ❤️ by armanceau🐵