# Technical Documentation: DenverCoder1/readme-typing-svg > ℹ️ **Provenance:** Multi-Tier Ingestion · [CodeWiki Reference](https://codewiki.google/github.com/DenverCoder1/readme-typing-svg) ### Overview (`README.md`)

⌨️ 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/8BitJonny "8BitJonny on GitHub") [](https://github.com/adityaraute "Aditya Raute on GitHub") [](https://github.com/ShivaSankeerth "Shiva Sankeerth Reddy 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/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/kaustubh43 "kaustubh43 on GitHub") [](https://github.com/kaisunoo "kaisunoo 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/Freddywhest "Alfred Nti on GitHub") [](https://github.com/Shiro-cha "Shiro Yukami 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/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/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/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/Ashish-CodeJourney "Ashish Vaghela on GitHub") [](https://github.com/AustinMusuya "Austin Musuya on GitHub") [](https://github.com/EngineerRohit01 "Rohit on GitHub") [](https://github.com/saadhusayn "Saad Hussain on Github") [](https://github.com/Theglassofdata "Rahul Raj") [](https://github.com/Harry-Skerritt "Harry-Skerritt on Github") [](https://github.com/AhmedNassar7 "Ahmed Nassar on Github") [](https://github.com/pascalwetzel "Pascal Wetzel on Github") [](https://github.com/tommysvs "Tommy Vega on Github") [](https://github.com/fahadelahikhan "Fahad Elahi Khan on Github") [](https://github.com/scythe410 "Ramiru De Silva on Github") [](https://github.com/kelvinhe04 "kelvinhe04 on Github") [](https://github.com/RaviAshray15 "Ravi Ashray on GitHub") [](https://github.com/yuvraj0412s "Yuvraj Singh on GitHub") [](https://github.com/GabrielaSchmitt "Gabriela Schmitt on Github") [](https://github.com/rouri404 "Gabriel Couto on Github") [](https://github.com/adepegba1 "Adepegba David on Github") [](https://github.com/OmarAfifi-CSE "Omar Afifi on Github") [](https://github.com/rundowntown "Daniel Forcade on Github") [](https://github.com/ok-coder1 "okcoder1 on Github") [](https://github.com/jjbajor "John Bajor on Github") [](https://github.com/ErMichele "ErMichele on Github") [](https://github.com/hiyaamalik "Hiyaa Malik") [](https://github.com/PiyushYadav0021 "Piyush Yadav on GitHub") [](https://github.com/MKstarFromSwitch "MKstarFromSwitch on Github") [](https://github.com/Developer-Parth "Parth Thukral on GitHub") [](https://github.com/angcyo "angcyo on Github") [](https://github.com/Robinishear "MR. Robin Ahmed on GitHub") [](https://github.com/da093-tech "Daniel Allendes — Full Stack Developer on Github") [](https://github.com/bravo-phantom "Bravo Phantom on GitHub") [](https://github.com/iamsainikhil "Sainikhil on GitHub") [](https://github.com/MussabPro "Mussab on Github") [](https://github.com/Zakii360 "Zakii360 on Github") [](https://github.com/arpanwave "arpanwave on GitHub") [](https://github.com/infinuts "infinuts 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` | | `groups` | Group lines so each group types sequentially then clears together. Sizes must sum to the number of non-empty lines (default: `none`) | string | `2,1` (first 2 lines as group 1, next 1 as group 2) | | `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/) --- ### Faq (`docs/faq.md`) # FAQ ## How do I include Readme Typing SVG in my Readme? Markdown files on GitHub support embedded images using Markdown or HTML. You can customize your SVG on the [demo site](https://readme-typing-svg.demolab.com/demo/) and use the image source in either of the following ways: ### Markdown ```md [](https://git.io/typing-svg) ``` ### HTML ```html

``` ## The text is getting cut off at the end, how do I fix it? The text rendered within the SVG can be any variable width, therefore you must specify the width manually to ensure the text will fit. The `width` parameter in the URL should be increased such that the full width of the text is displayed properly. ```md https://readme-typing-svg.demolab.com/?lines=Your+Long+Message+With+A+Long+Width&width=460 ``` ## How do I center the image on the page? To center align images, you must use the HTML syntax and wrap it in an element with the HTML attribute `align="center"`. ```html

``` ## How do I add multiple spaces in the middle of a line? Similar to HTML, SVG/XML treats multiple consecutive spaces as a single space. A workaround for adding extra spaces can be to use other whitespace characters (for example, you can copy-paste the en-space or other unusual spaces from https://qwerty.dev/whitespace). The alternate whitespace characters don't get ignored. ## How do I make different SVGs for dark mode and light mode? As of May 2022, you can now [specify theme context](https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/) using the `