Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/DenverCoder1/readme-typing-svg
⚡ Dynamically generated, customizable SVG that gives the appearance of typing and deleting text for use on your profile page, repositories, or website.
https://github.com/DenverCoder1/readme-typing-svg
animation dynamic github hacktoberfest php profile-readme readme svg typing
Last synced: about 1 month ago
JSON representation
⚡ Dynamically generated, customizable SVG that gives the appearance of typing and deleting text for use on your profile page, repositories, or website.
- Host: GitHub
- URL: https://github.com/DenverCoder1/readme-typing-svg
- Owner: DenverCoder1
- License: mit
- Created: 2021-04-20T04:48:50.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-29T02:34:15.000Z (about 1 month ago)
- Last Synced: 2024-07-29T03:56:30.034Z (about 1 month ago)
- Topics: animation, dynamic, github, hacktoberfest, php, profile-readme, readme, svg, typing
- Language: PHP
- Homepage: https://readme-typing-svg.demolab.com
- Size: 623 KB
- Stars: 5,209
- Watchers: 25
- Forks: 810
- Open Issues: 16
-
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
- awesome-github-profile - Readme Typing SVG - :zap: Dynamically generated, customizable SVG that gives the appearance of typing and deleting text (Tools)
- awesome - DenverCoder1/readme-typing-svg - ⚡ Dynamically generated, customizable SVG that gives the appearance of typing and deleting text for use on your profile page, repositories, or website. (PHP)
- fucking-awesome-github-profile-readme - Readme Typing SVG - :zap: Dynamically generated, customizable SVG that gives the appearance of typing and deleting text (Tools)
- awesome-github-profile-readme - Readme Typing SVG - :zap: Dynamically generated, customizable SVG that gives the appearance of typing and deleting text (Tools)
- awesome-ubc-profile-readme - Readme Typing SVG - :zap: Dynamically generated, customizable SVG that gives the appearance of typing and deleting text (Tools)
- project-awesome - DenverCoder1/readme-typing-svg - ⚡ Dynamically generated, customizable SVG that gives the appearance of typing and deleting text for use on your profile page, repositories, or website. (PHP)
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
[](https://git.io/typing-svg)
```
4. Star the repo 😄
## ⚙ Demo site
Here you can easily customize your Typing SVG with a live preview.
[](https://readme-typing-svg.demolab.com/demo/)
## 🚀 Example usage
Below are links to profiles where you can see Readme Typing SVGs in action!
[](https://github.com/DenverCoder1 "Jonah Lawrence on GitHub")
[](https://jini.rentalz.com/ "Jini by Rentalz.com")
[](https://github.com/warengonzaga "Waren Gonzaga on GitHub")
[](https://github.com/8BitJonny "8BitJonny on GitHub")
[](https://github.com/adityaraute "Aditya Raute on GitHub")
[](https://github.com/ShivaSankeerth "Shiva Sankeerth Reddy on GitHub")
[](https://github.com/Tarun-Kamboj "Tarun Kamboj on GitHub")
[](https://github.com/tavignesh "T.A.Vignesh on GitHub")
[](https://github.com/trumbitta "William J. Ghelfi on GitHub")
[](https://github.com/ManoBharathi93 "Mano Bharathi M on GitHub")
[](https://github.com/sudoshivam "Shivam Yadav on GitHub")
[](https://github.com/PROxZIMA "Pratik Pingale on GitHub")
[](https://github.com/VydrOz "Vydr'Oz on GitHub")
[](https://github.com/Carol42 "Caroline Heloíse on GitHub")
[](https://github.com/PriyanshK09 "PriyanshK09 on GitHub")
[](https://github.com/thakurballary "Thakur Ballary on GitHub")
[](https://github.com/nicesapien "NiceSapien on GitHub")
[](https://github.com/manthanank "Manthan Ank on GitHub")
[](https://github.com/lertsoft "Ronny Coste on GitHub")
[](https://github.com/Vishal-beep136 "Vishal Beep on GitHub")
[](https://github.com/wiz64 "wiz64 on GitHub")
[](https://github.com/Aquarius-blake "Aquarian Blake on GitHub")
[](https://github.com/D3vil0p3r "D3vil0p3r on GitHub")
[](https://github.com/EliusHHimel "EliusHHimel on GitHub")
[](https://github.com/jcs090218 "jcs090218 on GitHub")
[](https://github.com/Rishabh2804 "Rishabh2804 on GitHub")
[](https://github.com/shalinibhatt "shalinibhatt on GitHub")
[](https://github.com/UlisesAlexanderAM "UlisesAlexanderAM on GitHub")
[](https://github.com/SpookyJelly "SpookyJelly on GitHub")
[](https://github.com/cfcife "cfcife on GitHub")
[](https://github.com/majidtdeni666 "majidtdeni666 on GitHub")
[](https://github.com/galexy727 "GalexY727 on GitHub")
[](https://github.com/HectorSaldes "HectorSaldes on GitHub")
[](https://github.com/Ash-codes18 "Ash-codes18 on GitHub")
[](https://github.com/Maagnitude "Maagnitude on GitHub")
[](https://github.com/cracker911181 "cracker911181 on GitHub")
[](https://github.com/quiet-node "quiet-node on GitHub")
[](https://github.com/kaustubh43 "kaustubh43 on GitHub")
[](https://github.com/kaisunoo "kaisunoo on GitHub")
[](https://github.com/meyer-pidiache "Meyer Pidiache on GitHub")
[](https://github.com/jeremiahseun "Jeremiah Erinola on GitHub")
[](https://github.com/creativepuru "Purushottam Anand 🇮🇳 on GitHub ☕")
[](https://github.com/Gchism94 "Greg Chism 🤘 on GitHub")
[](https://github.com/turbomaster95 "turbomaster95 🗿 🇮🇳 on GitHub ☕")
[](https://github.com/K1rsN7 "K1rsN7 on GitHub💪")
[](https://github.com/codesbyahsen "AHSEN ALEE on GitHub")
[](https://github.com/Freddywhest "Alfred Nti on GitHub")
[](https://github.com/Shiro-cha "Shiro Yukami on Github")
[](https://github.com/MohammedAbidNafi "Abid Nafi on Github")
[](https://github.com/Srijan-Baniyal "Srijan Baniyal on Github")
[](https://github.com/BrunoOliveiraS "Bruno Oliveira on Github")
[](https://github.com/zidk "Pablo Gonzalez on Github")
[](https://github.com/tshr-d-dragon "Tushar Patil on Github")
[](https://github.com/v-pun215 "Vihaan Pundir on Github")
[](https://github.com/DeveshYadav13 "Devesh Yadav on Github")
[](https://github.com/HauseMasterZ "HauseMaster on Github")
[](https://github.com/hyskoniho "hyskoniho on Github")
[](https://github.com/elvisisvan "elvisisvan on Github")
[](https://github.com/Nquenan "Nquenan on Github")
[](https://github.com/akhilnev "Akhilesh Nevatia on Github")
[](https://github.com/mannysoft "Manny Isles on Github")
[](https://github.com/LinThitHtwe "LinThitHtwe on Github")
[](https://github.com/Elio-Aliaj "Elio-Aliaj on Github")
[](https://github.com/MehmetBozkir "MehmetBozkir on Github")
[](https://github.com/presentformyfriends "presentformyfriends on Github")
[](https://github.com/Ad7amstein "Ad7amstein on Github")
[](https://github.com/LakshmanKishore "LakshmanKishore on Github")
[](https://github.com/mateusadada "mateusadada on Github")
[](https://github.com/fasakinhenry "fasakinhenry on Github")
[](https://github.com/YousifAbozid "YousifAbozid on Github")
[](https://github.com/SuSheng13T "SuSheng13T on Github")
[](https://github.com/hheinsoee "hheinsoee on Github")
[](https://github.com/lucmsilva651 "lucmsilva651 on Github")
[](https://github.com/ashertenenbaum "ashertenenbaum on Github")
[](https://github.com/0dxplt "0dxplt on Github")
[](https://github.com/HerobrineTV "HerobrineTV on Github")
[](https://github.com/Borketh "Borketh on Github")
[](https://github.com/Callmeproteus "Callmeproteus on GitHub")
[](https://github.com/JotaP07 "JP on GitHub")
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` |
| `separator` | Separator used between lines in the lines parameter (default: `;`) | string | `;`, `;;`, `/`, etc. |
| `letterSpacing` | Letter spacing (default: `normal`) | string | Any css values for the [letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/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
2. Click the "Deploy to Heroku" button below
[](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/)