{"id":13808801,"url":"https://github.com/akzhy/Vara","last_synced_at":"2025-05-14T03:31:30.678Z","repository":{"id":34031792,"uuid":"165075644","full_name":"akzhy/Vara","owner":"akzhy","description":"Vara is a javascript library that can create text drawing animations","archived":false,"fork":false,"pushed_at":"2024-08-03T08:49:01.000Z","size":2269,"stargazers_count":239,"open_issues_count":16,"forks_count":40,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-13T06:52:33.357Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://vara.akzhy.com","language":"JavaScript","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/akzhy.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":"akzhy_","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-01-10T14:38:40.000Z","updated_at":"2024-11-10T19:16:07.000Z","dependencies_parsed_at":"2024-01-08T07:57:06.804Z","dependency_job_id":"9e4284d1-7ec9-43c2-891d-519ff2b27c8f","html_url":"https://github.com/akzhy/Vara","commit_stats":{"total_commits":53,"total_committers":2,"mean_commits":26.5,"dds":"0.018867924528301883","last_synced_commit":"2e76da0b84d8f46f5a676dd285fa35c1382df3b8"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akzhy%2FVara","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akzhy%2FVara/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akzhy%2FVara/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akzhy%2FVara/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akzhy","download_url":"https://codeload.github.com/akzhy/Vara/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273278,"owners_count":17448076,"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","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":[],"created_at":"2024-08-04T01:01:52.307Z","updated_at":"2024-11-19T00:31:06.317Z","avatar_url":"https://github.com/akzhy.png","language":"JavaScript","funding_links":["https://ko-fi.com/akzhy_","https://www.paypal.me/akzhy/10"],"categories":["JavaScript"],"sub_categories":[],"readme":"![](vara.gif)\n# Vara \n![](https://img.shields.io/badge/Vara.js-1.4.0-brightgreen.svg) ![](https://img.shields.io/badge/License-MIT-blue.svg) [![Paypal Donate](https://img.shields.io/badge/Donate-paypal-9c27b0.svg)](https://www.paypal.me/akzhy/10)\n\nVara is a javascript library that can create text drawing animations\n\n\u003e The 1.x version of Vara will soon be replaced with [v2](https://github.com/akzhy/Vara/tree/v2.0.0) which uses canvas instead of SVG and might cause breaking changes\n\n#### [Website](http://vara.akzhy.com) | [Examples](http://vara.akzhy.com/examples) | [Codepen 1](https://codepen.io/akzhy/pen/YdbYbj) | [Codepen 2](https://codepen.io/akzhy/pen/OrdYGO)\n\n\n## Installation and Basic usage\n\n**Using NPM**\n\n```\nnpm install vara --save\n```\n\nOr download and include the library as follows\n\n```html\n\u003cscript src=\"./lib/vara.min.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n\u003c!-- Or jsdelivr --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vara@1.4.0/lib/vara.min.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n```\n```javascript\nnew Vara(\"#element\",\"font.json\",[{\n\ttext:\"Handwritten\"\n}],{\n\tfontSize:46\n});\n```\n\nThe first argument, #element is the container element for the SVG.\n\nThe font used is a specially created JSON file that contains the information needed to create the text. It is included by passing the URL of the font as the second argument.\nA few custom fonts are available in the Github repository, more will be added soon. Creation of custom fonts are explained [here](http://vara.akzhy.com/creating-fonts).\n\nThe third argument is an array of objects, where each object will represent a block of text to be drawn. The text to be drawn is passed as the text property.\n\nThe last argument is an object to provide the options like fontSize,color etc.\n\n## Options\n\n```javascript\n// https://cdn.jsdelivr.net/npm/vara@1.4.0/fonts/fontdir/fontname.json\nnew Vara(\"#container\",\"font.json\",[\n{\n\ttext:\"Hello World\", // String, text to be shown\n\tfontSize:24, // Number, size of the text\n\tstrokeWidth:.5, // Width / Thickness of the stroke\n\tcolor:\"black\", // Color of the text\n\tid:\"\", // String or integer, for if animations are called manually or when using the get() method. Default is the index of the object.\n\tduration:2000, // Number, Duration of the animation in milliseconds\n\ttextAlign:\"left\", // String, text align, accepted values are left,center,right\n\tx:0, // Number, x coordinate of the text\n\ty:0, // Number, y coordinate of the text\n\tfromCurrentPosition:{ // Whether the x or y coordinate should be from its calculated position, ie the position if x or y coordinates were not applied\n\t\tx:true, // Boolean\n\t\ty:true, // Boolean\n\t},\n\tautoAnimation:true, // Boolean, Whether to animate the text automatically\n\tqueued:true, // Boolean, Whether the animation should be in a queue\n    delay:0,     // Delay before the animation starts in milliseconds\n    /* Letter spacing can be a number or an object, if number, the spacing will be applied to every character.\n    If object, each letter can be assigned a different spacing as follows,\n    letterSpacing: {\n        a: 4,\n        j: -6,\n        global: -1\n    }\n    The global property is used to set spacing of all other characters\n    */\n\tletterSpacing:0\n}],{\n\t// The options given below will be applicable to every text created,\n\t// however they will not override the options set above.\n\t// They will work as secondary options.\n\tfontSize:24, // Number, size of the text\n\tstrokeWidth:.5, // Width / Thickness of the stroke\n\tcolor:\"black\", // Color of the text\n\tduration:2000, // Number, Duration of the animation in milliseconds\n\ttextAlign:\"left\", // String, text align, accepted values are left,center,right\n\tautoAnimation:true, // Boolean, Whether to animate the text automatically\n\tqueued:true, // Boolean, Whether the animation should be in a queue\n\tletterSpacing:0\n})\n```\n\n## Methods\n\n#### `.ready(function)`\nIs used to execute a function when the font is loaded and the elements are created.\n\n**Any other method should be called inside this function.**\n\n----\n\n#### `.get(id)`\nReturns an object with properties `characters` and `container`.\n\n`characters` is an array of svg `g` elements, each representing a letter and container is an svg `g` wrapping the text block.\nIf an id was given to the text during creation, it should be given as the argument, otherwise use the index of the text block.\n\n----\n\n#### `.draw(id)`\nUsed to animate texts with `autoAnimation:false`.\n\nIf an `id` was given to the text during creation it should be given as the argument, otherwise use the index of the text block.\n\n----\n\n#### `.animationEnd(function(i,o){})`\nUsed to execute a function once animation ends, triggers every time a block of text is drawn.\nHas two arguments,\n\n`i` - The id of the drawn text.\n\n`o` - The object described in the `get()` method.\n\n----\n\n#### `.playAll()`\n*Introduced in v1.1.0*\n\nIs used to play the animation of every text block, obeying `delay` and `queue`\n\n## Sponsors\n\nBrowser testing provided by \n\n\u003ca href=\"http://browserstack.com/\" title=\"Browserstack\"\u003e\n\t\u003cimg src=\"./browserstack.png\" width=\"240\" alt=\"Browserstack Logo\"/\u003e\n\u003c/a\u003e\n\n\n## Contact\nIf you find an issue or a bug or want to suggest a new feature, you can\n* [Raise an issue](https://github.com/akzhy/Vara/issues)\n* [Contact me through my webpage](http://www.akzhy.com/contact/)\n* [Contact by Email](mailto:hi@akzhy.com)\n* [Comment on relevant page](http://vara.akzhy.com/)\n* [Contact through twitter](https://twitter.com/_akzhy)\n\nIf you would like to have a specific font created, you can mail me with the details and i will try to create it, if the font have a suitable license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakzhy%2FVara","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakzhy%2FVara","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakzhy%2FVara/lists"}