/svg-matrix-animate

"`The Matrix` movie-style text animations using SVG and JavaScript.

Primary LanguageJavaScriptMIT LicenseMIT

Matrix Animation SVG

Create an animated "Matrix" movie-style text animation using SVG and JavaScript. Each word appears with characters in a vertical order, and the words move together in sync from the top to the bottom of the screen.

Demo: Matrix Animation Preview

Features

  • Realistic "Matrix" movie-style animation
  • Words appear with characters in a vertical order
  • Words move together in sync from the top to the bottom of the screen
  • Customizable animation duration, font sizes, and word list

Getting Started

  1. Clone the repository:

    git clone https://github.com/krithoonsuwan/svg-matrix-animate.git

  2. Open index.html in a web browser.

Customization

You can customize the animation by modifying the following parameters in the index.html file:

  • WORDS: An array of words to be animated.
  • DEFAULT_WORD_COUNT: Number of word in the animation.
  • MIN_DURATION: Maximum speed of word transitioning.
  • MAX_DURATION: Minimum speed of word transitioning.
  • MIN_FONTSIZE: Min font sizes (in pixels).
  • MAX_FONTSIZE: Max font sizes (in pixels).

Contributing

Contributions are welcome! If you have any ideas, suggestions, or bug fixes, feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for more details.