Generate an SVG image like GitHub contribution graph (github-grass) with API.

You can configure the URL in the online editor with a live preview.

Quick start

Markdown:

[![typograssy](https://typograssy.deno.dev/api?text=Hello%20world!)](https://github.com/kawarimidoll/typograssy)

HTML:

<a href="https://github.com/kawarimidoll/typograssy"><img
    alt="typograssy"
    src="https://typograssy.deno.dev/api?text=Hello%20world!"
  ></a>

Features

:gear: Configurable

See parameters section.

:scroll: Auto-scrolling

The pixels will scroll if the text can't be shown at once.

:bulb: You should add a 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.

Parameters

:warning: Follow the color value format when you change the colors.

text [required]

• type: string

The text that you want to show. It needs to be less than 70 characters.

scheme

• type: string
• default: (none)

A predefined color scheme name. Available schemes: github, halloween, amber, blue, green, red, pink, purple, indigo, teal, cyan, orange, brown, grey, unicorn, summer, sunset, moon, psychedelic, gameboy, dark.

When set, it overrides the default colors for bg, frame, and l0-l4. Individual color parameters can still override specific colors from the scheme.

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 the base color, the others are used as the 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 it moves 1 pixel per 200 milliseconds.

comment

• type: string
• default: Generated by kawarimidoll/typograssy

The comment on the bottom left. It needs to be less than 70 characters.

Color value format

• hex value without hash symbol. e.g. 000, 123abc.
• html color name. e.g. red, aqua.
• none.

Contribution

All contributions are welcome!

Develop

deno task run   # Start local server
deno task test  # Run tests
deno task ci    # Lint, format check, and test

Related pages

• Runtime: Deno, Deno Deploy
• Font: 美咲フォント
• Style of GUI page: Water.css
• Inspired: Github Profile Trophy