Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/MagicLike/readme-typing-svg

⚡ Dynamically generated, customizable SVG that gives the appearance of typing and deleting text. Typing SVGs can be used as a bio on your Github profile readme or repository.
https://github.com/MagicLike/readme-typing-svg

Last synced: about 2 months ago
JSON representation

⚡ Dynamically generated, customizable SVG that gives the appearance of typing and deleting text. Typing SVGs can be used as a bio on your Github profile readme or repository.

Host: GitHub
URL: https://github.com/MagicLike/readme-typing-svg
Owner: MagicLike
License: mit
Fork: true (DenverCoder1/readme-typing-svg)
Created: 2022-01-13T17:00:20.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2023-03-29T17:54:35.000Z (over 1 year ago)
Last Synced: 2024-07-10T08:43:30.660Z (3 months ago)
Language: PHP
Homepage: https://readme-typing-svg.herokuapp.com
Size: 529 KB
Stars: 2
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        


  
⌨️ 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.

```md

[![Typing SVG](https://readme-typing-svg.demolab.com/?lines=First+line+of+text;Second+line+of+text)](https://git.io/typing-svg)

```

4. Star the repo 😄

## ⚙ Demo site

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

[![Demo Site](https://user-images.githubusercontent.com/20955511/183703055-42ec8754-d84c-414f-8132-a02974224aa1.gif "Demo Site")](https://readme-typing-svg.demolab.com/demo/)

## 🚀 Example usage

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

[![Jonah Lawrence](https://github.com/DenverCoder1.png?size=60)](https://github.com/DenverCoder1)

[![Waren Gonzaga](https://github.com/warengonzaga.png?size=60)](https://github.com/warengonzaga)

[![Eke Victor](https://github.com/Evavic44.png?size=60)](https://github.com/Evavic44)

[![8BitJonny](https://github.com/8BitJonny.png?size=60)](https://github.com/8BitJonny)

[![Aditya Raute](https://github.com/adityaraute.png?size=60)](https://github.com/adityaraute)

[![Shiva Sankeerth Reddy](https://github.com/ShivaSankeerth.png?size=60)](https://github.com/ShivaSankeerth)

[![Tarun Kamboj](https://github.com/Tarun-Kamboj.png?size=60)](https://github.com/Tarun-Kamboj)

[![T.A.Vignesh](https://github.com/tavignesh.png?size=60)](https://github.com/tavignesh)

[![Angelo Fallaria](https://github.com/angelofallars.png?size=60)](https://github.com/angelofallars)

[![William J. Ghelfi](https://github.com/trumbitta.png?size=60)](https://github.com/trumbitta)

[![Shivam Yadav](https://github.com/sudoshivam.png?size=60)](https://github.com/sudoshivam)

[![Pratik Pingale](https://github.com/PROxZIMA.png?size=60)](https://github.com/PROxZIMA)

[![Vydr'Oz](https://github.com/VydrOz.png?size=60)](https://github.com/VydrOz)

[![Caroline Heloíse](https://github.com/Carol42.png?size=60)](https://github.com/Carol42)

[![PriyanshK09](https://github.com/PriyanshK09.png?size=60)](https://github.com/PriyanshK09)

[![BenjaminMichaelis](https://github.com/BenjaminMichaelis.png?size=60)](https://github.com/BenjaminMichaelis)

[![Thakur Ballary](https://github.com/thakurballary.png?size=60)](https://github.com/thakurballary)

[![NiceSapien](https://github.com/nicesapien.png?size=60)](https://github.com/nicesapien)

[![Manthan Ank](https://github.com/manthanank.png?size=60)](https://github.com/manthanank)

[![Ronny Coste](https://github.com/lertsoft.png?size=60)](https://github.com/lertsoft)

[![Vishal Beep](https://github.com/vishal-beep136.png?size=60)](https://github.com/Vishal-beep136)

[![Raihan Khan](https://github.com/raihankhan.png?size=60)](https://github.com/raihankhan)

[![wiz64](https://github.com/wiz64.png?size=60)](https://github.com/wiz64)

[![Aquarian Blake](https://github.com/Aquarius-blake.png?size=60)](https://github.com/Aquarius-blake)

[![D3vil0p3r](https://github.com/D3vil0p3r.png?size=60)](https://github.com/D3vil0p3r)

[![EliusHHimel](https://github.com/EliusHHimel.png?size=60)](https://github.com/EliusHHimel)

[![jcs090218](https://github.com/jcs090218.png?size=60)](https://github.com/jcs090218)

[![Rishabh2804](https://github.com/Rishabh2804.png?size=60)](https://github.com/Rishabh2804)

[![shalinibhatt](https://github.com/shalinibhatt.png?size=60)](https://github.com/shalinibhatt)

[![UlisesAlexanderAM](https://github.com/UlisesAlexanderAM.png?size=60)](https://github.com/UlisesAlexanderAM)

[![SpookyJelly](https://github.com/SpookyJelly.png?size=60)](https://github.com/SpookyJelly)

[![yousafesaeed](https://github.com/yousafesaeed.png?size=60)](https://github.com/yousafesaeed)

[![cfcife](https://github.com/cfcife.png?size=60)](https://github.com/cfcife)

[![majidtdeni666](https://github.com/majidtdeni666.png?size=60)](https://github.com/majidtdeni666)

[![GalexY727](https://github.com/galexy727.png?size=60)](https://github.com/galexy727)

[![HectorSaldes](https://github.com/HectorSaldes.png?size=60)](https://github.com/HectorSaldes)

[![Ash-codes18](https://github.com/Ash-codes18.png?size=60)](https://github.com/Ash-codes18)

[![Maagnitude](https://github.com/Maagnitude.png?size=60)](https://github.com/Maagnitude)

[![cracker911181](https://github.com/cracker911181.png?size=60)](https://github.com/cracker911181)

[![quiet-node](https://github.com/quiet-node.png?size=60)](https://github.com/quiet-node)

[![ProfCyberNaught](https://github.com/ProfCyberNaught.png?size=60)](https://github.com/ProfCyberNaught)

Feel free to [open a PR](https://github.com/DenverCoder1/readme-typing-svg/issues/21#issue-870549556) and add yours!

## 🔧 Options

|  Parameter   |                                   Details                                   |  Type   |               Example               |

| :----------: | :-------------------------------------------------------------------------: | :-----: | :---------------------------------: |

|   `lines`    |       Text to display with lines separated by `;` and `+` for spaces        | string  | `First+line;Second+line;Third+line` |

|   `height`   |             Height of the output SVG in pixels (default: `50`)              | integer |         Any positive number         |

|   `width`    |             Width of the output SVG in pixels (default: `400`)              | integer |         Any positive number         |

|    `size`    |                     Font size in pixels (default: `20`)                     | integer |         Any positive number         |

|    `font`    |                     Font family (default: `monospace`)                      | string  |     Any font from Google Fonts      |

|   `color`    |                    Color of the text (default: `36BCF7`)                    | string  |  Hex code without # (eg. `F724A9`)  |

| `background` |             Background color of the text (default: `00000000`)              | string  |  Hex code without # (eg. `FEFF4C`)  |

|   `center`   |    `true` to center text or `false` for left aligned (default: `false`)     | boolean |          `true` or `false`          |

|  `vCenter`   |  `true` to center vertically or `false`(default) to align above the center  | boolean |          `true` or `false`          |

| `multiline`  |  `true` to wrap lines or `false` to retype on one line (default: `false`)   | boolean |          `true` or `false`          |

|  `duration`  | Duration of the printing of a single line in milliseconds (default: `5000`) | integer |         Any positive number         |

|   `pause`    |     Duration of the pause between lines in milliseconds (default: `0`)      | integer |       Any non-negative number       |

|   `repeat`   |  `true` to loop around to the first line after the last (default: `true`)   | boolean |          `true` or `false`          |

## 📤 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 

2. Click the "Deploy to Heroku" button below

[![Deploy](https://www.herokucdn.com/deploy/button.svg "Deploy to Heroku")](https://heroku.com/deploy?template=https://github.com/DenverCoder1/readme-typing-svg/tree/main)

3. On the page that comes up, click **"Deploy App"** at the end of the form

4. Once the app is deployed, click **"Manage App"** to go to the dashboard

5. 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](/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!



  

  



[☕ Buy me a coffee](https://ko-fi.com/jlawrence)

---

Made with ❤️ and PHP



This project uses [Twemoji](https://github.com/twitter/twemoji), published under the [CC-BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)