Convert Figma logo to code with AI

kyechan99 logocapsule-render

🌈 Dynamic Coloful Image Render

1,239
631
1,239
14

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

13,445

📊 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

  1. Basic usage with default options:
![Header](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=header&text=capsule%20render&fontSize=90)
  1. Custom wave style with specific colors:
![Footer](https://capsule-render.vercel.app/api?type=waving&color=0:EEFF00,100:a82da8&height=200&section=footer&text=Hello%20World&fontSize=50)
  1. 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:

  1. Choose a style and customize options using the documentation.
  2. Generate the URL for your desired image.
  3. Add the URL to your markdown file using the following syntax:
![Description](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=header&text=Your%20Text&fontSize=90)
  1. 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&section=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&section=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.

13,445

📊 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&section=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&section=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&section=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&section=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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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

  1. How to Use
  2. Types
  3. Color
  4. Custom Color List
  5. Section
  6. Reversal
  7. Height
  8. Text
  9. Desc
  10. Text Background
  11. Text Animation
  12. Font Color
  13. Font Size
  14. Font Align - X
  15. Font Align - Y
  16. Desc Size
  17. Desc Align - X
  18. Desc Align - Y
  19. Rotate
  20. 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&section=header&text=capsule%20render&fontSize=90)

HTML:

<img src="https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=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 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.

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.

  • &section=header : (default)
  • &section=footer

Write &section= 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.2s
  • scaleIn : scaleIn .8s
  • blink : blink .6s
  • blinking : blinking 1.6s
  • twinkling : 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

wave

Egg

egg

Shark

shark

Slice

slice

Rect

rect

Soft

soft

Rounded

rounded

Cylinder

cylinder

Waving

waving

Transparent

transparent

Venom

venom