https://github.com/kyechan99/capsule-render
🌈 Dynamic Coloful Image Render
https://github.com/kyechan99/capsule-render
dynamic dynamic-profile github-profile image-generator profile-readme readme-generator
Last synced: 4 days ago
JSON representation
🌈 Dynamic Coloful Image Render
- Host: GitHub
- URL: https://github.com/kyechan99/capsule-render
- Owner: kyechan99
- License: mit
- Created: 2020-07-17T07:43:30.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2025-04-01T14:12:20.000Z (14 days ago)
- Last Synced: 2025-04-04T14:11:23.320Z (11 days ago)
- Topics: dynamic, dynamic-profile, github-profile, image-generator, profile-readme, readme-generator
- Language: TypeScript
- Homepage: https://capsule-render.vercel.app
- Size: 869 KB
- Stars: 1,398
- Watchers: 6
- Forks: 663
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-github-profile - Capsule Render
README
English
·
한국어
.
Français
.
Deutsch
.
简体中文
.
繁體中文
.
繁體粤语
.
Português (Brasileiro)
> Looking for someone to translate this README.
> Supports simple [Generator](https://capsule-render.vercel.app/).
> However, we recommend reading the README for more detailed adjustments.
## Navigation
1. [How to Use](#how-to-use)
2. [Types](#types)
3. [Color](#color)
4. [Custom Color List](#custom-color-list)
5. [Section](#section)
6. [Reversal](#reversal)
7. [Height](#height)
8. [Text](#text)
9. [Desc](#desc)
10. [Text Background](#text-background)
11. [Text Animation](#text-animation)
12. [Font Color](#fontcolor)
13. [Font Size](#fontsize)
14. [Font Align - X](#fontalign)
15. [Font Align - Y](#fontaligny)
16. [Desc Size](#descsize)
17. [Desc Align - X](#descalign)
18. [Desc Align - Y](#descaligny)
19. [Rotate](#rotate)
20. [Demo](#demo)
Any of Idea -> [Idea-Issue](https://github.com/kyechan99/capsule-render/labels/Idea) or [PR](https://github.com/kyechan99/capsule-render/pulls)
# How to Use
```
https://capsule-render.vercel.app/api?
```
Just write query parameter end of this url. Like this
Markdown:
```
```
HTML:
```
```
## Types
Type data makes to change Background Image.
- [wave](#wave) : default
- [egg](#egg)
- [shark](#shark)
- [slice](#slice)
- [rect](#rect)
- [soft](#soft)
- [rounded](#rounded)
- [cylinder](#cylinder)
- [waving](#waving)
- [venom](#venom)
- [speech](#speech)
- [blur](#blur)
- [transparent](#transparent)
Write `&type= ` on the URL
```
```
## Color
Change Background Image!
- `&color=auto` : Proven random color. List are [here](https://github.com/kyechan99/capsule-render/blob/master/src/pallete.json)
- `&color=timeAuto` : Proven random color, but is decided by time.
- `&color=random` : Really random color. I don't know what colors are showing.
- `&color=gradient` : Proven random gradient. List are [here](https://github.com/kyechan99/capsule-render/blob/master/src/gradient.json)
- `&color=timeGradient` : Proven random gradient, but is decided by time.
- `&color=_hexcode` : default(#B897FF)
- `&color=_custom_gradient` : Custom gradient. If write as `&color=0:EEFF00,100:a82da8`, it will be converted to { 0%: 'EEFF00', 100%: 'a82da8' }. (e.g. [DEMO](https://capsule-render.vercel.app/api?type=rect&color=0:EEFF00,100:a82da8))
If you use `auto` mode. no need to change `fontColor`.
`auto` also change fontColor auto.
```
```
> If you use static color. Do not write '#'
> When use `timeAuto` and `timeGradient`?
>
> Used section `header` and `footer` at the same time.
## Custom Color List
You can **customize the list of colors** that will appear randomly only for `&color=auto` and `&color=gradient`.
Write `&customColorList= ` on the URL.
- If you use `&color=auto`, look at [pallete list](https://github.com/kyechan99/capsule-render/blob/master/src/pallete.json).
- If you use `&color=gradient`, look at [gradient list](https://github.com/kyechan99/capsule-render/blob/master/src/gradient.json).
Pick the color patterns you want and remember the `idx` value.
For example, if the idx values are 0, 2, and 3, write: `&customColorList=0,2,3`
If you want to make many apperances of `idx=2`, you can write them repeatedly. (e.g. `&customColorList=0,2,2,2,2,3`)
```
```
## Theme
You can use the specified combination using `theme=`.
Even if `color` and `fontColor` are used, theme has the highest priority.
Check the list of available themes at [pallete_theme.json](https://github.com/kyechan99/capsule-render/blob/master/src/pallete_theme.json).
```
```
> I'm currently adding combinations from the [Link:theme](https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md) little by little.
## Section
Section data makes reverse Background Image.
- `§ion=header` : (default)
- `§ion=footer`
Write `§ion= ` on the URL
```
```
## Reversal
Reverse the image left and right. (Color at the same time)
- `&reversal=false` : (default)
- `&reversal=true`
```
```
## Height
Change Image Size. Default value is 120.
Write `&height= ` on the URL
```
```
> Do not write `px`
## Text
Input text over the Image.
Write Something `&text= `.
```
```
> You can't use some Special Characters. Like '#', '&', '/' ...
>
> It makes confused API
> It is recommended to use `%20` (blank) and `-nl-` (new line) only
## Desc
Input desc over the Image.
Write Something `&desc= `.
```
```
> You can't use some Special Characters. Like '#', '&', '/' ...
>
> It makes confused API
> It is recommended to use `%20` (blank) only
## Text Background
Background of Text.
Write `&textBg=true` to active.
> If you want to increase background-size,
> add `%20` between text values.
> This is because background-size depends on the length of the english-text. (%20 means spacing)
```
```
## Text Animation
Make the text dynamic.
Write `&animation= `, if you want to use.
- `fadeIn` : fadeIn 1.2s
- `scaleIn` : scaleIn .8s
- `blink` : blink .6s
- `blinking` : blinking 1.6s
- `twinkling` : twinkling 4s
```
```
## FontColor
Change text color. Default value is 000000.
Value should be Hex code with erased '#'
Write `&fontColor= ` behind **Text** query
```
```
## FontSize
Change text font size. Default value is 70.
Write `&fontSize= ` behind **Text** query
```
```
> Do not write `px`
## FontAlign
Change text horizontal-align (x). write number **between 0~100**
`&fontAlign= ` : Default value is 50. center of image
> In case there are multiple lines in `&text= ` (`-nl-`), providing multiple `&fontAlign= ` will apply different horizontal-align to each line individually.
```
```
## FontAlignY
Change text vertical-align (y). write number **between 0~100**
`&fontAlignY= ` : Default value for one line is 50 (center of image). For multiple lines (separated by `-nl-`), default will be calculated to get lines stacked on top of each other and centered.
> In case there are multiple lines in `&text= ` (`-nl-`), providing multiple `&fontAlignY= ` will apply different vertical-align to each line individually.
```
```
## DescSize
Change desc font size. Default value is 20.
Write `&descSize= ` behind **desc** query
```
```
> Do not write `px`
## DescAlign
Change desc horizontal-align (x). write number **between 0~100**
`&descAlign= ` : Default value is 50. center of image
```
```
## DescAlignY
Change text vertical-align (y). write number **between 0~100**
`&descAlignY= ` : Default value is 60. center of image
```
```
## Rotate
Usage `&rotate= `, to rotate text.
You can also use negative number.
> Recommend number arrange. ☞ `0 ~ 360`, `0 ~ -360`.
```
```
## Stroke
Change text stroke.
Write `&stroke=` behind query
Value should be Hex code with erased '#'
```
```
> Recommended to use with `strokeWidth`.
>
> When used alone, strokeWidth defaults to 1.
## Stroke-width
Change text stroke width.
Write `&strokeWidth=` behind stroke query
Value must be greater than or equal to 0.
```
```
> Recommended to use with `stroke`.
>
> When used alone, stroke defaults to 'B897FF'.
