Dynamic GitHub Contribution Snake Animation

How to Add a Snake Animation to Your GitHub Profile

Follow these steps to create a dynamic snake animation that showcases your GitHub contributions:

1. Fork my GitHub repository to your account.
2. Create a new GitHub repository named after your GitHub username.
3. Initialize the repository with a README file.
4. Create a .github/workflows directory in your repository.
5. Create a file named snake.yml inside the .github/workflows directory.
6. Add the following code to snake.yml:

# GitHub Action for generating a contribution graph with a snake eating your contributions.
name: Generate Snake

# Controls when the action will run.
on:
  schedule:
      # every 12 hours
    - cron: "0 */12 * * *"

  # This command allows us to run the Action automatically from the Actions tab.
  workflow_dispatch:
  
  # Also run on every push on the master branch
  push:
    branches:
    - main

# The sequence of runs in this workflow:
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      - name: Clone repo
        uses: actions/checkout@v3
    
      - name: Generate the snake files in './dist/'
        uses: Platane/snk@v3
        id: snake-gif
        with:
          github_user_name: ${{ github.repository_owner }}
          outputs: |
            dist/github-contribution-grid-snake.svg
            dist/github-contribution-grid-snake-dark.svg?palette=github-dark
            dist/github-contribution-grid-snake.gif?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9
        env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      - name: Show build status
        run: git status

      - name: Push new files to the output branch
        uses: crazy-max/ghaction-github-pages@v3.1.0
        with:
          target_branch: output
          build_dir: dist
          commit_message: Update snake animations
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Update Your README.md

Edit your README.md file and add the following markdown to display the snake animation. Be sure to replace your-username with your GitHub username:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://github.com/your-username/your-username/blob/output/github-contribution-grid-snake.svg" />
  <source media="(prefers-color-scheme: light)" srcset="https://github.com/your-username/your-username/blob/output/github-contribution-grid-snake.svg" />
  <img alt="github-snake" src="https://github.com/your-username/your-username/blob/output/github-contribution-grid-snake.svg" />
</picture>

For more details, visit my Profile and contact me on any SM.