{"id":20062938,"url":"https://github.com/jessihamel/svg_sketcher","last_synced_at":"2026-06-08T03:31:42.336Z","repository":{"id":87969966,"uuid":"605404093","full_name":"jessihamel/SVG_Sketcher","owner":"jessihamel","description":"A framework for rapidly developing generative SVGs with javascript","archived":false,"fork":false,"pushed_at":"2023-06-09T14:44:13.000Z","size":170,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T10:30:43.419Z","etag":null,"topics":["axidraw","axidraw-plotter","generative-art","javascript","svg"],"latest_commit_sha":null,"homepage":"","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/jessihamel.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-23T04:32:41.000Z","updated_at":"2023-02-23T04:43:26.000Z","dependencies_parsed_at":"2024-11-13T13:43:54.769Z","dependency_job_id":"9197689d-c327-4e83-ba77-764aff1ea52b","html_url":"https://github.com/jessihamel/SVG_Sketcher","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jessihamel/SVG_Sketcher","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessihamel%2FSVG_Sketcher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessihamel%2FSVG_Sketcher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessihamel%2FSVG_Sketcher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessihamel%2FSVG_Sketcher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jessihamel","download_url":"https://codeload.github.com/jessihamel/SVG_Sketcher/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jessihamel%2FSVG_Sketcher/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34047266,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-08T02:00:07.615Z","response_time":111,"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":["axidraw","axidraw-plotter","generative-art","javascript","svg"],"created_at":"2024-11-13T13:39:36.276Z","updated_at":"2026-06-08T03:31:42.317Z","avatar_url":"https://github.com/jessihamel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SVG SKETCHER\n\nSVG Sketcher is a framework for developing generative SVGs with javascript. Its goal is to make developing and saving art faster for generative artists and designers. It has a number of convenience functions for this purpose including:\n\n- Simple helpers for adding SVG elements to your sketch\n- Graphics helpers for quick drawing of shapes and doing geometric calculations\n- One button export of svg graphics, including an option to export for any paper size for printing or pen plotters such as [AxiDraw](https://axidraw.com/)\n- Built in [random number seeding](https://www.npmjs.com/package/seedrandom) to make plots optionally reproducible\n- Hot Module Replacement (HMR) via [Parcel](https://parceljs.org/) so that changes to code are reflected in the browser\n\n![screenshot](https://github.com/jessihamel/SVG_Sketcher/blob/main/SVG_Sketcher.png?raw=true)\n\n## Installation\n\nSVG Sketcher uses [Parcel](https://parceljs.org/) for HMR and to load dependencies. To start the server, clone the repo and run\n\n```bash\nyarn parcel src/index.html\n```\n\nor with npx\n\n```bash\nnpx parcel src/index.html\n```\n\n## Usage\n\n### To set your sketch size\n\nSketch size is set in `src/constants.js`\n\n```javascript\nexport const SKETCH_HEIGHT = 600;\nexport const SKETCH_WIDTH = 600;\n```\n\nUpdate these values to change the output of your sketch\n\n### Adding svg elements to your sketch\n\nThe `draw()` function in `src/main.js` is where to start coding up your sketch.\n\nThere are a number of ways to add an element to your sketch. The easiest way is to use the convenience functions that are part of the Sketcher class.\n\n```javascript\n  draw() {\n    const rect = Sketcher.appendElement('rect')\n    const attributes = [\n      ['width', SKETCH_WIDTH],\n      ['height', SKETCH_HEIGHT],\n      ['stroke', 'black'],\n      ['fill', 'none'],\n    ]\n    Sketcher.setAttributes(rect, attributes)\n  }\n```\n\nThe above code uses `Sketcher.appendElement` which is a wrapper around `createElementNS` and will add the appropriate SVG namespaces for your SVG element and append it to the sketch.\n\nSVG Sketcher also includes [d3](https://d3js.org/) by default and you can alternatively use its DOM manipulation library or vanilla javascript.\n\n### Using graphics helpers\n\nAll graphics helpers are available under the `drawingUtils` namespace. For example:\n\n```javascript\n  draw() {\n    const randomPoints = drawingUtils.randomPointsInSketch(10)\n    Sketcher.pathFromCoords(randomPoints)\n  }\n```\n\nThe helper `drawingUtils.randomPointsInSketch(10)` generates 10 random points in the bounds of the sketch. `Sketcher.pathFromCoords(randomPoints)` is a convenience function that will create a path from the coordinates and add it to the sketch. Graphics helpers are documented with jsdoc.\n\n### Using the random seed\n\nGenerative art/design often relies on random numbers to create designs, making it difficult for artists to reproduce their work. However, SVG sketcher uses [seedrandom](https://www.npmjs.com/package/seedrandom) to make a predictable random number generator if required. Read on for more information.\n\nThe initial seed is set in `src/seed.js` and is random by default, meaning any code calling it's export random() function will be **non-deterministic** by default. The initial seed is logged to the console, set as the id of the SVG and used as the name of the export. To reproduce the work (assuming no other code has changed), update the SEED value in `src/seed.js`\n\n```javascript\nconst SEED = Math.random(); // Replace with your desired value\n```\n\nAny calls to random() in the codebase will now be **deterministic**.\n\n(Note: by default the seed will only apply to calls to `random()` and not `Math.random()`. If you prefer to make `Math.random()` predictable globally, set `const GLOBAL` to `true`.)\n\n### Saving\n\nClick the `Download Sketch` button to save the output. The random seed used to generate the sketch is used as the output's name.\n\nTo save for printing, for example with a pen plotter, click `Download Sketch for Print` this will rescale your sketch to fit the given paper size with the specified margin. This is especially useful for artists who work with pen plotters and want to fit their artwork to a specific paper size. The values can be changed in `src/constants.js`\n\n## Contributing\n\nPull requests and feedback are welcome. For major changes, please open an issue first\nto discuss what you would like to change.\n\n## License\n\n[ISC](https://en.wikipedia.org/wiki/ISC_license)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjessihamel%2Fsvg_sketcher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjessihamel%2Fsvg_sketcher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjessihamel%2Fsvg_sketcher/lists"}