Arnab Ghosh
Arnab Ghosh

Arnab Ghosh

How to add a Dark Snake Animation On Your GitHub ReadMe?

How to add a Dark Snake Animation On Your GitHub ReadMe?

Adding a snake-eating gif to your README.md is now a breeze with this guide.

Arnab Ghosh's photo
Arnab Ghosh
·May 5, 2022·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

  • Introduction

Introduction

So, today I finally sat down and updated my GitHub Profile.

I wanted to add a Snake Contributor Graph Animation on my Readme like this:

Github Snake

But, it took me a good half-hour of research to understand how to do it.

I hope, after reading this guide, you don't have to spend so much time.

1. Go to Your ReadMe Repository

By default your ReadMe repository will be located at the URL: https://github.com/{{username}}/{{username}}

2. Go to "Action"

GitHub Action

3. Setup the Workflow

I'm assuming you don't have any workflow setup before. So it will look like this: Set-up-workflow

Here, Click on the Set-up a workflow yourself button.

4. Create the main.yml File

It will create a main.yml file: .yml file

Delete everything inside the main.yml file and paste the following code:

name: Generate Datas

on:
  schedule: # execute every 12 hours
    - cron: "* */12 * * *"
  workflow_dispatch:

jobs:
  build:
    name: Jobs to update datas
    runs-on: ubuntu-latest
    steps:
      # Snake Animation
      - uses: Platane/snk@master
        id: snake-gif
        with:
          github_user_name: {{your_username}}
          svg_out_path: dist/github-contribution-grid-snake.svg

      - uses: crazy-max/ghaction-github-pages@v2.1.3
        with:
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Change the github_user_name: {{your_username}} to your own GitHub username and commit.

5. Run The Workflow

Now, click on the View runs button, and click on the Run workflow button.

Run The Workflow

Once the workflow runs successfully, it will show a prompt like this: workflow runs successfully

6. Check For The Generated .SVG on OutPut Branch

After this, go to the ReadMe repository, and change the branch from main to output.

It should show your contribution graph SVG file.

7. Add the Github Dark Snake SVG on the README.md File

Now, open your README.md file, and paste the following link:

![Snake animation](https://github.com/{{your_username}}/{{your_username}}/blob/output/github-contribution-grid-snake.svg)

Change {{your_username}} to your own GitHub username.

That's it.

Now you should have a really cool snake SVG on your GitHub Readme.

Snake gif.gif

Connect with me on LinkedIn, and Twitter

Go to my PortFolio

Read my other blogs:

Did you find this article valuable?

Support Arnab Ghosh by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this