How to Add GitHub Snake Animation

GitHub provides an excellent contribution graph that displays your coding activity. One of the coolest ways to make your GitHub profile more attractive is by adding a GitHub Snake Animation. The snake moves across your contribution graph and eats all of your commits automatically.

This guide explains every step required to configure the snake animation using GitHub Actions.

Requirements

A GitHub Account
A GitHub Profile Repository
GitHub Actions Enabled

Your repository name must be exactly the same as your GitHub username.

Username  : snawaza243
Repository: snawaza243

Step 1 — Open Your GitHub Profile Repository

Go to your profile repository.

https://github.com/YourUsername/YourUsername

Example

https://github.com/snawaza243/snawaza243

Step 2 — Create Workflow Folder

Inside your repository create the following folders.

.github/
        workflows/

Step 3 — Create snake.yml

Inside .github/workflows/ create snake.yml Paste the following workflow.

name: Generate Snake

on:
  schedule:
    - cron: "0 */12 * * *"

  workflow_dispatch:

jobs:

  generate:

    permissions:
      contents: write

    runs-on: ubuntu-latest

    steps:

      - uses: Platane/snk@v3

        with:
          github_user_name: snawaza243

          outputs: |
            dist/github-contribution-grid-snake.svg
            dist/github-contribution-grid-snake-dark.svg?palette=github-dark

      - uses: crazy-max/ghaction-github-pages@v4

        with:
          target_branch: output
          build_dir: dist

        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Commit the changes.

Step 4 — Enable GitHub Actions

Open

Repository

↓

Settings

↓

Actions

↓

General

Enable

Allow all actions and reusable workflows
Read and write permissions

Click Save.

Step 5 — Run the Workflow

Open

Actions

Click

Generate Snake

Press

Run Workflow

Wait 20–30 seconds until the workflow finishes successfully.

Step 6 — Check the Output Branch

After the workflow completes successfully, GitHub automatically creates a new branch.

output

This branch contains

github-contribution-grid-snake.svg

github-contribution-grid-snake-dark.svg

Step 7 — Add Snake Animation to README.md

Paste the following code into your README.

<picture>

<source
media="(prefers-color-scheme: dark)"
srcset="https://raw.githubusercontent.com/snawaza243/snawaza243/output/github-contribution-grid-snake-dark.svg"/>

<img
alt="Snake Animation"
src="https://raw.githubusercontent.com/snawaza243/snawaza243/output/github-contribution-grid-snake.svg"/>

</picture>

Commit the README.

Step 8 — Refresh Your GitHub Profile

Visit your GitHub profile. If everything is configured correctly, the Snake Animation will appear automatically.

Troubleshooting

Broken Image

The output branch was not created or the SVG files are missing. Run the workflow again.

No Workflow Runs

Ensure your workflow contains workflow_dispatch:.

Output Branch Missing

Verify that GitHub Actions has Read and Write permissions.

Animation Not Updating

Simply rerun the workflow or wait for the scheduled update.

Conclusion

The GitHub Snake Animation is a fun and professional way to showcase your GitHub activity. By using GitHub Actions, the animation updates automatically without any manual effort. It makes your GitHub profile more interactive, visually appealing, and demonstrates your knowledge of automation with GitHub Actions.

IndianTechnoEra