• Stars
    star
    4,135
  • Rank 10,471 (Top 0.3 %)
  • Language
    TypeScript
  • Created over 4 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🟩⬜ Generates a snake game from a github user contributions graph and output a screen capture as animated svg or gif

snk

GitHub Workflow Status GitHub release GitHub marketplace type definitions code style

Generates a snake game from a github user contributions graph

github contribution grid snake animation

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.

Generate a gif or svg image.

Available as github action. It can automatically generate a new image each day. Which makes for great github profile readme

Usage

github action

- uses: Platane/snk@v2
  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,#3c7dd9

example with cron job

If you are only interested in generating a svg, consider using this faster action: uses: Platane/snk/svg-only@v2

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

platane.github.io/snk

local

npm install

npm run dev:demo

Implementation

solver algorithm

More Repositories

1

Platane

126
star
2

Procedural-Flower

procedurally draw beautiful flowers
JavaScript
87
star
3

js13k-2017

🖼️ Vernissage !
JavaScript
56
star
4

yAR-htzee

🎲🎲🥽 A pretty cool yahtzee game in augmented reality
TypeScript
15
star
5

github-secret-dotenv

🗝 upload secrets to github from your .env file
TypeScript
12
star
6

performance-clock

🕕 Detect performance lag in your app
HTML
11
star
7

sugiyama-graph-drawing

apply sugiyama layered graph algorithm to set node position for a graph
JavaScript
10
star
8

clapping-magic-card-trick

✨👏🃏 a stunning card trick submitted at the js1k 2017 challenge
JavaScript
10
star
9

jurassic-nursery

🥬🦎 Pet and feed adorable triceratops
TypeScript
6
star
10

skull-ocean

💀💀🌊 A grim wave simulation. It was made for the 2022 js13kGames.com competition.
TypeScript
6
star
11

svg-viewbox-crop

📏 Rewrite svg path to fix into another viewbox
TypeScript
5
star
12

pizza-tracker

🍕⏲ Track the pizza you eat over the year !
TypeScript
4
star
13

1kjs-2016

JavaScript
4
star
14

drakkar

a rendering engine for map, and user-friendly editor, both in html5
JavaScript
3
star
15

refinery

JavaScript
3
star
16

react-propsTransition

allows component to transition from a state to another
JavaScript
3
star
17

js13k-2018

🍣👨‍🍳 Sushi Kitchen
JavaScript
3
star
18

flour-oh-flour

🌾 Reap wheat, Gather flour, Enjoy the farm life in this game made for the 2020 js13kGames.com competition.
TypeScript
3
star
19

13k-alchemist-defence

game made for the 13kjs challenge
JavaScript
3
star
20

kaleidoscope

🔭
JavaScript
2
star
21

react-flippity

Animate a list of elements using FLIP trick.
JavaScript
2
star
22

scrollMeVisible.js

scrollMeVisible.js
JavaScript
2
star
23

react-algolia-hoc

🔎 Simple higher order component for algolia search
JavaScript
2
star
24

swarm-post

some explaination about my 1kjs entry "swarm"
JavaScript
2
star
25

amp-pwa-next

📽️⚡A simple movie list app featuring amp pages embedded in pwa and nice page transitions, deployed with nextjs
TypeScript
2
star
26

underground

🚆 LDN underground line status app
JavaScript
2
star
27

webxr-minimal-demo

🔮 webxr experiment
TypeScript
2
star
28

velib-paris

JavaScript
1
star
29

june

Simple single page application. Featuring nice page transition
JavaScript
1
star
30

midnight-pizza-temptation

🍕 a delicious js13k-games submission
JavaScript
1
star
31

sculpt-my-beard

JavaScript
1
star
32

13k-2015

JavaScript
1
star
33

now-grapql

now graphql boilerplate
TypeScript
1
star
34

wordle-bot

🤖 A bot who solves the daily wordle and posts the result on twitter.
TypeScript
1
star
35

watwet

🌲🌿 App to help arborists in their job
JavaScript
1
star
36

1kjs-2018

JavaScript
1
star
37

timezone-rocks

Visualize different timezones around the globe.
TypeScript
1
star
38

thirteen

JavaScript
1
star
39

ampokedex

⚡Pokedex App powered by amp
TypeScript
1
star
40

Platane.github.io-tracking

JavaScript
1
star
41

Platane.github.io

👓📒 platane homepage
TypeScript
1
star