explaingit

platane/snk

★ 5,812TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

Snk turns your GitHub contribution graph into an animated snake game GIF or SVG that you can display on your GitHub profile README.

Mindmap

mindmap
  root((snk))
    What it does
      Animates contribution graph
      Outputs SVG or GIF
      Daily auto-regeneration
    Tech Stack
      TypeScript
      GitHub Actions
      npm package
    Use Cases
      GitHub profile README
      GitLab profile
      Custom color themes
    Audience
      Developers
      Open source contributors
      Profile customizers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add a snake animation to your GitHub profile README that updates daily with your real contribution data.

USE CASE 2

Generate a snake animation for a GitLab or Forgejo/Codeberg profile contribution graph.

USE CASE 3

Call the generate-snake-animation npm package from TypeScript to create custom contribution graph animations.

Tech stack

TypeScriptGitHub ActionsSVGGIFnpm

Getting it running

Difficulty · easy Time to first run · 5min

Requires adding a GitHub Actions workflow file and a GitHub personal access token with read:user scope.

In plain English

Snk is a tool that turns a GitHub user's contribution graph into a snake game animation. The contribution graph is the grid of colored squares on a GitHub profile page, where each square represents a day and its color shows how many contributions were made that day. Snk reads that grid, computes a path where a snake travels through and eats each colored square in order, then exports the result as an animated SVG or GIF file. The most common use is as a GitHub Action. You add it to a workflow in your repository, provide your GitHub username, and it generates an animated image of the snake moving across your contribution grid. The action can run on a schedule, so the image is regenerated daily with fresh data. The resulting file can then be embedded in a GitHub profile README, which is the custom page displayed when someone visits your GitHub profile. Several output options are available. SVG files load faster and a dedicated svg-only variant of the action skips GIF generation entirely. GIF files support a custom background color. Colors for the dots, the snake body, and the background can all be set independently, and preset palettes are provided for light and dark GitHub themes. Dark mode is supported through a standard HTML picture element that switches between two image sources based on the viewer's theme. The tool is also published as an npm package called generate-snake-animation. This allows you to call it from JavaScript or TypeScript code directly, or run it via npx from the command line. It supports GitHub, GitLab, and Forgejo, the platform used by Codeberg. The project does not accept pull requests. Issues and bug reports are welcome, but proposed changes to the API or implementation are expected to be discussed in an issue first.

Copy-paste prompts

Prompt 1
Write a GitHub Actions workflow that runs snk daily to regenerate my contribution snake animation and commit it to my profile repo.
Prompt 2
How do I customize the snake and dot colors in snk to match a dark-mode GitHub theme?
Prompt 3
Show me how to embed the snk-generated SVG in my GitHub profile README with automatic dark/light mode switching using the HTML picture element.
Prompt 4
How do I use npx generate-snake-animation to create a snake animation for my GitLab contribution graph?
Open on GitHub → Explain another repo

← platane on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.