github-pattern-generator

🎨 GitHub Pattern Generator

Draw your GitHub contribution story — one commit at a time.

GitHub Pattern Generator is an open-source web tool that allows you to visually design custom GitHub contribution graph patterns and export them as a pattern.json file. This JSON file can then be used with automated commit scripts to render beautiful patterns on your GitHub contribution graph.

✨ What is this?

GitHub contribution graphs are like a canvas made of pixels. This project turns that canvas into a pattern editor where you can:

• 🖱️ Click to draw custom contribution patterns
• 🎯 Design shapes, text, or symbols
• 📦 Export the design as a pattern.json file
• 🤖 Use the JSON file with auto-commit tools to apply the pattern

All of this happens directly in your browser — no setup required.

🤔 Why use GitHub Pattern Generator?

• 🎨 Visual & Intuitive – draw patterns instead of guessing commit dates
• ⚡ Fast & Lightweight – built with plain HTML, CSS, and JavaScript
• 🔁 Reusable – export patterns as JSON and reuse anytime
• 🧩 Automation Friendly – perfect for commit automation projects
• 🌍 Open Source – customize the UI, add features, or improve performance

Whether you want to create GitHub art, test automation scripts, or just experiment — this tool makes it simple.

🚀 Live Demo

The project is hosted using Firebase with CI/CD Pieplines:

🔗 Live Website: https://github-pattern-generator.web.app/

🛠️ How to Use

1️⃣ Open the Website

Visit the live demo link or open the project locally in your browser.

2️⃣ Draw Your Pattern

• Left Click → Add a contribution block
• Right Click → Remove a contribution block

Design any pattern you like on the contribution grid.

For Example:

3️⃣ Export as JSON

Click on Download pattern.json to export your design.

4️⃣ Use with Automation

Use the downloaded pattern.json file in your auto-commit script or any compatible project to generate commits according to your pattern.

🧑‍💻 Tech Stack

• HTML
• CSS
• JavaScript (Vanilla)

No frameworks. No dependencies. Just clean web tech.

🌱 Open Source & Contributions

This project is open source and built for the community ❤️

You are welcome to:

• 🎨 Improve the UI/UX and design
• 🐛 Fix bugs or edge cases
• 🚀 Add new features
• ♿ Improve accessibility or responsiveness

How to Contribute

1. Fork the repository
2. Create a new branch
3. Make your changes
4. Submit a pull request

All contributions, big or small, are appreciated!

📌 Use Cases

• GitHub contribution art
• Testing auto-commit scripts
• Learning how GitHub graphs work
• Open-source UI/UX practice

📜 License

This project is licensed under the MIT License — feel free to use, modify, and distribute.

❤️ Credits

Made with ❤️ by Ritik Tyagi
If you find this project useful, consider giving it a ⭐ on GitHub!

This site is open source. Improve this page.