GitArt

˙ ˙

GitArt is a tool that allows users to customize their GitHub contribution graph by generating Git commit commands. With this tool, users can customize their contribution graph to display their name, messages, symbols, logos, or any other desired patterns.

Usage

• Select a year (choosing a year before joining GitHub is better).
• Left click on the squares to activate and right click to deactivate them.
• Or type a word into the text box to draw it on the graph, then adjust squares by hand if you like.
• Click on one of the Generate buttons and follow the rest of the instructions.

Generate git commit commands

• Create a new GitHub repository.
• Clone the repository into your local machine.
• Ensure your git username and email are configured correctly.
• Copy the generated code into your terminal.
• Push the changes to the remote repository.

Features

• Easily create Git commits to modify the contribution graph on GitHub.
• Customize the contribution graph for artistic, personal, or branding purposes.

Examples

Example images

Project structure

Plain HTML, CSS and JavaScript with no build step. Serve the public folder with any static server (for example the VS Code Live Server extension).

public/
├── index.html          main page
├── examples.html       examples page
├── css/                one stylesheet per section of the page
│   ├── base.css        variables, body, shared link styles
│   ├── header.css      logo, title, description
│   ├── instructions.css
│   ├── text-input.css  word input, hint and clear button
│   ├── graph.css       contribution graph and year picker
│   ├── generate.css    generate button
│   ├── code-editor.css generated commands panel
│   ├── faq.css         faq section
│   └── examples.css    examples page
├── js/                 ES modules, loaded from main.js
│   ├── main.js         wires up the page
│   ├── calendar.js     builds the graph for a year, square click handling
│   ├── dates.js        date formatting helpers
│   ├── font.js         3x5 pixel font used to draw text
│   ├── text-draw.js    draws typed text onto the graph
│   ├── commands.js     builds, copies and downloads the git commands
│   ├── github.js       GitHub join date lookup
│   └── icons.js        svg icon paths
├── assets/             logo and example images
├── sitemap.xml
├── robots.txt
└── llms.txt            site summary for ai crawlers

Acknowledgements

• Git Logo

• GitHub Contributions

---