# platane/snk

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/platane-snk).**

5,899 stars · 2,253 forks · TypeScript

## Links

- GitHub: https://github.com/Platane/snk
- Homepage: https://platane.github.io/snk
- awesome-repositories: https://awesome-repositories.com/repository/platane-snk.md

## Topics

`gif` `github-actions` `github-contribution-graph` `github-contributions` `github-profile-readme` `snake-game` `svg-animations`

## Description

Snk is a GitHub profile readme widget that generates an animated snake visualization from a user's contribution graph data. It transforms the familiar contribution grid into a sequence where a snake moves across the cells, consuming them in order, and outputs the result as an animated SVG or GIF file.

The project automates the entire workflow through a daily cron-triggered job, fetching contribution data via the GitHub GraphQL API, constructing the snake animation frame by frame, and exporting the final image. Users can customize the color palette of both the snake and the grid cells to match their profile theme, and the generated image is designed to be embedded directly in a GitHub profile readme with scheduled updates.

The system handles the full pipeline from data retrieval to image generation, including SVG path construction for the snake body, canvas-based animation, and GIF frame compositing for animated exports. The documentation covers setup through GitHub Actions, enabling users to configure the workflow and color scheme for their own profiles.

## Tags

### Development Tools & Productivity

- [Contribution Graph Animators](https://awesome-repositories.com/f/development-tools-productivity/contribution-graph-simulators/contribution-graph-animators.md) — Animates a user's contribution graph as a snake eating cells in sequence, outputting as SVG or GIF. ([source](https://cdn.jsdelivr.net/gh/platane/snk@main/README.md))
- [Contribution Graph Game Animators](https://awesome-repositories.com/f/development-tools-productivity/contribution-graph-simulators/contribution-graph-game-animators.md) — Transforms a GitHub contribution grid into a playable snake game animation.
- [Contribution Graph SVG Renderers](https://awesome-repositories.com/f/development-tools-productivity/contribution-graph-simulators/contribution-graph-svg-renderers.md) — Converts GitHub contribution data into an SVG grid by mapping each cell's color and position.
- [Contribution Visualization Tools](https://awesome-repositories.com/f/development-tools-productivity/github-integration-tools/contribution-visualization-tools.md) — Animates a user's GitHub contribution graph as a snake eating cells, outputting as SVG or GIF for profile readmes.
- [Snake Contribution Animators](https://awesome-repositories.com/f/development-tools-productivity/github-integration-tools/contribution-visualization-tools/snake-contribution-animators.md) — An animated snake that eats contribution cells from a GitHub user's graph, exported as SVG or GIF.
- [Profile Readme Image Automators](https://awesome-repositories.com/f/development-tools-productivity/github-integration-tools/readme-generators/profile-readme-image-automators.md) — Generates daily animated images from GitHub data to embed in profile readmes with scheduled updates.
- [GitHub API Clients](https://awesome-repositories.com/f/development-tools-productivity/graphql-clients/github-api-clients.md) — Retrieves user contribution graph data via the GitHub GraphQL API for animation generation.

### Part of an Awesome List

- [Dynamic Snake](https://awesome-repositories.com/f/awesome-lists/devtools/profile-widgets/dynamic-snake.md) — A dynamic widget that displays a snake animation of contribution activity for GitHub profile pages.
- [Profile Widgets](https://awesome-repositories.com/f/awesome-lists/devtools/profile-widgets.md) — Generates a snake game from contribution graph data.

### Graphics & Multimedia

- [Contribution Graph GIF Creators](https://awesome-repositories.com/f/graphics-multimedia/animated-gif-creators/contribution-graph-gif-creators.md) — Creates animated SVG or GIF files from a sequence of contribution graph states with customizable colors.
- [Contribution Data SVG Generators](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/vector-graphics-resources/svg-graphic-drawing/programmatic-svg-generation/terminal-animation-svg-generators/contribution-data-svg-generators.md) — Creates animated SVG files from GitHub contribution data for use in profile readmes.
- [Canvas Frame Animations](https://awesome-repositories.com/f/graphics-multimedia/image-editing-processing/image-processing/image-sequence-processors/animation-frame-sequencers/canvas-frame-animations.md) — Animates the snake by clearing and redrawing SVG paths frame by frame in a timer-driven loop.
- [Animated SVG GIF Exports](https://awesome-repositories.com/f/graphics-multimedia/svg-image-exports/animated-svg-gif-exports.md) — Outputs the snake animation as an SVG or GIF with customizable colors and background. ([source](https://cdn.jsdelivr.net/gh/platane/snk@main/README.md))
- [Grid Traversal Path Builders](https://awesome-repositories.com/f/graphics-multimedia/svg-path-rendering/compositional-svg-path-builders/grid-traversal-path-builders.md) — Constructs the snake body as connected SVG path segments based on a grid traversal algorithm.
- [Daily Profile Image Generators](https://awesome-repositories.com/f/graphics-multimedia/automated-image-generators/daily-profile-image-generators.md) — Generates a fresh snake animation each day for profile readmes using an automated schedule. ([source](https://cdn.jsdelivr.net/gh/platane/snk@main/README.md))
- [SVG Frame GIF Compositors](https://awesome-repositories.com/f/graphics-multimedia/frame-by-frame-stream-processing/animation-frame-capturers/svg-frame-gif-compositors.md) — Assembles individual SVG frames into an animated GIF by rasterizing and encoding them sequentially.

### User Interface & Experience

- [Contribution Grid Color Mappings](https://awesome-repositories.com/f/user-interface-experience/color-palette-systems/contribution-grid-color-mappings.md) — Maps user-defined colors to contribution grid cells and snake segments for visual customization.
- [Contribution Graph Color Workflows](https://awesome-repositories.com/f/user-interface-experience/color-schemes/custom-color-palette-definitions/avatar-color-palette-customizations/contribution-graph-color-workflows.md) — Changes the color palette of the snake and grid cells to match a profile or theme.
- [Snake Grid Color Customizations](https://awesome-repositories.com/f/user-interface-experience/color-schemes/custom-color-palette-definitions/avatar-color-palette-customizations/snake-grid-color-customizations.md) — Changes the color palette of the snake and grid cells to match a profile theme. ([source](https://github.com/platane/snk))