https://github.com/kawarimidoll/typograssy
Typography like GitHub-grass
https://github.com/kawarimidoll/typograssy
contribution-graph deno denodeploy github-profile github-readme pixel-art pixel-art-maker svg typescript typography
Last synced: 2 months ago
JSON representation
Typography like GitHub-grass
- Host: GitHub
- URL: https://github.com/kawarimidoll/typograssy
- Owner: kawarimidoll
- License: mit
- Created: 2021-02-06T02:16:26.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-06-02T11:57:10.000Z (about 1 year ago)
- Last Synced: 2025-04-11T02:09:22.750Z (2 months ago)
- Topics: contribution-graph, deno, denodeploy, github-profile, github-readme, pixel-art, pixel-art-maker, svg, typescript, typography
- Language: TypeScript
- Homepage: https://typograssy.deno.dev
- Size: 208 KB
- Stars: 90
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](.github/workflows/ci.yml)
[](https://deno.land)
[](LICENSE)
Generate SVG image like GitHub contribution graph (github-grass) with API.
You can configure the URL in [the online editor](https://typograssy.deno.dev/)
with seeing preview.
## Quick start
Markdown:
```md
[](https://github.com/kawarimidoll/typograssy)
```
HTML:
```html
```
## Features
### :gear: Configurable
See [parameters](#parameters) section.
### :scroll: Auto-scrolling
The pixels will scroll if the text can't be show at once.
:bulb: You should put 'trailing space' to the URL to separate the last character
and the first one.
## :jp: Japanese support
You can check supported characters on [characters.ts](characters.ts).
## Parameters
:warning: Follow the [color value format](#color-value-format) when you change
the colors.
### text [required]
- type: `string`
The text that you want to show. It need to be less than 70 characters.
### l0, l1, l2, l3, l4
- type: `string`
- default:
- l0: `ebedf0`
- l1: `9be9a8`
- l2: `40c463`
- l3: `30a14e`
- l4: `216e39`
The color of the pixels. `l0` is used as base color, the others are used as font
color at random.
### bg
- type: `string`
- default: `ffffff`
The color of the background.
### frame
- type: `string`
- default: `000000`
The color of the frame.
### speed
- type: `number`
- default: `200`
The speed of scrolling. `200` means that move 1 pixel per 200 milliseconds.
### comment
- type: `string`
- default: `Generated by kawarimidoll/typograssy`
The comment on left bottom. It need to be less than 70 characters.
## Color value format
- hex value without hash symbol. e.g. `000`, `123abc`.
- [html color name](w3c_color_names.ts). e.g. `red`, `aqua`.
- `none`.
## Contribution
All contributions are welcome!
## Develop
See defined tasks to run `deno task`.
### Local run
```bash
deno task run
```
### Format files
```bash
deno task fmt
```
### Lint files
```bash
deno task lint
```
### Run tests
```bash
deno task test
```
## Related pages
- Runtime: [Deno](https://deno.land/), [Deno Deploy](https://deno.com/deploy)
- Font: [美咲フォント](https://littlelimit.net/misaki.htm)
- Style of GUI page: [Water.css](https://github.com/kognise/water.css)
- Inspired:
[Github Profile Trophy](https://github.com/ryo-ma/github-profile-trophy)