Decorate GitHub Profile or any Repo like me!
- How to Use
- Types
- Color
- Custom Color List
- Section
- Reversal
- Height
- Text
- Desc
- Text Background
- Text Animation
- Font Color
- Font Size
- Font Align - X
- Font Align - Y
- Desc Size
- Desc Align - X
- Desc Align - Y
- Rotate
- Demo
Any of Idea -> Idea-Issue or PR
https://capsule-render.vercel.app/api?
Just write query parameter end of this url. Like this
Markdown:
HTML:
<img src="https://capsule-render.vercel.app/api?type=wave&color=auto&height=300§ion=header&text=capsule%20render&fontSize=90" />
Type data makes to change Background Image.
Write &type= on the URL
Change Background Image!
&color=auto: Proven random color. List are here&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&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)
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
timeAutoandtimeGradient?Used section
headerandfooterat the same time.
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. - If you use
&color=gradient, look at gradient list.
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)
Section data makes reverse Background Image.
§ion=header: (default)§ion=footer
Write §ion= on the URL
Reverse the image left and right. (Color at the same time)
&reversal=false: (default)&reversal=true
Change Image Size. Default value is 120.
Write &height= on the URL
Do not write
px
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) only
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
Background of Text.
Write &textBg=true to active.
If you want to increase background-size, add
%20between text values. This is because background-size depends on the length of the english-text. (%20 means spacing)
Make the text dynamic.
Write &animation= , if you want to use.
fadeIn: fadeIn 1.2sscaleIn: scaleIn .8sblink: blink .6sblinking: blinking 1.6stwinkling: twinkling 4s
Change text color. Default value is 000000 Value should be Hex code with erased '#'
Write &fontColor= behind Text query
Change text font size. Default value is 70.
Write &fontSize= behind Text query
Do not write
px
Change text horizontal-align (x). write number between 0~100
&fontAlign= : Default value is 50. center of image
Change text vertical-align (y). write number between 0~100
&fontAlignY= : Default value is 50. center of image
Change desc font size. Default value is 20.
Write &descSize= behind desc query
Do not write
px
Change desc horizontal-align (x). write number between 0~100
&descAlign= : Default value is 50. center of image
Change text vertical-align (y). write number between 0~100
&descAlignY= : Default value is 60. center of image
Usage &rotate= , to rotate text.
You can also use negative number.
Recommend number arrange. ☞
0 ~ 360,0 ~ -360.
