A solarpunk garden for your GitHub profile, generated daily from your contributions

Description and use

Create an animated garden from your GitHub contribution graph, updated daily via GitHub Actions, supporting multiple climates and languages.

Problem

Convert a GitHub contribution graph into a visually appealing, animated isometric garden that updates daily and adapts to different climates and languages.

Outcome

The garden-graph project produces a daily-updated, animated SVG garden that visually represents a user's GitHub contributions, supports multiple climates and languages, and can be embedded in a profile README with responsive design.

Workflow

• 1. Fork or create a repository named <login>/<login> and copy the garden-graph files.
• 2. Enable GitHub Actions in the repository settings.
• 3. Edit .github/workflows/garden.yml to set GARDEN_CLIMATE, GARDEN_LANG, and optionally GITHUB_LOGIN, GITHUB_TOKEN, GARDEN_YEARS.
• 4. Run the "Update garden" workflow manually from the Actions tab to generate the initial SVGs.
• 5. The workflow schedules a daily run at 05:17 UTC to regenerate the garden and commit changes only if files differ.
• 6. Embed the generated SVGs in the profile README using a <picture> element with media queries for light/dark and mobile views.

Evidence

I turned my GitHub contribution graph into an isometric garden. One tile per day, a plant that grows with the number of contributions, seasons that follow the calendar, and a small gardener walking around today's tile.

Source

It is a plain SVG with CSS and SMIL animations, regenerated every day by a GitHub Action. Python standard library only, no dependencies, MIT license: [Shagshag/garden-graph](https://github.com/Shagshag/garden-graph).

Source

The workflow commits only if the files changed. That makes one commit per day, and a run takes about 15 seconds.

Source

To also count your private contributions, add a secret GH_STATS_TOKEN (a token with read:user) and enable "Private contributions" in your profile settings.

Source

Embed the year view in your profile README with <picture>, which serves a light and a dark image.

Source