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.
• Pick a font for the text, or make your own in the Font Editor.
• 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.

Fonts

Fonts live in public/fonts, one JSON file per font. Each glyph is a list of rows where # is a filled square and . is empty. A font can be 1 to 7 rows tall and each glyph can be its own width.

{
  "name": "Classic",
  "author": "sameemul-haque",
  "height": 5,
  "glyphs": {
    "A": [".#.", "#.#", "###", "#.#", "#.#"]
  }
}

Add your font

1. Draw it in the Font Editor. It needs at least A to Z.
2. Click Share on GitHub and fork the repo from the link it shows (skip this if you already have a fork).
3. Click Continue to GitHub. Your font file opens already filled in.
4. Click Commit changes…, then Propose changes, then Create pull request.

Prefer git? Export the file from the editor, add it to public/fonts in your fork as your-font-name.json and open a pull request. A check runs on the pull request, and public/fonts/index.json is updated automatically after merging.

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
├── font-editor.html    font editor 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
│   └── font-editor.css font editor 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-format.js  font format, validation and json output
│   ├── fonts.js        loads built-in fonts and saved custom fonts
│   ├── font-picker.js  searchable font picker
│   ├── font-editor.js  font editor page
│   ├── 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
├── fonts/              one json file per font, plus index.json
├── assets/             logo and example images
├── sitemap.xml
├── robots.txt
└── llms.txt            site summary for ai crawlers

Acknowledgements

• Git Logo

• GitHub Contributions

---