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.

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

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!

Feel free to open a PR 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.

📤 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

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

---

Made with ❤️ and PHP

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

readme-typing-svg's Issues

Option: do not reset while in multiline mode

I really like the multiline mode,
it would be nice if could have it not reset, or atleast choose a different timeout after the last line . . .

thanks and have a good one :)

Replace Demo Site screenshot with animated GIF

Currently there is just a screenshot of the demo site on the readme.

An animated GIF of the usage of the demo site would improve the documentation.

Possible tools for GIF creation: https://github.com/phw/peek, https://www.cockos.com/licecap/, https://www.screentogif.com/

Example demo gifs: Streak stats demo, Unicode formatter demo

Return proper HTTP response codes for errors

Currently all responses return 200 (unless there is a server error, in which case 500).

It would be best to have specific codes for different types of errors to differentiate between them.

Example:

400 - Bad request

etc.

Drag Lines to reorder them

Love this project!
would be really nice if i could easily, drag and drop, the lines around to change their order
currently im copy/pasting/deleting etc.

thanks and have a good one! :)

Animated text not correctly displaying

Describe the bug

The given lines are lines=Type+messages+everywhere!;Add+a+bio+to+your+profile!;Add+a+description+to+your+repo!;Make+your+readme+stand+out! and yet the third line is animated as dd+a+description+to+your+repo! with the missing A

Have a look at the Readme of this Repo: https://github.com/DenverCoder1/readme-typing-svg
or see it directly by visiting the link that I posted below, or the gif and the end of this bug report.

To Reproduce

Visit https://readme-typing-svg.herokuapp.com/?lines=Type+messages+everywhere!;Add+a+bio+to+your+profile!;Add+a+description+to+your+repo!;Make+your+readme+stand+out!&center=true&width=360&height=50%22 which is exactly the link that is currently on top of this repo's readme

Expected behavior

The third line should not be missing the A at the start

Screenshots

Add a favicon

The demo site is currently missing a favicon.

A custom icon could be designed or a fitting free icon could be used. Twemoji is 100% free for use, so an emoji can be taken from there.

[DOCS] Use issue forms instead of issue templates

Is your feature request related to a problem? Please describe.

We can convert the current issue templates to issue forms, which have more variety of options
and also have required fields, dropdowns, and so much more.

Describe the solution you'd like

Convert the issue templates to issue forms.

Describe alternatives you've considered

Keep the current templates, but improve them.

Additional context

None.

Line Break Without the Pause

Hi,

is there a way to have a Linebreak in the text without the Pause time being applied. I would only like the pause to happen after the complete Text has been rendered.

[FEAT] Add Scrolling Effect to large Text!

Is your feature request related to a problem? Please describe.
When the Sentence is very long and the min-width is not set to a very long width to match, and the text is centre, it will cut off.

Describe the solution you'd like
Text should be able to overflow, sort of like a marquee scroll, that way one can retain the min-width to be smaller, without compromising the visibility of the text! So the text that has been rendered can be pushed back and new text is visible!

Describe alternatives you've considered
Making the width larger.
Additional context
Add any other context or screenshots about the feature request here.

SVG does not display in Safari

Describe the bug
The SVG appears empty when loaded in a Safari browser

Desktop (please complete the following information):

• OS: Mac
• Browser: Safari
• Version 15.1 (17612.2.9.1.20)

Remove table of contents

It is auto generated by GitHub

Use Google Fonts' "text" parameter to limit the font characters to fetch

The text images are excessively large since all characters in the font are loaded. By including a text url parameter, detailing what characters are used, the google font can be scaled down in size significantly.

For example, https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&text=fo will only deliver the f and o characters, which can spell out foo, but not bar nor Foo.
It'd be neat if this was automated on the back-end of course.

It should be noted that I managed to reduce the file size of my readme-typing from 150kb to 5kb.

Improve Contribution guidelines

The CONTRIBUTING.md file doesn't mentions the steps how to contribute (Clone, Fork, Create a Branch etc etc).
It mentions the project's local installation and setup but doesn't mentions the instructions of how to contribute.

I wish to add a detailed workflow of the steps to contribute.
It will help the beginners, reduce the chances of errors, enhance the documentation and help to manage the open-source project more efficiently.

git.io is ready to be deprecated

the url is still using https://git.io/typing-svg, and the git.io is ready to be deprecated

see here

Add a demo site to make it easier to generate links

A simple demo site (similar to the Streak Stats demo site) would be helpful to make it so that users can more easily generate typing SVGs.

Parts of the source code for the "streak stats" site can be used as a starting point.

Basically it would need fields for adjusting the height and width, choosing a font color, font family, and font size, a selection of true or false for whether to center the text, and of course, fields for entering the lines of text to display.

The adding of semicolons and the url encoding should be done in the code so that the user can type text normally.

There should not be a fixed limit on the number of lines (the user should be able to add as many or as few as they want)

README.md needs URL Title Attributes for SEO

Is your feature request related to a problem? Please describe.
README.md needs URL title attributes for best SEO practices.

Describe the solution you'd like
Each profile link should have the URL counterpart attribute called title. However, in Markdown, this is commonly just represented as follows:

[LINK-NAME](LINK-URL "LINK-TITLE-ATTRIBUTE")

Example usage:

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

Displays as:

I believe this Markdown attribute should be added to all Profile links for better SEO. When you hover over with your cursor, you will see the title text appear. However, this is much better for search engines and correct linking for best SEO practices.

Describe alternatives you've considered
Leaving it alone.

Additional context
Would also need to consider changing the default text in the Issue #21 to reflect the need to add the Title attribute as exampled above.

Add ability to include a 'pause' at the end of a typed line before the next line begins

is your feature request related to a problem? Please describe.

There currently isn't a way to pause the animation once it has finished typing. The motivation is that I want users to be able to read the typed sentence for a couple of seconds before the next line kicks off. I've gotten comments from nearly everyone who has reviewed my portfolio that they wish there was more time before the next line types.

The current implementation quickly goes to the next line after the current line has finished typing.

Describe the solution you'd like

I would like the animation to stop at the end of the line for a specified time. After that time has passed, the next line begins.

Describe alternatives you've considered

I tried adding lots of spaces at the end of the line, but that doesn't appear to lengthen the time the line is on screen.

The duration property isn't what I am looking for because that slows down the whole animation instead of adding a pause at the end of the line.

Automate linting with prettier workflow

Add a Prettier workflow similar to the one in GitHub-readme-streak stats to format code or show lint errors on pull requests and push.

Example code here (may require some changes): https://github.com/DenverCoder1/github-readme-streak-stats/pull/311/files

Add your profile or repository to the README

Thanks to @warengonzaga for the idea of putting example usages in the README.

There is now an 🚀 Example usage section in the README for profiles and repositories that have unique usages of Typing SVGs.

If you have a particularly cool way of using Typing SVGs on your profile, show it off by leaving a link to your profile in the README.

This issue is beginner friendly, if you have any questions, don't hesitate to ask.

Steps to open a PR

Using GitHub website

1. Click the pencil above the README to fork the repo and start editing
   
2. Add a line at the bottom of the list with your name and a link to your profile in the same format as the other examples
3. Add a message and create a new branch describing your changes
   
4. Click "Propose Changes"
5. Replace the PR description with "Added example to README" and then click "Create pull request"
6. You're done! Wait for your pull request to be reviewed.

Using GitHub CLI

1. Fork the repo by clicking the button in the top-right or by running

gh repo fork DenverCoder1/readme-typing-svg

2. Clone your fork to your computer (if you did not do so by running gh repo fork)

git clone https://github.com/<YOUR USERNAME>/readme-typing-svg.git
cd readme-typing-svg

3. Create a new branch and switch to it

git checkout -b added-<YOUR USERNAME>-to-readme

4. Open README.md in a code editor and add a line at the bottom of the list with your name and a link to your profile in the same format as the other examples
5. Stage, commit, and push your changes

git add .
git commit -m "Added <YOUR USERNAME> to readme"
git push origin main

6. View your fork on GitHub and you should see an option to compare and pull request.
7. Compare your branch with DenverCoder1:main and start creating a Pull Request
8. Replace the PR description with "Added example to README" and then click "Create pull request"
9. You're done! Wait for your pull request to be reviewed.

center horizontal text not working

Describe the bug

(https://readme-typing-svg.herokuapp.com?center=true&lines=Welcome+to+Arief+Hidayat+Profile👋;Android+and+Mobile+Game+Developer)]

Option not to erase/rewrite text

Is your feature request related to a problem? Please describe.

Currently, once the text is written, it's then erased and rewritten over and over.

Describe the solution you'd like

I'd love an option for it to write the text once and for the text to just stay written.

Additional context

This is so cool, thanks for making this!

Remove examples that no longer have typing SVG

Profiles from @Evavic44 and @krishdevdb no longer have typing SVGs.

Possible solutions:

• users add back typing svgs to their readmes
• the link is changed to a link that references the readme at a point in time there was a typing svg
• the link to the user's readme is removed

Since we want the examples section to be for providing example usage of Readme typing SVGs, the above mentioned users should let me know which of solutions they prefer. If I don't get a response within a week, the links will be removed.

Heroku alternative needed

No free plans available in heroku

A brief description of the question or issue: Since heroku is providing no free plans, heroku alternative needed.

Control vertical alignment separately from horizontal alignment

Is your feature request related to a problem? Please describe.

As already discussed in #24 I want to control vertical alignment of the generated text separately from the horizontal alignment.

Currently we have dominant-baseline="middle" when center is set to "true" and dominant-baseline="auto" when its not.
Meaning the text is vertically top aligned by default and when center=true the text is both vertically and horizontally centered

Describe the solution you'd like

Expose dominant-baseline as a query param and control it like valign=top or valign=center

Describe alternatives you've considered

Currently there are no alternatives to controlling the vertical alignment

Potential XSS vulnerability

Describe the bug
XSS vulnerability via the “lines” argument.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://readme-typing-svg.herokuapp.com/?lines=First+line+of+text;Second+line+of+%3C/textPath%3E%3C/text%3E%3Cscript%3Ealert(%22xss?%22)%3C/script%3E%3Ctext%3E%3CtextPath%3E

Expected behavior
Image should fail to load or load without an alert box.

Screenshots
N/A

Desktop (please complete the following information):

• OS: Tested in iOS and Win10
• Browser: Chrome
• Version: 87/88

Smartphone (please complete the following information):

• Device: iPhone 12
• OS: iOS 14.4.2
• Browser: Chrome
• Version: 87

Additional context
As discussed on discord, this is probably a minimal issue due to other protections. But if someone incorporates the code as a library, then they could be at risk.

Improve contrast of links in dark mode

Improcing contrast for links in dark mode for the website.

Delay in new line when `Horizontally Centered` is true

Describe the bug
There is a noticeable delay in new lines when Horizontally Centered is set to true AND width of the line is less than width of the svg

To Reproduce
Steps to reproduce the behavior:

1. Go to https://readme-typing-svg.herokuapp.com/demo/
2. Add lines There is no problem in this line as it is long., But this takes, time to appear :(
3. Set Horizontally Centered to true
4. See error

Expected behavior
No delay in occurrence of new line is expected

Screenshots

Readme.Typing.SVG.mp4

Desktop (please complete the following information):

• OS: Linux(Pop!_OS)
• Browser: Firefox
• Version: v93

Add a background color parameter

Allow changing the background color of the SVG with a URL parameter.

Google Font Error

Describe the bug
A clear and concise description of what the bug is.

I tried to deploy the app in my Heroku account. It works fine but when every I change new font I'am getting some error in the output.
To Reproduce
Steps to reproduce the behavior:

1. Go to My deployed domain
2. Change the font to QuickSand or any other font.
3. See error

Expected behavior
A clear and concise description of what you expected to happen.

I wanted my deployment link to work like the original one

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Mac
• Browser Safari
• Version 12.2.1

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Demo site - dark mode set on user preference

Use window.matchMedia("(prefers-color-scheme: dark)") to determine dark mode preference.

This issue is assigned.

[FEATURE] Allow inserting output format to be rendered

Is your feature request related to a problem? Please describe.

Currently, you can only convert from the output you want to Markdown or other formats.
However, there's no way to load a Markdown link and render it in the output (on the demo page).

Describe the solution you'd like

Add a way to insert the output format to be rendered.

Describe alternatives you've considered

None.

Additional context

None.

打开table相关页面报错

`%2B` in text should be displayed as a `+`, but instead it does not appear

Scaleup

Not really sure if this is a relevant scope,
But it would be nice if there was an option for OAuth, So that i could have a place for all my differently generated svgs
this will also allow the option to use a personal api so i can integrate and change when i desire

I hope you get what i mean
This could be super cool, you essentially turn a static page into a pseudo dynamic one, not necessarily with realtime updates, but still great for simple and powerful content management .
lemme know if this is interesting and or relevant , i'm starting to realize that these requirements are becoming easier and easier to deploy so maybe it's not a big stretch

Thanks and have a good one !

Spaces in new lines not working

Describe the bug
Spaces in new line don't appear to be working. I tried with +++ and %20, no go.

To Reproduce

[![Typing SVG](https://readme-typing-svg.herokuapp.com?font=roboto&color=%234B5862&vCenter=true&multiline=true&width=600&height=125&lines=resource+%22infrastructure_as_code%22+%22developer%22+%7B;+++name+%3D+%22My+Name%22;+++location+%3D+%22Maine%22;%7D)](https://git.io/typing-svg)

Expected behavior
Line 2 and 3 indented three spaces.

Ability to get a permalink with pre-filled fields on the demo site

Similar to https://streak-stats.demolab.com/ (Open Permalink button)

Information

Description
I'm in new User And I Want Know More About Coder Is There Any One To Help ?
A brief description of the question or issue:

Am i the first to suggest random order ?

it would be nice if there was a boolean for whether the list show be displayed in order, or in random order.

thanks a lot!

Horizontal centering does not work

Description:

Horizontal centering (center=true) does not seem to work -- I have not tried committing the changes but in preview it does not get horizontally centered. Does the preview not show correctly or does it just not work?

Thank you!

Code:

[![Typing SVG](https://readme-typing-svg.herokuapp.com?font=Roboto&color=031C80&center=true&vCenter=false&width=400&height=50&lines=The+five+boxing+wizards+jump+quickly;How+vexingly+quick+daft+zebras+jump)](https://git.io/typing-svg)

Blinking cursor

I think it's self explanatory, an option for a blinking cursor would be neat. Not something big and game changing, but I imagine it to be quite cool; Similar to the old school Terminal emulator block-cursor.

Maybe even an option for a smooth blink instead of a binary on-off-blink?

[FEATURE] Add GitHub links in the website

Is your feature request related to a problem? Please describe.

By adding links to the repository, the owner, and other information on the website, it'll make it easier for other users to find your repository in case they find the website first.

Describe the solution you'd like

Add GitHub links to the website and other important links.

Additional context

None.

Need a RESET button

After filling out the online app with names of Google Fonts, if we decide to go with the default one, there is no way to go back to it if the user does not remember the settings (font name, size etc.)

This can be easily solved by having a RESET button on the app that would clear the values present in the app and go back to the default values.

Support for text containing semicolons

Currently it isn't possible, as far as I know, to use semicolons in the lines parameter as text since it will be always be treated as a line separator.

Current workarounds include using a Greek Question Mark ; in place of the semicolon in your text.

Possible ideas for solutions

Option 1: Allow specifying the separator character as another parameter (eg. &sep=|) to change which character is used for separation and allowing semicolons. On the demo site this can be hidden from the user and just use ; if no semicolons are used in the text, and something else if there are (Possibly the separator could become ;; if ; appears in the text, ;;; if ;; appears in the text, etc. to allow for infinitely many possible separators depending on the text.)

Option 2: Allow a way of "escaping" semicolons (eg. \;) in the text which should get treated as text on the backend instead of as a separator. (Note may be a breaking change since it changes the way a line ending with a backslash is parsed.)

Option 3: Automatically convert semicolons in the text on the demo site to Greek Question Marks instead of making a backend solution. (This is not ideal since it doesn't provide an easy solution for those not using the demo site.)

I think Option 1 would be the cleanest solution, I am open to other ideas if anyone has input on the subject.

Ability to set the width of each line individually

Currently the width and duration of each line is the same for every line of the svg, this causes a long pause after short lines and a short pause after long lines.

If the width of each line could be entered, short lines could be finished earlier without having the long pause.

Prevent from keeping cached version of image for too long

If there are improvements made to the repo, old cards won't get the update since GitHub will keep the cached version of the card and not fetch a new version for a while.

In the code, it's possible to set the image to expire after a certain amount of time, so when there are new changes, the update will appear on all cards within a shorter amount of time.

Example code:

// set cache to refresh once per day
$timestamp = gmdate("D, d M Y 23:59:00") . " GMT";
header("Expires: $timestamp");
header("Last-Modified: $timestamp");
header("Pragma: no-cache");
header("Cache-Control: no-cache, must-revalidate");

This or something similar can be placed in the index.php below where it sets the content type.

Make use of All Contributors to list contributors

I think, it would be nice to list all contributors in the Readme, with their emoji key and profile picture using All Contributors.
https://allcontributors.org/docs/en/overview

Font-weight support for Google Fonts

Feature request

It would be nice to also be able to specify the font-weight

Idea

Add a new field below "Font size" on https://readme-typing-svg.demolab.com/demo/ to be able to specify font-weight, as there are many different options in Google Fonts.

Trailing ";" in line parameter causes empty line to be animated

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Actually I can show you the bug in here
First I'll show you how ![](https://readme-typing-svg.herokuapp.com/?lines=First+line;Second+line) looks:

Normal right? Yes.

Now ![](https://readme-typing-svg.herokuapp.com/?lines=First+line;Second+line;) (notice the trailing ";" in the line query param:

Watch how first "First line" appears, then "Second line" appears and then a big pause before it starts a new?
The issue is obviously the trailing ";" that creates an empty line at the very end to be animated.

Expected behavior
I think that's debatable but I would argue, since it is not hard to remove a trailing ";" the expected result is no big pause before it repeats itself, EVEN IF the url contains an accidental trailing ";"

This bug is tiny but imo it would be a slight improvement to user friendliness when fixed. Let me know, your opinion on this topic.
If you agree, I would be open to fixing this issue myself, in order to play a little with php (I the web I only worked with js for the last 4 years, no php, no jquery)

Add speed parameter

Allow changing the animation duration with a URL parameter.

Currently, the speed is always the same (4 seconds to type and 1 second to delete) regardless of how wide the image output is.

For an image that's not very wide, this is extremely slow.

A url parameter, for example duration, which takes a number in seconds and scales the animation to that length would be useful in this case.

Alternatively, we could make speed be a parameter and have the duration calculated from speed with an inverse function (eg. 50 / $speed or something similar) - see comment.

If speed is used, the width of the SVG can also be taken into account so that it is a consistent speed for any size (see comment). If duration is used, this is not an issue.

Change color picker to use hex (6 digits) instead of hexa (8 digits)

Although, readme typing svgs does support transparent text, since it is not a very common use case, the demo site can be changed to only allow picking opaque colors to declutter the interface.

Instead of showing 8 characters (including transparency) and two sliders, it could just show 6 digits and one slider.