- Introduction
- Prerequisites
- Step 1 - Create a New Repository
- Step 2 - Create the Workflow
- Step 3 - Enable Write Permissions
- Step 4 - Run the Workflow
- Step 5 - Add the Snake to Your Profile
- Example
- Common Problems
- FAQ
The GitHub Contribution Snake transforms your contribution graph into an animated snake that "eats" your contributions.
Everything runs automatically using GitHub Actions, so after setup there is nothing else you need to do.
Before starting, make sure you have:
- A GitHub account
- A public GitHub profile
- Basic GitHub knowledge
- A public profile repository
Go to GitHub
Click
New Repository
Name it something like
profilesnake
Make it
Public
Initialize it with
README.md
Your repository should look like
profilesnake
β
βββ README.md
Inside the repository click
Add file
β
Create new file
Create the following file
.github/workflows/snake.yml
Paste this YAML:
name: generate snake
on:
schedule:
- cron: "0 */12 * * *"
workflow_dispatch:
push:
branches:
- main
permissions:
contents: write
jobs:
generate:
runs-on: ubuntu-latest
timeout-minutes: 5
steps:
- name: Generate GitHub contribution snake
uses: Platane/snk@v3
with:
github_user_name: ${{ github.repository_owner }}
outputs: |
dist/github-contribution-grid-snake.svg
dist/github-contribution-grid-snake-dark.svg?palette=github-dark
- name: Push snake to output branch
uses: peaceiris/actions-gh-pages@v4
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
publish_branch: outputCommit the file.
Open your repository.
Go to
Settings
β
Actions
β
General
Scroll down until you see
Workflow permissions
Select
β
Read and write permissions
Click
Save
Without enabling this permission you will receive
403 Permission Denied
Go to
Actions
Choose
generate snake
Click
Run workflow
Wait about one minute.
GitHub will automatically create a new branch named
output
containing
github-contribution-grid-snake.svg
github-contribution-grid-snake-dark.svg
Go to
Code
Click the branch selector
main βΌ
Look for another branch named
output
Congratulations!
Your snake animation has been generated successfully.
Proceed to Step 5.
Go back to
Actions
Open the latest workflow run.
Expand
Push snake to output branch
Check for any errors.
The most common cause is forgetting to enable
Read and write permissions
Open your GitHub Profile Repository.
For example
YOUR_USERNAME/YOUR_USERNAME
If your username is
loganthp19-arch
then your repository must be
loganthp19-arch/loganthp19-arch
Edit the README.md and paste the following code.
<picture>
<source
media="(prefers-color-scheme: dark)"
srcset="https://raw.githubusercontent.com/YOUR-GITHUB-USERNAME/YOUR-REPO-NAME/output/github-contribution-grid-snake-dark.svg">
<source
media="(prefers-color-scheme: light)"
srcset="https://raw.githubusercontent.com/YOUR-GITHUB-USERNAME/YOUR-REPO-NAME/output/github-contribution-grid-snake.svg">
<img
alt="GitHub contribution snake"
src="https://raw.githubusercontent.com/YOUR-GITHUB-USERNAME/YOUR-REPO-NAME/output/github-contribution-grid-snake.svg">
</picture>Commit the changes.
That's it!
Your GitHub profile will now display the animated contribution snake.
Suppose your GitHub username is
loganthp19-arch
Then your snake URL becomes
https://raw.githubusercontent.com/loganthp19-arch/profilesnake/output/github-contribution-grid-snake.svg
Enable
Settings
β
Actions
β
General
β
Read and write permissions
Check
- Repository name
- Branch name (
output) - README URLs
Make sure both repositories are
- Public
- Correctly named
Open
Actions
Check the workflow logs for errors.
No.
The animation only visualizes your existing contributions.
Every
12 Hours
using GitHub Actions.
Yes!
The Platane/snk action supports different themes and color palettes.
Yes.
The SVG animation is fully responsive.
You have successfully configured the GitHub Contribution Snake.
Every 12 hours GitHub Actions will regenerate the SVG automatically, keeping your profile animation up to date without any manual work.
Happy Coding! π