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

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.

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

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.

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!

Description

remove error message displayed on browser

Type of change

• [x] Bug fix (added a non-breaking change which fixes an issue)

How Has This Been Tested?

• [x] Ran tests with composer test

Checklist:

• [x] I have checked to make sure no other pull requests are open for this issue
• [x] The code is properly formatted and is consistent with the existing code style
• [x] My changes generate no new warnings

Description

Replaced demo screenshot with animated gif

Fixes # #14

Type of change

Update

• [x] Updated documentation (updated the readme, templates, or other repo files)

How Has This Been Tested?

Checklist:

• [x] The code is properly formatted and is consistent with the existing code style
• [x] I have checked to make sure no other pull requests are open for this issue
• [x] I have commented my code, particularly in hard-to-understand areas
• [x] I have made corresponding changes to the documentation
• [x] My changes generate no new warnings

Screenshots

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.

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.

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)

Description

Added a speed variable to control the speed of "typing". On demo it is called "Print Speed" as shown in the screenshot. Default value is 10 which is equivalent to the previous static value of 5 seconds.

Fixes #12

Type of change

• [ ] Bug fix (added a non-breaking change which fixes an issue)
• [x] New feature (added a non-breaking change which adds functionality)
• [ ] Updated documentation (updated the readme, templates, or other repo files)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

How Has This Been Tested?

Spent half an hour trying to set up composer on linux and windows and didn't get it working. So manually tested with live deployment here on Heroku

• [ ] Ran tests with composer test
• [x] Added or updated test cases to test new features

Checklist:

• [x] I have checked to make sure no other pull requests are open for this issue
• [x] The code is properly formatted and is consistent with the existing code style
• [x] I have commented my code, particularly in hard-to-understand areas
• [x] I have made corresponding changes to the documentation
• [x] My changes generate no new warnings

Screenshots

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

https://user-images.githubusercontent.com/43103163/138579361-baf148ea-077a-4ded-8004-efe9c4fb42d3.mp4

Desktop (please complete the following information):

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

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 !

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! :)

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

also also, it would be a real nice ux bonus if the lines i've already entered could be dragged around above and below each other to easily change the order

thanks a lot!

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.

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