Decorate GitHub Profile or any Repo like me!
Navigation
- 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
How to Use
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" />
Types
Type data makes to change Background Image.
Write &type= on the URL
Color
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.
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. - 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)
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.
I'm currently adding combinations from the Link:theme 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
%20between 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.2sscaleIn: scaleIn .8sblink: blink .6sblinking: blinking 1.6stwinkling: 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'.