Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

ritiktyagiai/github-pattern-generator

Open more actions menu

Repository files navigation

🎨 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:

GitHub Pattern Generator Demo

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!

About

GitHub Pattern Generator is an open-source project that allows users to visually design custom GitHub contribution graph patterns and export them as a pattern.json file, which can be used with automated commit scripts to render patterns on GitHub profiles.

Topics

Resources

Contributing

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Morty Proxy This is a proxified and sanitized view of the page, visit original site.