Skip to content

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.

License

Notifications You must be signed in to change notification settings

aurafarmerone/github-pattern-generator

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 Aura Farmer
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

License

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published