🕹️ breek

Break your GitHub contribution graph.

Generate a breakout animation from a GitHub user's contribution graph.

Usage

GitHub Action

Use this action in your workflow:

- name: Generate Breek Animation
  uses: cherninlab/[email protected]
  with:
    github_user_name: ${{ github.repository_owner }}
    svg_out_path: dist/github-contribution-grid-breek.svg
    svg_dark_out_path: dist/github-contribution-grid-breek-dark.svg

Then embed the generated image in your README using the <picture> tag for dark mode support:

<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="
      https://raw.githubusercontent.com/<Username>/<Repository>/output/github-contribution-grid-breek-dark.svg
    "
  />
  <source
    media="(prefers-color-scheme: light)"
    srcset="
      https://raw.githubusercontent.com/<Username>/<Repository>/output/github-contribution-grid-breek.svg
    "
  />
  <img
    alt="github contribution grid breek animation"
    src="https://raw.githubusercontent.com/<Username>/<Repository>/output/github-contribution-grid-breek.svg"
  />
</picture>

Replace <Username> and <Repository> with your GitHub username and repository name respectively.

e.g. demo workflow action

Interactive Demo

cherninlab.github.io/breek

Local Development

bun install
bun run dev

Then open http://localhost:5173 in your browser.

Roadmap

• Create an npx tool for local generation
• Add more customization options

Credits

Inspired by Platane/snk

License

MIT © Cherninlab