{"id":16857115,"url":"https://github.com/maxwellito/vivus-instant","last_synced_at":"2025-04-09T13:08:02.056Z","repository":{"id":49615648,"uuid":"72103876","full_name":"maxwellito/vivus-instant","owner":"maxwellito","description":"Single page app to create independent stroke animated SVGs","archived":false,"fork":false,"pushed_at":"2018-03-11T21:46:21.000Z","size":55,"stargazers_count":339,"open_issues_count":11,"forks_count":45,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-04-02T06:51:34.713Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maxwellito.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-27T12:00:14.000Z","updated_at":"2025-03-02T20:06:18.000Z","dependencies_parsed_at":"2022-08-20T17:21:23.858Z","dependency_job_id":null,"html_url":"https://github.com/maxwellito/vivus-instant","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxwellito%2Fvivus-instant","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxwellito%2Fvivus-instant/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxwellito%2Fvivus-instant/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxwellito%2Fvivus-instant/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxwellito","download_url":"https://codeload.github.com/maxwellito/vivus-instant/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248045233,"owners_count":21038553,"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-10-13T14:06:46.177Z","updated_at":"2025-04-09T13:08:02.038Z","avatar_url":"https://github.com/maxwellito.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Vivus instant\n\n[Try Vivus Instant](https://maxwellito.github.io/vivus-instant/).\n\n\u003e It's like [Vivus](https://maxwellito.github.io/vivus/) but for a disposable usage. Powered by CSS animations.\n\nSingle page app to create independent stroke animated SVGs. For Vivus Instant to work properly make sure your SVG elements contains stroke properties and fill=\"none\"\n\n## Why this project?\n\nMany developers seem happy to use [Vivus](https://maxwellito.github.io/vivus/) to animate SVGs, however many times it's for a single use without controls or callbacks.. so why download an extra JS library when a piece of CSS can do the job? So here it is: Vivus instant.\n\nBy looking at the code, you can mention a copy of the Pathformer and a custom Vivus. The entire controls and drawing parts have been stripped down to let place to a rendering engine.\n\n## How to use this SVG?\n\n```html\n\u003c!-- This should work everywhere --\u003e\n\u003cobject type=\"image/svg+xml\" data=\"your_animated_svg.svg\"\u003e\u003c/object\u003e\n\n\u003c!-- This might be clunky --\u003e\n\u003cimg src=\"your_animated_svg.svg\"/\u003e\n\n\u003c!-- Copy pasting your animated SVG to use it inline --\u003e\n\u003csvg\u003e\n  ...\n\u003c/svg\u003e\n```\n\n### Manual trigger\n\nThis works by adding the trigger class to the SVG tag. Unfortunately, it can only be done inline, that means your entire SVG code must be in your HTML page. Otherwise the trigger won't work.\nHowever in a object tag it is possible to access the SVG tag to add the trigger class, but it require some extra logic to wait the document load. The tag is accessible via the property `contentDocument` of the `\u003cobject\u003e` tag.\n\n## Help and feedback\n\nThese tools are in beta. Any feedback or bug report is welcome. Please open an issue or a pull request. Just follow the requirements in the issue template :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxwellito%2Fvivus-instant","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxwellito%2Fvivus-instant","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxwellito%2Fvivus-instant/lists"}