{"id":31020274,"url":"https://github.com/whiteshadow1234/typingsvg","last_synced_at":"2025-09-13T10:27:13.358Z","repository":{"id":311884811,"uuid":"1045443682","full_name":"whiteSHADOW1234/TypingSVG","owner":"whiteSHADOW1234","description":"Different Dynamic Typing SVG Generator—multi-line \u0026 blank-space formatting, multiple cursor styles, customizable delete speed, and more.","archived":false,"fork":false,"pushed_at":"2025-09-11T19:08:42.000Z","size":75488,"stargazers_count":26,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-11T22:10:31.762Z","etag":null,"topics":["cursor","dynamic","multi-line","profile","readme","svg","typing","typing-svg"],"latest_commit_sha":null,"homepage":"https://typingsvg.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/whiteSHADOW1234.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-27T07:17:40.000Z","updated_at":"2025-09-11T19:08:46.000Z","dependencies_parsed_at":"2025-08-27T16:46:24.144Z","dependency_job_id":null,"html_url":"https://github.com/whiteSHADOW1234/TypingSVG","commit_stats":null,"previous_names":["whiteshadow1234/typingsvg"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/whiteSHADOW1234/TypingSVG","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whiteSHADOW1234%2FTypingSVG","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whiteSHADOW1234%2FTypingSVG/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whiteSHADOW1234%2FTypingSVG/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whiteSHADOW1234%2FTypingSVG/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/whiteSHADOW1234","download_url":"https://codeload.github.com/whiteSHADOW1234/TypingSVG/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whiteSHADOW1234%2FTypingSVG/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274949325,"owners_count":25379446,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-13T02:00:10.085Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cursor","dynamic","multi-line","profile","readme","svg","typing","typing-svg"],"created_at":"2025-09-13T10:27:12.585Z","updated_at":"2025-09-13T10:27:13.341Z","avatar_url":"https://github.com/whiteSHADOW1234.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp  align=\"center\"\u003e\n  \u003ch3 align=\"center\"\u003eTyping SVG\u003c/h3\u003e\n\u003c/p\u003e\n  \n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"typing-svg.svg\" alt=\"TypingSVG-quote\" style=\"display: block; margin: 0 auto;\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://nextjs.org/\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/Next.js-000000?style=for-the-badge\u0026logo=next.js\u0026logoColor=white\" alt=\"Next.js\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://reactjs.org/\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\" alt=\"React\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.typescriptlang.org/\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\" alt=\"TypeScript\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://tailwindcss.com/\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white\" alt=\"Tailwind CSS\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\u003c/div\u003e\n\n## Features\n\nThere are other typing SVG projects out there — but this one takes it further:\n\n- **Multi-line Customization**: Customize every line individually.\n- **Multi-line input**: Write multiple lines, not just one.  \n- **True text formatting**: Supports multiple spaces, line breaks, and precise alignment.  \n- **Flexible deletion**: Customize `deleteSpeed` and decide whether text should erase or not. \n- **More cursor styles**: Straight, underline, block, or even blank.  \n- **Fine-grained control**: Letter spacing, pause duration, repeat toggle, borders, and more.  \n\nIn short: **more customization, more control, and more creativity** 🎨.\n\n\n## Live Demo \u0026 Preview\n[![Demo](https://github.com/user-attachments/assets/c7633619-3422-4066-9953-4e594ddd7b75)](https://typingsvg.vercel.app/)\nlink: https://typingsvg.vercel.app/\n\n## How to Use\n1. Visit the site: [typingsvg.vercel.app](https://typingsvg.vercel.app/)\n2. Customize your SVG with text, speed, colors, and styles.\n3. Copy the URL or download the file, then use it anywhere (README, profile, blog, etc.).\n4. Star this repo ~ 😄\n\n## Deploy It Yourself\nSince this project is hosted on a free Vercel account, resources are limited. To ensure optimal performance and availability, it's recommended to deploy Typing SVG on your own. Here's how:\n\n1. Sign in or create a Vercel account at [vercel](https://vercel.com/).\n\n2. Click the \"Deploy to Vercel\" button below\n\n    [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FwhiteSHADOW1234%2FTypingSVG)\n\n3. Follow the prompts to deploy the application to your Vercel account.\n\n\n\n## Example Usage\nHere are some examples of how to use this project:\n\n[![whiteSHADOW1234](https://github.com/whiteSHADOW1234.png?size=60)](https://github.com/whiteSHADOW1234 \"whiteSHADOW1234\")\n\n- Feel free to open a pull request and add your own examples!\n\n\n## Options\n\nThe SVG is generated via the `/api/svg` endpoint.  \nCustomize it with query parameters:\n\n| Parameter | Description | Default |\n|---|---|---|\n| `text` | Text to be typed. Use `;` to separate lines. | `Hello, World!;And Emojis! 😀🚀` |\n| `font` | Font family for the text. | `Monaco` |\n| `color` | Text color in hex format (without `#`). | `000000` |\n| `backgroundColor` | Background color in hex format (without `#`). | `ffffff` |\n| `width` | Width of the SVG. | `450` |\n| `height` | Height of the SVG. | `150` |\n| `fontSize` | Font size of the text. | `28` |\n| `typingSpeed` | Typing speed in seconds per character. | `0.5` |\n| `deleteSpeed` | Deletion speed in seconds per character. | `0.5` |\n| `pause` | Pause at the end of animation (ms). | `1000` |\n| `letterSpacing` | Letter spacing in `em`. | `0.1` |\n| `repeat` | Repeat the animation (`true`/`false`). | `true` |\n| `center` | Center text horizontally (`true`/`false`). | `true` |\n| `vCenter` | Center text vertically (`true`/`false`). | `true` |\n| `border` | Show a border (`true`/`false`). | `true` |\n| `cursorStyle` | Cursor style (`straight`, `underline`, `block`, `blank`). | `straight` |\n| `deleteAfter` | Delete text after typing (`true`/`false`). | `true` |\n\n**Example:**  \n```\nhttps://typingsvg.vercel.app/api/svg?text=Hello%2C+World%21\u0026font=Monaco\u0026color=%23000000\u0026width=450\u0026height=150\u0026typingSpeed=0.07\u0026pause=1000\u0026letterSpacing=0.1\u0026repeat=true\u0026backgroundColor=%23ffffff\u0026fontSize=28\u0026center=true\u0026vCenter=true\u0026border=true\u0026cursorStyle=straight\u0026deleteAfter=false\u0026deleteSpeed=0.07\n```\n\n##  Credits \u0026 Inspiration\n\nThis project stems from a deep admiration for [DenverCoder1’s readme-typing-svg](https://github.com/DenverCoder1/readme-typing-svg)\n—a clever, widely embraced tool that brought typing animations to README files. While using it, I encountered several limitations: the lack of genuine multi-line support, a fixed delete speed, and handling blank spaces felt awkward—requiring workarounds that disrupted the creative flow. That frustration sparked the idea for **Typing SVG**—a smoother, more flexible evolution designed to bring back control and clarity to formatting.\n\nA heartfelt, huge thank you to [DenverCoder1](https://github.com/DenverCoder1) for sparking the idea. Typing SVG builds upon that original spark. ❤️\n\n\n\n## Contributing\n\nWe welcome contributions to Typing SVG! Please see our [CONTRIBUTING.md](CONTRIBUTING.md) file for more details on how to get started, report bugs, request features, and submit pull requests.\n\n\n## License\n\nThis project is licensed under the MIT License. See [LICENSE](LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhiteshadow1234%2Ftypingsvg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwhiteshadow1234%2Ftypingsvg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhiteshadow1234%2Ftypingsvg/lists"}