base on ⚡ Dynamically generated, customizable SVG that gives the appearance of typing and deleting text for use on your profile page, repositories, or website. <!-- markdownlint-disable MD033 MD041 --> <p align="center"> <h3 align="center">⌨️ Readme Typing SVG</h3> </p> <p align="center"> <img src="https://readme-typing-svg.demolab.com/?lines=Type+messages+everywhere!;Add+a+bio+to+your+profile!;Add+a+description+to+your+repo!;Make+your+readme+stand+out!&font=Fira%20Code&center=true&width=380&height=50&duration=4000&pause=1000" alt="Example Usage - README Typing SVG"> </p> <p align="center"> <a href="https://github.com/search?q=extension%3Amd+%22https+readme+typing+svg%22&type=Code" alt="Users" title="Repo users"> <img src="https://freshidea.com/jonah/app/github-search-results/readme-typing-svg/index.php"/></a> <a href="https://discord.gg/fPrdqh3Zfu" alt="Discord" title="Dev Pro Tips Discussion & Support Server"> <img src="https://img.shields.io/discord/819650821314052106?color=7289DA&logo=discord&logoColor=white&style=for-the-badge"/></a> </p> <!-- markdownlint-enable MD033 --> ## ⚡ 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/> [](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/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/creativepurus "Anand Purushottam 🇮🇳 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/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/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/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") [](https://github.com/suzukimain "suzukimain on Github") [](https://github.com/caesar013 "caesar013 on Github") [](https://github.com/amir78729 "Amir on Github") [](https://github.com/AJsuper007 "AJsuper007 on Github") [](https://github.com/ABAN26 "ABAN26 on Github") [](https://github.com/SohamMore100 "Soham More on GitHub") [](https://github.com/Yobro7292 "Yogi Hariyani on GitHub") [](https://github.com/Ninja1375 "Antônio Nascimento on GitHub") [](https://github.com/TridentifyIshaan "Tridentify Ishaan on GitHub") [](https://github.com/krimmyy "Eligijus Ciza on GitHub") [](https://github.com/Ashish-CodeJourney "Ashish Vaghela on GitHub") [](https://github.com/Snoopy1866 "Snoopy1866 on GitHub") [](https://github.com/SarthakKrishak "Sarthak Krishak on GitHub") [](https://github.com/AustinMusuya "Austin Musuya 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 <https://heroku.com> 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! <!-- markdownlint-disable MD033 --> <p align="left"> <a href="https://www.youtube.com/channel/UCipSxT7a3rn81vGLw9lqRkg?sub_confirmation=1"><img alt="Youtube" title="Youtube" src="https://img.shields.io/badge/-Subscribe-red?style=for-the-badge&logo=youtube&logoColor=white"/></a> <a href="https://github.com/sponsors/DenverCoder1"><img alt="Sponsor with Github" title="Sponsor with Github" src="https://img.shields.io/badge/-Sponsor-ea4aaa?style=for-the-badge&logo=github&logoColor=white"/></a> </p> <!-- markdownlint-enable MD033 --> [☕ Buy me a coffee](https://ko-fi.com/jlawrence) --- Made with ❤️ and PHP <!-- markdownlint-disable MD033 --> <a href="https://heroku.com/"><img alt="Powered by Heroku" title="Powered by Heroku" src="https://img.shields.io/badge/-Powered%20by%20Heroku-6567a5?style=for-the-badge&logo=heroku&logoColor=white"/></a> <!-- markdownlint-enable MD033 --> This project uses [Twemoji](https://github.com/twitter/twemoji), published under the [CC-BY 4.0 License](https://creativecommons.org/licenses/by/4.0/) ", Assign "at most 3 tags" to the expected json: {"id":"1311","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"