This is something interesting that I found while browsing GitHub, adding a snake animation to your personal GitHub profile page. The effect is as follows:
The snake will eat the code records we submit on GitHub, that is, it will eat those green squares.
Going back to what I said earlier, how can we implement this snake animation on our GitHub profile page?
It's very simple, you just need to know how to copy code. This snake animation code comes from the personal page of a user @L1cardo on GitHub:
- Create an
assetsfolder in your GitHub ID's repository.
Since GitHub does not support empty folders, it is recommended to first put a random file and then delete it later. - We need to copy this code to the
.github/workflowspath of the repository with the same name as your GitHub ID.
Generate Snake.yml#
# GitHub Action for generating a contribution graph with a snake eating your contributions.
name: Generate Snake
on:
schedule:
- cron: "0 0 * * *"
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/[email protected]
- name: Generate Snake
uses: Platane/snk@master
id: snake-gif
with:
github_user_name: ${{ github.repository_owner }}
gif_out_path: ./assets/github-contribution-grid-snake.gif
svg_out_path: ./assets/github-contribution-grid-snake.svg
- name: Push to GitHub
uses: EndBug/[email protected]
with:
branch: main
message: 'Generate Contribution Snake'
After copying the code, we also need to place the generated svg file in the README document of the repository with the same name as your GitHub ID, so that it will be displayed on your profile page.
Since the README document is edited in Markdown format, you need to use the following format to include the svg file.
Replace xxx with your GitHub username.
By completing the above steps, you will be able to see this animation on your own GitHub profile page. It's pretty cool.