Convert Figma logo to code with AI

DenverCoder1 logoreadme-typing-svg

⚡ Dynamically generated, customizable SVG that gives the appearance of typing and deleting text for use on your profile page, repositories, or website.

5,694
895
5,694
21

Top Related Projects

:zap: Dynamically generated stats for your github readmes

🌈 Dynamic Coloful Image Render

It counts how many times your GitHub profile has been viewed. Free cloud micro-service.

13,603

📊 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!

A tool to generate your github summary card for profile README

4,179

🟩⬜ Generates a snake game from a github user contributions graph and output a screen capture as animated svg or gif

Quick Overview

README Typing SVG is a dynamic SVG image generator that creates animated text for GitHub README profiles or other markdown documents. It allows users to add eye-catching, customizable typing animations to their projects, making them more engaging and visually appealing.

Pros

  • Easy to use with a simple URL-based API
  • Highly customizable with various parameters for fonts, colors, and animation styles
  • Lightweight and fast, as it generates SVG images on-the-fly
  • Integrates seamlessly with GitHub README files and other markdown documents

Cons

  • Limited to text-based animations only
  • Requires an internet connection to generate and display the SVG
  • May not be supported in all markdown rendering environments
  • Overuse could potentially slow down page load times

Getting Started

To use README Typing SVG in your GitHub README or markdown document, simply include the following URL as an image:

[![Typing SVG](https://readme-typing-svg.demolab.com?font=Fira+Code&pause=1000&width=435&lines=The+five+boxing+wizards+jump+quickly)](https://git.io/typing-svg)

Customize the URL parameters to change the text, font, colors, and animation style. For example:

[![Typing SVG](https://readme-typing-svg.demolab.com?font=Roboto&size=35&pause=1000&color=F7F7F7&background=FF000000&center=true&vCenter=true&width=435&lines=Full+Stack+Developer;UI%2FUX+Designer;Open+Source+Contributor)](https://git.io/typing-svg)

For more advanced usage and customization options, refer to the project's documentation on GitHub.

Competitor Comparisons

:zap: Dynamically generated stats for your github readmes

Pros of github-readme-stats

  • Provides comprehensive GitHub statistics, including top languages, commit streaks, and more
  • Offers customizable themes and layouts for visual appeal
  • Supports dynamic content updates based on user's GitHub activity

Cons of github-readme-stats

  • May have slower load times due to fetching real-time data
  • Limited to GitHub-specific statistics and information
  • Requires more setup and configuration for advanced features

Code Comparison

readme-typing-svg:

[![Typing SVG](https://readme-typing-svg.herokuapp.com?font=Fira+Code&pause=1000&width=435&lines=Full+Stack+Developer;Open+Source+Enthusiast;Always+learning+new+things)](https://git.io/typing-svg)

github-readme-stats:

[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical)](https://github.com/anuraghazra/github-readme-stats)

Both repositories offer unique ways to enhance GitHub profiles. readme-typing-svg focuses on creating dynamic, animated text for READMEs, while github-readme-stats provides comprehensive GitHub statistics and visualizations. The choice between them depends on whether you prioritize eye-catching animations or detailed GitHub activity metrics for your profile.

🌈 Dynamic Coloful Image Render

Pros of capsule-render

  • Offers a wider variety of visual styles and customization options for header images
  • Supports dynamic content like GitHub stats and contribution graphs
  • Provides more flexibility in terms of image shape and layout

Cons of capsule-render

  • Requires more configuration and parameters to achieve desired results
  • May have a steeper learning curve for beginners
  • Limited to static images, lacking animated text capabilities

Code Comparison

capsule-render:

![Header](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=header&text=Hello%20World&fontSize=90)

readme-typing-svg:

[![Typing SVG](https://readme-typing-svg.herokuapp.com?font=Fira+Code&pause=1000&width=435&lines=Hello+World;Welcome+to+my+GitHub)](https://git.io/typing-svg)

Both projects enhance GitHub profile READMEs, but they serve different purposes. capsule-render focuses on creating visually appealing header images with various styles and shapes, while readme-typing-svg specializes in generating animated typing text. The choice between the two depends on the specific needs of the user and the desired visual effect for their GitHub profile.

It counts how many times your GitHub profile has been viewed. Free cloud micro-service.

Pros of github-profile-views-counter

  • Provides real-time view count for GitHub profiles
  • Easy to implement with a single line of markdown
  • Offers customizable badge styles and colors

Cons of github-profile-views-counter

  • Limited to counting profile views only
  • Less versatile compared to dynamic text generation
  • May not be as visually appealing for some users

Code Comparison

github-profile-views-counter:

![](https://komarev.com/ghpvc/?username=your-github-username)

readme-typing-svg:

[![Typing SVG](https://readme-typing-svg.herokuapp.com?font=Fira+Code&pause=1000&width=435&lines=The+five+boxing+wizards+jump+quickly)](https://git.io/typing-svg)

Summary

github-profile-views-counter is a straightforward tool for tracking profile views, while readme-typing-svg offers more dynamic and customizable text animations. The former is ideal for those interested in view statistics, while the latter provides a more visually engaging way to display changing text in README files. Both have their unique strengths, with github-profile-views-counter being simpler to implement and readme-typing-svg offering more creative possibilities for profile customization.

13,603

📊 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

  • Comprehensive GitHub stats and analytics
  • Highly customizable with numerous plugins and options
  • Generates visually appealing SVG images for various metrics

Cons of metrics

  • More complex setup and configuration
  • Requires GitHub Actions or server-side rendering
  • Larger file size and potentially slower load times

Code comparison

readme-typing-svg:

<img src="https://readme-typing-svg.herokuapp.com/?lines=First+line;Second+line" />

metrics:

- uses: lowlighter/metrics@latest
  with:
    filename: github-metrics.svg
    token: ${{ secrets.METRICS_TOKEN }}
    base: header, activity, community, repositories, metadata

Summary

metrics offers a more comprehensive solution for GitHub profile analytics, providing a wide range of customizable metrics and visualizations. It's ideal for users who want in-depth insights and are willing to invest time in configuration. readme-typing-svg, on the other hand, focuses specifically on creating animated typing effects for README files, offering a simpler and more lightweight solution for adding dynamic text to profiles. The choice between the two depends on the specific needs and desired complexity of the user's GitHub profile enhancement.

A tool to generate your github summary card for profile README

Pros of github-profile-summary-cards

  • Provides a comprehensive set of cards showcasing various GitHub statistics
  • Offers multiple themes and customization options for visual appeal
  • Generates cards for language usage, commit activity, and repository contributions

Cons of github-profile-summary-cards

  • Requires more setup and configuration compared to readme-typing-svg
  • May have a steeper learning curve for users new to GitHub Actions
  • Limited to static content, lacking the dynamic typing effect of readme-typing-svg

Code Comparison

readme-typing-svg:

[![Typing SVG](https://readme-typing-svg.herokuapp.com?font=Fira+Code&pause=1000&width=435&lines=The+five+boxing+wizards+jump+quickly)](https://git.io/typing-svg)

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 readme-typing-svg project focuses on creating animated text for GitHub profiles, while github-profile-summary-cards generates a set of static cards displaying various GitHub statistics. The former is simpler to implement but offers less comprehensive information, while the latter provides more detailed insights but requires more setup. Choose based on your specific needs for profile customization and the level of detail you want to showcase.

4,179

🟩⬜ Generates a snake game from a github user contributions graph and output a screen capture as animated svg or gif

Pros of snk

  • Generates dynamic, visually appealing SVG animations of a snake game
  • Customizable appearance, including grid size, colors, and snake behavior
  • Can be used to create unique, eye-catching GitHub profile contributions visualizations

Cons of snk

  • More complex setup and configuration compared to readme-typing-svg
  • Limited to specific use case (snake game animation) unlike the versatile text animations of readme-typing-svg
  • May require more computational resources to generate and render animations

Code Comparison

snk:

const canvas = createCanvas(width, height);
const ctx = canvas.getContext("2d");
drawBackground(ctx);
drawGrid(ctx);
drawSnake(ctx, snake);

readme-typing-svg:

$svg = new SVG($width, $height);
$svg->addText($lines, $font, $color, $center);
$svg->addAnimation($duration, $pause);
echo $svg->getString();

Both projects use different approaches to generate SVG content, with snk focusing on canvas-based drawing for complex animations, while readme-typing-svg utilizes simpler text-based SVG generation for typing effects.

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

⌨️ Readme Typing SVG

Example Usage - README Typing SVG

⚡ Quick setup

  1. Copy-paste the markdown below into your GitHub profile README
  2. Replace the value after ?lines= with your text. Separate lines of text with semicolons and use + or %20 for spaces.
  3. Adjust the width parameter (see below) to fit the full width of your text.
[![Typing SVG](https://readme-typing-svg.demolab.com/?lines=First+line+of+text;Second+line+of+text)](https://git.io/typing-svg)
  1. Star the repo 😄

⚙ Demo site

Here you can easily customize your Typing SVG with a live preview.

https://readme-typing-svg.demolab.com/demo/

Demo Site

🚀 Example usage

Below are links to profiles where you can see Readme Typing SVGs in action!

Jonah Lawrence Jini by Rentalz.com Waren Gonzaga 8BitJonny Aditya Raute Shiva Sankeerth Reddy Tarun Kamboj T.A.Vignesh William J. Ghelfi Mano Bharathi M Shivam Yadav Pratik Pingale Vydr'Oz Caroline Heloíse PriyanshK09 Thakur Ballary NiceSapien Manthan Ank Ronny Coste Vishal Beep wiz64 Aquarian Blake D3vil0p3r EliusHHimel jcs090218 Rishabh2804 shalinibhatt UlisesAlexanderAM SpookyJelly cfcife majidtdeni666 GalexY727 HectorSaldes Ash-codes18 Maagnitude cracker911181 quiet-node kaustubh43 kaisunoo meyer-pidiache jeremiahseun Anand Purushottam Greg Chism turbomaster95 K1rsN7 codesbyahsen Freddywhest Shiro-cha Abid-Nafi Srijan-Baniyal BrunoOliveiraS zidk tshr-d-dragon v-pun215 DeveshYadav13 HauseMasterZ hyskoniho elvisisvan Nquenan akhilnev mannysoft LinThitHtwe Elio-Aliaj MehmetBozkir presentformyfriends Ad7amstein LakshmanKishore mateusadada fasakinhenry YousifAbozid SuSheng13T hheinsoee lucmsilva651 ashertenenbaum 0dxplt HerobrineTV Borketh Jafeth Yahuma João Pedro suzukimain caesar013 amir78729 AJsuper007

Feel free to open a PR and add yours!

🔧 Options

ParameterDetailsTypeExample
linesText to display with lines separated by ; and + for spacesstringFirst+line;Second+line;Third+line
heightHeight of the output SVG in pixels (default: 50)integerAny positive number
widthWidth of the output SVG in pixels (default: 400)integerAny positive number
sizeFont size in pixels (default: 20)integerAny positive number
fontFont family (default: monospace)stringAny font from Google Fonts
colorColor of the text (default: 36BCF7)stringHex code without # (eg. F724A9)
backgroundBackground color of the text (default: 00000000)stringHex code without # (eg. FEFF4C)
centertrue to center text or false for left aligned (default: false)booleantrue or false
vCentertrue to center vertically or false(default) to align above the centerbooleantrue or false
multilinetrue to wrap lines or false to retype on one line (default: false)booleantrue or false
durationDuration of the printing of a single line in milliseconds (default: 5000)integerAny positive number
pauseDuration of the pause between lines in milliseconds (default: 0)integerAny non-negative number
repeattrue to loop around to the first line after the last (default: true)booleantrue or false
separatorSeparator used between lines in the lines parameter (default: ;)string;, ;;, /, etc.
letterSpacingLetter spacing (default: normal)stringAny css values for the letter-spacing property

📤 Deploying it on your own

If you can, it is preferable to host the files on your own server.

Doing this can lead to better uptime and more control over customization (you can modify the code for your usage).

You can deploy the PHP files on any website server with PHP installed or as a Heroku app.

Step-by-step instructions for deploying to Heroku

  1. Sign in to Heroku or create a new account at https://heroku.com
  2. Click the "Deploy to Heroku" button below

Deploy

  1. On the page that comes up, click "Deploy App" at the end of the form
  2. Once the app is deployed, click "Manage App" to go to the dashboard
  3. Scroll down to the Domains section in the settings to find the URL you will use in place of readme-typing-svg.demolab.com

🤗 Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request if you have a way to improve this project.

Make sure your request is meaningful and you have tested the app locally before submitting a pull request.

Refer to CONTRIBUTING.md for more details on contributing, installing requirements, and running the application.

🙋‍♂️ Support

💙 If you like this project, give it a ⭐ and share it with friends!

Youtube Sponsor with Github

☕ Buy me a coffee


Made with ❤️ and PHP

Powered by Heroku

This project uses Twemoji, published under the CC-BY 4.0 License