{"id":17654025,"url":"https://github.com/tomchen/animated-svg-clock","last_synced_at":"2025-04-15T06:54:07.404Z","repository":{"id":130444650,"uuid":"278925606","full_name":"tomchen/animated-svg-clock","owner":"tomchen","description":"Animated SVG clock 🕒","archived":false,"fork":false,"pushed_at":"2024-06-11T20:31:34.000Z","size":16,"stargazers_count":29,"open_issues_count":1,"forks_count":17,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-15T06:54:02.142Z","etag":null,"topics":["animated-svg","animation","clock","counter","css","smil","svg","svg-animation"],"latest_commit_sha":null,"homepage":"","language":null,"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/tomchen.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}},"created_at":"2020-07-11T19:08:32.000Z","updated_at":"2025-02-25T08:57:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"fd70dd64-c2f8-441c-9a28-7ffe040b4d62","html_url":"https://github.com/tomchen/animated-svg-clock","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/tomchen%2Fanimated-svg-clock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomchen%2Fanimated-svg-clock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomchen%2Fanimated-svg-clock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomchen%2Fanimated-svg-clock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomchen","download_url":"https://codeload.github.com/tomchen/animated-svg-clock/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249023711,"owners_count":21199958,"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":["animated-svg","animation","clock","counter","css","smil","svg","svg-animation"],"created_at":"2024-10-23T12:08:20.911Z","updated_at":"2025-04-15T06:54:07.399Z","avatar_url":"https://github.com/tomchen.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\nAnimated SVG clock\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://tomchen.github.io/animated-svg-clock/clock.svg\" title=\"Click to view the Clock with current time set\"\u003e\n\u003cimg src=\"https://github.com/tomchen/animated-svg-clock/raw/master/clock.svg\" alt=\"Clock\"\u003e\u003cbr\u003e\nClick the clock to show a github.io-hosted SVG file where JavaScript is executed to show your current time\n\u003c/a\u003e\n\u003c/p\u003e\n\n## Technical details\n\n* CSS-based animation\n* Use JavaScript to set the current time\n* [![W3C Validation](https://img.shields.io/w3c-validation/default?label=W3C%20SVG%201.1\u0026preset=HTML%2C%20SVG%201.1%2C%20MathML%203.0\u0026targetUrl=https%3A%2F%2Fvalidator.w3.org%2F)](https://validator.w3.org/check?uri=https%3A%2F%2Fraw.githubusercontent.com%2Ftomchen%2Fanimated-svg-clock%2Fmaster%2Fclock.svg\u0026charset=%28detect+automatically%29\u0026doctype=Inline\u0026group=0)\n\n## GitHub usage\n\nJavaScript code of an SVG in `\u003cimg\u003e` will not be executed, the [SMIL](https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL) or CSS-based animation is fine, therefore, **what you see on GitHub README.md page is an animated clock starting from 00:00**, it basically counts the time you have stayed on the page.\n\nEven if you open the GitHub.com-hosted (not GitHub.io) raw SVG file ([here it is](https://raw.githubusercontent.com/tomchen/animated-svg-clock/master/clock.svg)) directly in your browser, the JavaScript code will still not be executed due to \"[Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP): sandbox\" header.\n\nIn order to execute the JavaScript code and correctly show the current time, you can:\n\n* open a USERNAME.github.io-hosted SVG image ([here is one](https://tomchen.github.io/animated-svg-clock/clock.svg)) directly in your browser\n* or download the SVG file, then open it directly in your browser\n* or embed it directly (not via `\u003cimg\u003e`) in your website, in USERNAME.github.io or any website that does not have strict Content Security Policy header and does not sanitize custom JavaScript code in SVG\n\nUse it (Markdown, can't set width and height):\n\n```markdown\n![Clock](https://tomchen.github.io/animated-svg-clock/clock.svg \"Clock\")\n```\n\nUse it (HTML, with width and height set):\n\n```html\n\u003cimg src=\"https://tomchen.github.io/animated-svg-clock/clock.svg\" alt=\"Clock\" title=\"Clock\" height=\"200px\" width=\"200px\"\u003e\n```\n\n## Design\n\nYes it's highly similar to a [Swiss railway clock](https://en.wikipedia.org/wiki/Swiss_railway_clock) whose design [IS COPYRIGHTED](https://www.businessinsider.fr/us/apple-paid-21-million-for-swiss-railways-clock-2012-11).\n\n## Credits\n\nBy Tom Chen\n\nInspired by SVG animation: by HackaLittleBit (https://commons.wikimedia.org/wiki/File:Swiss_railway_clock_1.svg), CC-by-sa 4.0, whose original SVG is: by Jahoe (https://commons.wikimedia.org/wiki/File:Swiss_railway_clock.svg), CC-by-sa 3.0 \u0026 GFDL\n\n(The current SVG code has significate code change comparing to HackaLittleBit's work, and is using the permissive MIT license)\n\n## License\n\nMIT license for the code, but Swiss railway clock **DESIGN IS COPYRIGHTED**.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomchen%2Fanimated-svg-clock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomchen%2Fanimated-svg-clock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomchen%2Fanimated-svg-clock/lists"}