Skip to content

Create beautiful pixel art in your GitHub contribution graph. Design text art, patterns, or images that appear as green squares in your GitHub profile.

Notifications You must be signed in to change notification settings

sh13y/commit-canvas-craft

Repository files navigation

GitHub Contribution Art Generator

Create beautiful pixel art in your GitHub contribution graph! Design text art, patterns, or custom images that appear as green squares in your GitHub profile.

🎨 Features

  • Interactive Canvas: 52×7 grid matching GitHub's contribution layout
  • Intensity Control: 6 levels of commit intensity (1-6 commits per day)
  • Text to Pixel Art: Convert text to 5×5 pixel letters
  • Year Selection: Target any year for your art
  • Live Preview: See exactly how it will look on GitHub
  • Script Generation: Download bash/bat files to create the commits
  • GitHub Integration: Ready-to-use scripts for any repository

🚀 How It Works

  1. Design Your Art: Click on the grid to paint pixels with different intensities
  2. Add Text: Use the text-to-pixel feature to create letter art
  3. Preview: See how your art will appear on GitHub
  4. Export: Download platform-specific scripts
  5. Create Repo: Make a new GitHub repository
  6. Run Script: Execute the downloaded script to generate commits
  7. Admire: Check your GitHub profile for the new contribution art!

🛠️ Usage

Manual Drawing

  • Select intensity level (0-6) using the brush selector
  • Click grid cells to paint/erase
  • 0 = no commits, 1-6 = increasing commit intensity

Text Art

  • Enter text (A-Z, max 8 characters)
  • Adjust starting position
  • Click "Apply Text to Grid"

Export & Deploy

  1. Enter your Git name and email
  2. Set repository name
  3. Download script for your OS (.sh for Linux/Mac, .bat for Windows)
  4. Create the repository on GitHub
  5. Run the script in an empty directory
  6. Update the remote URL with your GitHub username

🎯 Tips

  • Choose an empty year for best results
  • Recommended: Use a dedicated repository for art
  • Each intensity level = number of commits that day
  • Scripts create commits with proper timestamps
  • Allow a few minutes for GitHub to update the graph

🔧 Tech Stack

  • Frontend: React + TypeScript + Tailwind CSS
  • Design: GitHub-inspired dark theme
  • Fonts: Custom 5×5 pixel font for letters
  • Output: Platform-specific Git scripts

Start creating your GitHub contribution art masterpiece! 🎨✨

About

Create beautiful pixel art in your GitHub contribution graph. Design text art, patterns, or images that appear as green squares in your GitHub profile.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages