Top Related Projects
⚡ Dynamically generated, customizable SVG that gives the appearance of typing and deleting text for use on your profile page, repositories, or website.
:zap: Dynamically generated stats for your github readmes
📊 An infographics generator with 30+ plugins and 300+ options to display stats about your GitHub account and render them as SVG, Markdown, PDF or JSON!
It counts how many times your GitHub profile has been viewed. Free cloud micro-service.
This repository will assist you in creating a more beautiful and appealing github profile, and you will have access to a comprehensive range of tools and tutorials for beautifying your github profile. 🪄 ⭐
A tool to generate your github summary card for profile README
Quick Overview
Capsule-render is a GitHub repository that provides a dynamic way to generate customizable header or footer images for GitHub profiles and repositories. It offers a simple URL-based API to create visually appealing SVG images with various styles, colors, and text options.
Pros
- Easy to use with a simple URL-based API
- Highly customizable with numerous options for styles, colors, and text
- Generates lightweight SVG images that load quickly
- Integrates seamlessly with GitHub markdown
Cons
- Limited to predefined styles and shapes
- Requires external image hosting, which may not be ideal for some users
- Customization options might be overwhelming for beginners
- Dependent on the availability of the external service
Code Examples
- Basic usage with default options:
![Header](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300§ion=header&text=capsule%20render&fontSize=90)
- Custom wave style with specific colors:
![Footer](https://capsule-render.vercel.app/api?type=waving&color=0:EEFF00,100:a82da8&height=200§ion=footer&text=Hello%20World&fontSize=50)
- Animated text with custom font:
![Header](https://capsule-render.vercel.app/api?type=cylinder&color=gradient&text=Hello%20World&animation=fadeIn&fontColor=ffffff&fontSize=40&fontAlignY=55&desc=Desc&descAlignY=70&descAlign=60)
Getting Started
To use capsule-render in your GitHub profile or repository:
- Choose a style and customize options using the documentation.
- Generate the URL for your desired image.
- Add the URL to your markdown file using the following syntax:
![Description](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300§ion=header&text=Your%20Text&fontSize=90)
- Adjust parameters as needed to achieve the desired look.
Competitor Comparisons
⚡ Dynamically generated, customizable SVG that gives the appearance of typing and deleting text for use on your profile page, repositories, or website.
Pros of readme-typing-svg
- Dynamic and animated text display, creating an eye-catching effect
- Customizable text content, colors, and animation speed
- Lightweight and easy to implement in GitHub READMEs
Cons of readme-typing-svg
- Limited to text-based content only
- Requires external hosting and may not work if the service is down
- Less versatile in terms of overall design options compared to capsule-render
Code Comparison
readme-typing-svg:
<a href="https://git.io/typing-svg"><img src="https://readme-typing-svg.herokuapp.com?font=Fira+Code&pause=1000&width=435&lines=The+five+boxing+wizards+jump+quickly" alt="Typing SVG" /></a>
capsule-render:
<img src="https://capsule-render.vercel.app/api?type=wave&color=auto&height=300§ion=header&text=capsule%20render&fontSize=90" />
Summary
readme-typing-svg excels in creating dynamic, animated text displays, making it ideal for adding a touch of interactivity to GitHub profiles. However, it's limited to text content and relies on external hosting. capsule-render, on the other hand, offers more versatile design options and can create various graphical elements beyond just text. The choice between the two depends on whether you prioritize animated text (readme-typing-svg) or more comprehensive header designs (capsule-render) for your GitHub README.
:zap: Dynamically generated stats for your github readmes
Pros of github-readme-stats
- Provides dynamic statistics and metrics for GitHub profiles and repositories
- Offers a wide range of customization options for cards and themes
- Supports multiple programming languages and frameworks
Cons of github-readme-stats
- Requires API calls, which may lead to rate limiting for high-traffic profiles
- Limited to GitHub-specific data and metrics
- May have slower load times due to dynamic content generation
Code Comparison
capsule-render:
![header](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300§ion=header&text=capsule%20render&fontSize=90)
github-readme-stats:
[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)
Summary
capsule-render focuses on creating visually appealing header images for GitHub profiles, while github-readme-stats provides dynamic statistics and metrics. capsule-render offers simpler customization but is limited to header images, whereas github-readme-stats provides more comprehensive GitHub data but may face rate limiting issues. Both projects enhance GitHub profile aesthetics, with capsule-render emphasizing visual design and github-readme-stats prioritizing data visualization.
📊 An infographics generator with 30+ plugins and 300+ options to display stats about your GitHub account and render them as SVG, Markdown, PDF or JSON!
Pros of metrics
- Offers a wide range of customizable metrics and visualizations for GitHub profiles
- Provides detailed analytics including activity, languages, and contributions
- Supports plugins for extended functionality and integrations
Cons of metrics
- More complex setup and configuration compared to capsule-render
- Requires more computational resources due to its comprehensive nature
- May have a steeper learning curve for new users
Code Comparison
metrics:
- uses: lowlighter/metrics@latest
with:
token: ${{ secrets.METRICS_TOKEN }}
plugin_languages: yes
plugin_achievements: yes
capsule-render:
![header](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300§ion=header&text=capsule%20render&fontSize=90)
metrics offers a more data-driven approach with various plugins and configurations, while capsule-render focuses on creating visually appealing header images for GitHub profiles. metrics provides in-depth analytics and customization options, but requires more setup. capsule-render is simpler to use and faster to implement, but has limited functionality compared to metrics. The choice between the two depends on whether you need comprehensive GitHub statistics or quick, eye-catching profile headers.
It counts how many times your GitHub profile has been viewed. Free cloud micro-service.
Pros of github-profile-views-counter
- Provides a dynamic view counter for GitHub profiles
- Offers customizable badge styles and layouts
- Supports multiple programming languages for integration
Cons of github-profile-views-counter
- Limited to view counting functionality
- Requires external service dependency for counting
- May not be as visually appealing for profile customization
Code Comparison
github-profile-views-counter:
![](https://komarev.com/ghpvc/?username=your-github-username)
capsule-render:
![header](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300§ion=header&text=capsule%20render&fontSize=90)
Summary
github-profile-views-counter focuses on tracking and displaying profile views, offering customizable badges. It's useful for those interested in visitor statistics but limited in visual customization.
capsule-render, on the other hand, provides dynamic and visually appealing header images for GitHub profiles. It offers more design options and doesn't require external services for functionality.
Choose github-profile-views-counter for view tracking or capsule-render for eye-catching profile headers. Consider combining both for a comprehensive profile enhancement.
This repository will assist you in creating a more beautiful and appealing github profile, and you will have access to a comprehensive range of tools and tutorials for beautifying your github profile. 🪄 ⭐
Pros of beautify-github-profile
- Offers a wider range of customization options for GitHub profiles
- Provides more comprehensive guidance on profile enhancement
- Includes a variety of tools and resources beyond just header images
Cons of beautify-github-profile
- Less focused on a specific feature, which may be overwhelming for some users
- Requires more manual effort to implement various profile enhancements
- May have a steeper learning curve for beginners
Code Comparison
capsule-render:
![header](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300§ion=header&text=capsule%20render&fontSize=90)
beautify-github-profile:
<h3 align="left">Connect with me:</h3>
<p align="left">
<a href="your-twitter-url" target="blank"><img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/twitter.svg" alt="your-twitter" height="30" width="40" /></a>
</p>
While capsule-render focuses on generating header images with a simple API call, beautify-github-profile provides more comprehensive profile customization options, including social media links and various other elements. The code examples demonstrate the difference in approach, with capsule-render offering a more streamlined solution for header images, and beautify-github-profile providing more detailed markup for profile enhancements.
A tool to generate your github summary card for profile README
Pros of github-profile-summary-cards
- Provides comprehensive GitHub statistics and visualizations
- Offers multiple card styles and themes for customization
- Supports various programming languages and frameworks
Cons of github-profile-summary-cards
- Requires more setup and configuration than capsule-render
- Limited to GitHub-specific data and metrics
- May have slower rendering times due to data fetching
Code Comparison
capsule-render:
![Header](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300§ion=header&text=capsule%20render&fontSize=90)
github-profile-summary-cards:
- name: GitHub-Profile-Summary-Cards
uses: vn7n24fzkq/github-profile-summary-cards@release
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
USERNAME: ${{ github.repository_owner }}
The capsule-render code is simpler and focuses on creating eye-catching header images, while github-profile-summary-cards requires more configuration but provides detailed GitHub statistics and visualizations.
Both projects enhance GitHub profiles, but capsule-render is more suitable for quick, visually appealing headers, while github-profile-summary-cards offers in-depth GitHub activity analysis and customizable card layouts.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
English · íêµì´ . Français . Deutsch
Looking for someone to translate this README.
Supports simple Generator. However, we recommend reading the README for more detailed adjustments.
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:
![header](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300§ion=header&text=capsule%20render&fontSize=90)
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
![header](https://capsule-render.vercel.app/api?type=slice)
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.
![header](https://capsule-render.vercel.app/api?color=auto)
If you use static color. Do not write '#'
When use
timeAuto
andtimeGradient
?Used section
header
andfooter
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. - 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
)
![header](https://capsule-render.vercel.app/api?color=gradient&customColorList=0,2,2,5,30)
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.
![reversal](https://capsule-render.vercel.app/api?type=rect&text=RECT&fontAlign=30&fontSize=30&desc=Use%20theme&descAlign=60&descAlignY=50&theme=radical)
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
![footer](https://capsule-render.vercel.app/api?section=footer)
Reversal
Reverse the image left and right. (Color at the same time)
&reversal=false
: (default)&reversal=true
![reversal](https://capsule-render.vercel.app/api?type=slice&reversal=true&color=gradient)
Height
Change Image Size. Default value is 120.
Write &height=
on the URL
![header](https://capsule-render.vercel.app/api?height=400)
Do not write
px
Text
Input text over the Image.
Write Something &text=
.
![header](https://capsule-render.vercel.app/api?text=Hello%World!)
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=
.
![header](https://capsule-render.vercel.app/api?height=400&text=Hello%20World!&desc=Hello%20capsule%20render)
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)
![header](https://capsule-render.vercel.app/api?type=rounded&color=gradient&text=%20asdf%20&height=300&fontSize=100&textBg=true)
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
![header](https://capsule-render.vercel.app/api?text=capsule_render&animation=fadeIn)
FontColor
Change text color. Default value is 000000.
Value should be Hex code with erased '#'
Write &fontColor=
behind Text query
![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontColor=d6ace6)
FontSize
Change text font size. Default value is 70.
Write &fontSize=
behind Text query
![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontSize=40)
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.
![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlign=70)
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.
![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlignY=20)
DescSize
Change desc font size. Default value is 20.
Write &descSize=
behind desc query
![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontSize=40&desc=Desc&descSize=30)
Do not write
px
DescAlign
Change desc horizontal-align (x). write number between 0~100
&descAlign=
: Default value is 50. center of image
![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlign=70&desc=Desc&descAlign=20)
DescAlignY
Change text vertical-align (y). write number between 0~100
&descAlignY=
: Default value is 60. center of image
![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlignY=20&desc=Desc&descAlignY=40)
Rotate
Usage &rotate=
, to rotate text.
You can also use negative number.
Recommend number arrange. â
0 ~ 360
,0 ~ -360
.
![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontSize=20&rotate=-30)
Stroke
Change text stroke.
Write &stroke=
behind query
Value should be Hex code with erased '#'
![header](https://capsule-render.vercel.app/api?type=rect&height=200&text=Stroke%20Test&fontAlign=70&stroke=00FF00)
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.
![header](https://capsule-render.vercel.app/api?type=rect&height=200&text=Stroke%20Test&fontAlign=70&stroke=00FF00&strokeWidth=3)
Recommended to use with
stroke
.When used alone, stroke defaults to 'B897FF'.
Demo
Wave
Egg
Shark
Slice
Rect
Soft
Rounded
Cylinder
Waving
Transparent
Venom
Top Related Projects
⚡ Dynamically generated, customizable SVG that gives the appearance of typing and deleting text for use on your profile page, repositories, or website.
:zap: Dynamically generated stats for your github readmes
📊 An infographics generator with 30+ plugins and 300+ options to display stats about your GitHub account and render them as SVG, Markdown, PDF or JSON!
It counts how many times your GitHub profile has been viewed. Free cloud micro-service.
This repository will assist you in creating a more beautiful and appealing github profile, and you will have access to a comprehensive range of tools and tutorials for beautifying your github profile. 🪄 ⭐
A tool to generate your github summary card for profile README
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot