GitHub Contributions Canvas Generator

A configurable GitHub-style contributions graph generator built with HTML5 Canvas and SVG. Generate high-quality, pixel-perfect contribution grids with adjustable block size, canvas size, colors, gaps, and corner radius.

Features

• Fully configurable canvas width and height
• Adjustable block size, gap, and corner radius
• Choose between GitHub Dark and Light color schemes
• Randomized contributions or pattern generation
• High-quality, pixel-perfect output
• Two export formats:
  • PNG Version (index.html): Raster export for pixel-perfect images
  • SVG Version (svg.html): Vector export for scalable, resolution-independent graphics

Usage

PNG Version

1. Open the PNG Version page.
2. Use the controls to configure:
   • Canvas Width/Height: Total canvas dimensions
   • Square Size: Size of each contribution block
   • Gap: Space between blocks
   • Corner Radius: Rounded corners for blocks
   • Color Scheme: Dark or Light GitHub style
3. Click Draw to generate the canvas.
4. Click Save as PNG to download your creation.

SVG Version

1. Open the SVG Version page.
2. Use the same controls as the PNG version to configure your canvas.
3. Click Draw to generate the canvas.
4. Click Save as SVG to download a scalable vector graphic that can be resized without quality loss.