Table of Contents
GitHubプロフィールにヘビのアニメーションを追加する
GitHubのコントリビューショングリッド（草）をスネークゲーム風のアニメーションに変換できるGitHub Actionがあります こんな感じのアニメーションが自動生成されます
https://github.com/marketplace/actions/generate-snake-game-from-github-contribution-grid
セットアップ
1. プロフィール用リポジトリの作成
自分のユーザー名と同じ名前のリポジトリを作成します（例: kpab/kpab）
このリポジトリのREADME.mdがGitHubプロフィールに表示されます
作成済みの方はskipでokです
2. ワークフローファイルの作成
.github/workflows/snake.yml を作成します
name: Generate Snake
on: schedule: - cron: "0 0 * * *" # 毎日0時に実行 workflow_dispatch: # 手動実行用
jobs: build: runs-on: ubuntu-latest permissions: contents: write steps: - uses: Platane/snk@v3 with: github_user_name: ${{ github.repository_owner }} outputs: | dist/github-snake.svg dist/github-snake-dark.svg?palette=github-dark
- uses: crazy-max/ghaction-github-pages@v3 with: target_branch: output build_dir: dist env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}3. README.mdに画像を追加
<picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/USERNAME/USERNAME/output/github-snake-dark.svg" /> <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/USERNAME/USERNAME/output/github-snake.svg" /> <img alt="github-snake" src="https://raw.githubusercontent.com/USERNAME/USERNAME/output/github-snake.svg" /></picture>USERNAME の部分は自分のGitHubユーザー名に置き換えてください
カスタマイズ
パレット
プリセットのカラーパレットが用意されています
outputs: | dist/github-snake.svg?palette=github dist/github-snake-dark.svg?palette=github-dark dist/github-snake-light.svg?palette=github-light色の個別指定
より細かくカスタマイズしたい場合は個別に色を指定できます
| オプション | 説明 |
|---|---|
color_snake | スネークの色 |
color_dots | コントリビューションの色（5色カンマ区切り） |
color_background | 背景色（GIFのみ） |
outputs: | dist/ocean.gif?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9&color_background=#aaaaaacolor_dots の5色は順番に「コントリビューション0 → 少 → 中 → 多 → 最多」に対応しています
プレビュー
platane.github.io/snk で実際にプレビューしながら色を試せます
おわりに
設定自体は数分で終わるので、プロフィールをちょっと華やかにしたい方はぜひ試してみてください
GitHubプロフィールにヘビのアニメーションを追加する
https://p4ni.com/posts/github-profile-snake-game/