{"id":16591090,"url":"https://github.com/alex-page/harmonograph-svg","last_synced_at":"2025-10-29T09:32:37.001Z","repository":{"id":42680324,"uuid":"260591295","full_name":"alex-page/harmonograph-svg","owner":"alex-page","description":"👩‍🎨 Draw and animate a harmonograph in SVG","archived":false,"fork":false,"pushed_at":"2023-07-18T21:58:36.000Z","size":640,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-02T03:32:36.439Z","etag":null,"topics":["algorithmic-design","geometric-algorithms","harmonograph","javascript","lissajous-curve","nodejs","svg"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/@harmonograph/svg","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/alex-page.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-05-02T01:20:17.000Z","updated_at":"2023-07-25T12:59:26.000Z","dependencies_parsed_at":"2024-10-11T23:15:24.027Z","dependency_job_id":"c82c94b0-de1e-4d14-b03f-33a12b14617c","html_url":"https://github.com/alex-page/harmonograph-svg","commit_stats":{"total_commits":27,"total_committers":2,"mean_commits":13.5,"dds":0.2962962962962963,"last_synced_commit":"9a3d94a1caf45a77e7284c5f3c9afcacf1aa402d"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/alex-page/harmonograph-svg","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex-page%2Fharmonograph-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex-page%2Fharmonograph-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex-page%2Fharmonograph-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex-page%2Fharmonograph-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alex-page","download_url":"https://codeload.github.com/alex-page/harmonograph-svg/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex-page%2Fharmonograph-svg/sbom","scorecard":{"id":180006,"data":{"date":"2025-08-11","repo":{"name":"github.com/alex-page/harmonograph-svg","commit":"9a3d94a1caf45a77e7284c5f3c9afcacf1aa402d"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.8,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/8 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/publish.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/alex-page/harmonograph-svg/publish.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/alex-page/harmonograph-svg/publish.yml/main?enable=pin","Warn: npmCommand not pinned by hash: .github/workflows/publish.yml:20","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 19 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":3,"reason":"7 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-16T18:38:49.623Z","repository_id":42680324,"created_at":"2025-08-16T18:38:49.623Z","updated_at":"2025-08-16T18:38:49.623Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281599301,"owners_count":26528894,"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-10-29T02:00:06.901Z","response_time":59,"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":["algorithmic-design","geometric-algorithms","harmonograph","javascript","lissajous-curve","nodejs","svg"],"created_at":"2024-10-11T23:15:21.045Z","updated_at":"2025-10-29T09:32:36.697Z","avatar_url":"https://github.com/alex-page.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @harmonograph/svg\n\n\u003e 👩‍🎨 Draw and animate a harmonograph in SVG\n\n\n## Install\n\n```shell\nnpm install @harmonograph/svg\n```\n\n\n## Get started\n\nThe harmonograph is a mechanical apparatus that uses pendulums to create a geometric image. This creates an SVG of a harmonograph.\n\n\n### Create harmonograph SVG\n\n```js\nconst generateHarmonographSVG = require('@harmonograph/svg');\n\nconst harmonograph = generateHarmonographSVG({\n  size: 700,\n  strokeWidth: 1,\n  strokeColor: '#000',\n  backgroundColor: '#444',\n  pendulumTime: 150,\n  pendulums: [{\n    amplitude: 200, frequency: 2.985, phase: 2.054, damping: 0.001\n  },\n  {\n    amplitude: 200, frequency: 3.006, phase: 1.820, damping: 0.008\n  },\n  {\n    amplitude: 200, frequency: 3.003, phase: 2.283, damping: 0.001\n  },\n  {\n    amplitude: 200, frequency: 1.994, phase: 1.155, damping: 0.001\n  }]\n});\n```\n\nThis returns an SVG of a drawn harmonograph:\n\n```html\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 700 700\"\u003e\u003crect fill=\"#444\" width=\"100%\" height=\"100%\"\u003e\u003c/rect\u003e\u003cpath stroke=\"#000\" stroke-width=\"1\" fill=\"none\" d=\"M 679.068 646.723 C 646.36 628.881, 417.218 495.899, 249.676 392.849 S -28.969 212.083, 9.448 201.383 229.928 241.52, 402.486 287.403 712.231 363.501, 699.031 350.759 524.344 287.226, 350.469 262.826 16.412 251.089, 4.27 315.364 129.74 490.425, 301.232 560.133 652.343 645.958, 689.393 576.041 615.481 354.027, 450.006 221.669 89.434 -8.64, 28.434 0.66 49.576 125.994, 205.543 266.677 567.831 557.749, 651.306 617.899 683.011 644.863, 539.811 559.696 183.558 350.442, 79.541 279.709 -3.948 196.458, 123.519 225.983 466.178 316.111, 588.361 340.053 721.459 346.467, 612.334 310.892 290.483 232.23, 152.891 243.93 -26.608 327.129, 62 417.687 356.315 606.371, 506.257 624.646 727.936 574.222, 661.594 451.855 400.89 165.032, 241.915 75.065 -16.861 -19.959, 25.981 64.799 247.753 314.759, 412.286 443.909 702.305 653.591, 683.688 641.708 505.273 531.422, 338.765 432.805 23.99 247.771, 18.19 225.929 149.785 243.301\"\u003e\u003c/path\u003e\u003c/svg\u003e\n```\n\n\n### Create randomised harmonograph SVG\n\nTo create a randomised harmonograph, do not add the pendulums.\n\n```js\nconst generateHarmonographSVG = require('@harmonograph/svg');\n\nconst harmonograph = generateHarmonographSVG({\n  size: 700,\n  strokeWidth: 1,\n  strokeColor: '#000',\n  pendulumTime: 150,\n});\n```\n\n### Animate the path of the harmonograph SVG\n\n```js\nconst generateHarmonographSVG = require('@harmonograph/svg');\n\nconst harmonograph = generateHarmonographSVG({\n  size: 700,\n  strokeWidth: 1,\n  strokeColor: '#000',\n  pendulumTime: 150,\n  animatePath: true\n});\n```\n\n### Animate the path of the harmonograph SVG with set duration and bezier curve\n\n```js\nconst generateHarmonographSVG = require('@harmonograph/svg');\n\nconst harmonograph = generateHarmonographSVG({\n  size: 700,\n  strokeWidth: 1,\n  strokeColor: '#000',\n  pendulumTime: 150,\n  animatePath: {\n    duration: '10s',\n    easing: 'ease-in-out'\n  }\n});\n```\n\n\n## Options\n\n| Option | Description | Default value | Type |\n| --- | --- | --- | --- |\n| size | The size of the svg | `700` | _number_ |\n| strokeWidth | The width of the line | `1` | _number_ |\n| strokeColor | The color of the line | `#000` | _string_ |\n| backgroundColor | The background color of the svg | `transparent` | _string_ |\n| pendulumTime | How long the pendulum swings in seconds | `150` | _number_ |\n| animatePath | How the path animates | `false` | _object_ or _boolean_ |\n| animatePath.duration | The time for the animation to end | `15000ms` | _string_ |\n| animatePath.easing | The speed curve of the animation | `linear` | _string_ |\n| pendulum | Two pendulums require four items ( x, y and x, y ). Each X and Y value is an object that contains _amplitude_, _frequency_, _phase_, and _damping_ ( see pendulum options below ) | `random values` | _array_ |\n\n\n## Pendulums object\n\n| Parameter | Description | Default value | Type |\n| --- | --- | --- | --- |\n| pendulum.amplitude | How far a pendulum swings back and forth, must be from `0` - `360` degrees | `random number` | _number_ |\n| pendulum.frequency | How fast a pendulum swings back and forth, for best results use decimal values around `2` and `3` | `random number` | _number_ |\n| pendulum.phase | The rate that a pendulum loses its energy, or slows down, must be from `0` to `π` | `random number` | _number_ |\n| pendulum.damping | The offset from the normal starting position of a pendulum, must be from `0` to `0.01` | `random number` | _number_ |\n\n\n## Release History\n\n* v0.2.0  - ✨ Remove `getPathLength` and use pathLength attribute\n* v0.1.1  - 🎨 Replace rect fill with background color on svg style\n* v0.1.0  - 📏 Add `getPathLength` to return the harmonograph path length\n* v0.0.2  - ✋ Stop animation on last frame\n* v0.0.1  - 🎨 Background color documentation\n* v0.0.0  - 💥 Initial version\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex-page%2Fharmonograph-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falex-page%2Fharmonograph-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex-page%2Fharmonograph-svg/lists"}