{"id":18103273,"url":"https://github.com/averagemarcus/adventuresinsvg","last_synced_at":"2026-01-20T14:07:47.166Z","repository":{"id":67321291,"uuid":"47025637","full_name":"AverageMarcus/AdventuresInSVG","owner":"AverageMarcus","description":"Experimenting with SVG animation","archived":false,"fork":false,"pushed_at":"2015-11-28T15:27:50.000Z","size":652,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"gh-pages","last_synced_at":"2025-04-06T05:43:37.983Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/AverageMarcus.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":"2015-11-28T14:03:49.000Z","updated_at":"2015-11-30T09:24:04.000Z","dependencies_parsed_at":"2023-03-11T01:26:49.497Z","dependency_job_id":null,"html_url":"https://github.com/AverageMarcus/AdventuresInSVG","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AverageMarcus/AdventuresInSVG","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AverageMarcus%2FAdventuresInSVG","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AverageMarcus%2FAdventuresInSVG/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AverageMarcus%2FAdventuresInSVG/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AverageMarcus%2FAdventuresInSVG/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AverageMarcus","download_url":"https://codeload.github.com/AverageMarcus/AdventuresInSVG/tar.gz/refs/heads/gh-pages","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AverageMarcus%2FAdventuresInSVG/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28604712,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T12:01:53.233Z","status":"ssl_error","status_checked_at":"2026-01-20T12:01:46.545Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2024-10-31T22:11:16.995Z","updated_at":"2026-01-20T14:07:47.149Z","avatar_url":"https://github.com/AverageMarcus.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AdventuresInSVG\n\nExperimenting with SVG animation\n\n# What \u0026 why?\n\nFor a while now I've been a little fascinated with SVGs and the ability to animate them, mainly thanks to [@benfoxall](https://github.com/benfoxall) and [this repo](https://github.com/benfoxall/logo-hacks).\n\nI wanted to find out how semi-complex animations could be achieved and try and pick the \"best\" way of doing it. \n\nI have split out the CSS and JS into the HTML page rather than within the SVG tag for better readability. \n\nHere are my results so far...\n\n# Animating with JavaScript\n\nSee: [AnimatingWithJavaScript.html](http://averagemarcus.github.io/AdventuresInSVG/AnimatingWithJavaScript.html)\n\n```diff \n+ Easy to change the routine of the animation\n+ The timings can be changed on-the-fly\n- A bit of CSS is needed to achieve it easily\n- May not perform well on load-end devices if the amount of work done in JS is large\n```\n# Animating with CSS\n\nSee: [AnimatingWithCSS.html](http://averagemarcus.github.io/AdventuresInSVG/AnimatingWithCSS.html)\n\n```diff\n+ Few lines of code needed to animate something\n+ Animations are smooth\n- Timings are hard and not very flexible.\n- Cannot change the timing on-the-fly\n```\n\n# Animating with Promises (JS)\n\nSee: [AnimatingWithPromises.html](http://averagemarcus.github.io/AdventuresInSVG/AnimatingWithPromises.html)\n\n*Note:* I used [Q](https://github.com/kriskowal/q) for this.\n\n```diff\n(All the same as JS above)\n+ Timings between animations can be varied\n+ Nice, easy to read syntax\n- Much more code\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faveragemarcus%2Fadventuresinsvg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faveragemarcus%2Fadventuresinsvg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faveragemarcus%2Fadventuresinsvg/lists"}