https://github.com/cherninlab/breek

🕹️ Generate a breakout animation from a GitHub user's contribution graph.
https://github.com/cherninlab/breek

gif github-actions github-contribution-graph github-contributions github-profile-readme svg-animations

Last synced: 22 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/cherninlab/breek
• Owner: cherninlab
• Created: 2024-09-03T17:17:29.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-11-17T23:22:27.000Z (over 1 year ago)
• Last Synced: 2025-04-20T03:54:18.406Z (11 months ago)
• Topics: gif, github-actions, github-contribution-graph, github-contributions, github-profile-readme, svg-animations
• Language: TypeScript
• Homepage: https://cherninlab.github.io/breek/
• Size: 1.45 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🕹️ breek

[![GitHub release](https://img.shields.io/github/release/cherninlab/breek.svg?style=flat-square)](https://github.com/cherninlab/breek/releases/latest)

[![GitHub marketplace](https://img.shields.io/badge/marketplace-breek-blue?logo=github&style=flat-square)](https://github.com/marketplace/actions/generate-breakout-game-from-github-contribution-grid)

![type definitions](https://img.shields.io/npm/types/typescript?style=flat-square)

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:

```yaml

- name: Generate Breek Animation

  uses: cherninlab/breek@v1.0.0

  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 `` tag for dark mode support:

```html

  

  

  

```

Replace `` and `` with your GitHub username and repository name respectively.

e.g. [demo workflow action](https://github.com/cherninlab/cherninlab/blob/main/.github/workflows/main.yml)

### Interactive Demo

[cherninlab.github.io/breek](https://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](https://github.com/Platane/snk)

## License

MIT © [Cherninlab](https://github.com/Cherninlab)