Generates a snake game from a github user contributions graph
Pull a github user's contribution graph. Make it a snake Game, generate a snake path where the cells get eaten in an orderly fashion.
Available as github action. It can automatically generate a new image each day. Which makes for great github profile readme
github action
- uses: Platane/snk@v3
with:
# github user name to read the contribution graph from (**required**)
# using action context var `github.repository_owner` or specified user
github_user_name: ${{ github.repository_owner }}
# list of files to generate.
# one file per line. Each output can be customized with options as query string.
#
# supported options:
# - palette: A preset of color, one of [github, github-dark, github-light]
# - color_snake: Color of the snake
# - color_dots: Coma separated list of dots color.
# The first one is 0 contribution, then it goes from the low contribution to the highest.
# Exactly 5 colors are expected.
outputs: |
dist/github-snake.svg
dist/github-snake-dark.svg?palette=github-dark
dist/ocean.gif?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9If you are only interested in generating a svg, consider using this faster action: uses: Platane/snk/svg-only@v3
dark mode
For dark mode support on github, use this special syntax in your readme.
<picture>
<source media="(prefers-color-scheme: dark)" srcset="github-snake-dark.svg" />
<source media="(prefers-color-scheme: light)" srcset="github-snake.svg" />
<img alt="github-snake" src="github-snake.svg" />
</picture>interactive demo
local
npm install
npm run dev:demo