{"id":13995847,"url":"https://github.com/fskpf/svg2roughjs","last_synced_at":"2025-04-05T13:05:44.128Z","repository":{"id":36793393,"uuid":"230145977","full_name":"fskpf/svg2roughjs","owner":"fskpf","description":"Create sketchy, hand-drawn-like images from SVGs","archived":false,"fork":false,"pushed_at":"2024-08-17T08:42:15.000Z","size":6615,"stargazers_count":170,"open_issues_count":9,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T12:08:35.681Z","etag":null,"topics":["drawing","hand-drawn","hand-drawn-graphs","roughjs","roughness","sketch","sketching","svg","svg-files"],"latest_commit_sha":null,"homepage":"https://fskpf.github.io/","language":"TypeScript","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/fskpf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2019-12-25T19:39:14.000Z","updated_at":"2025-03-28T20:03:04.000Z","dependencies_parsed_at":"2023-01-17T05:00:37.648Z","dependency_job_id":"cfb76da8-e5f8-483e-a12b-48f9a54d7eb8","html_url":"https://github.com/fskpf/svg2roughjs","commit_stats":{"total_commits":227,"total_committers":4,"mean_commits":56.75,"dds":"0.46696035242290745","last_synced_commit":"f88585ea3067330f6ca3665a6e28e245352208ef"},"previous_names":[],"tags_count":52,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fskpf%2Fsvg2roughjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fskpf%2Fsvg2roughjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fskpf%2Fsvg2roughjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fskpf%2Fsvg2roughjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fskpf","download_url":"https://codeload.github.com/fskpf/svg2roughjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339155,"owners_count":20923014,"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":["drawing","hand-drawn","hand-drawn-graphs","roughjs","roughness","sketch","sketching","svg","svg-files"],"created_at":"2024-08-09T14:03:36.970Z","updated_at":"2025-04-05T13:05:44.097Z","avatar_url":"https://github.com/fskpf.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# svg2rough.js\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://fskpf.github.io/static/assets/svg2roughjs-hero-sketch.svg\" alt=\"hero-image\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/fskpf/svg2roughjs\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/fskpf/svg2roughjs?style=for-the-badge\u0026logo=github\u0026color=%23eac54f\" alt=\"npm\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/fskpf/svg2roughjs/blob/master/LICENSE.md\"\u003e\u003cimg src=\"https://img.shields.io/github/license/fskpf/svg2roughjs?style=for-the-badge\u0026logo=github\" alt=\"github\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/svg2roughjs\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/svg2roughjs?style=for-the-badge\u0026logo=npm\" alt=\"npm\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/svg2roughjs\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/svg2roughjs?style=for-the-badge\u0026logo=npm\" alt=\"npm\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nUtilizes [Rough.js](https://github.com/pshihn/rough) to convert an SVG to a hand-drawn visualization.\n\nTry the sample application [here](https://fskpf.github.io/).\n\n## NPM\n\nInstall from the NPM registry with\n\n```shell\nnpm install --save svg2roughjs\n```\n\n## Usage\n\nJust import `Svg2Roughjs` and instantiate it with an output div in which the\nSVG sketch should be created. Calling `sketch()` outputs the current `svg` to the given element\nas hand-drawn sketch.\n\nFor reference, a [sample application](https://fskpf.github.io/) is provided in\n[`/sample-application/`](https://github.com/fskpf/svg2roughjs/tree/master/sample-application).\n\n### ES Module\n\n```javascript\nimport { Svg2Roughjs } from 'svg2roughjs'\n\nconst svg2roughjs = new Svg2Roughjs('#output-div')\nsvg2roughjs.svg = document.getElementById('input-svg')\nsvg2roughjs.sketch()\n```\n\n### UMD Bundle\n\nAn UMD bundle that ca be loaded via script tags or a module loader e.g.\n[RequireJS](https://requirejs.org/) is included in the NPM package or can\nbe loaded from [unpkg](https://unpkg.com/):\n\n```\nhttps://unpkg.com/svg2roughjs/dist/svg2roughjs.umd.min.js\n```\n\n```javascript\n\u003c!-- script loading --\u003e\n\u003cscript src=\"https://unpkg.com/svg2roughjs/dist/svg2roughjs.umd.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const svgConverter = new svg2roughjs.Svg2Roughjs('#output-div')\n  svgConverter.svg = document.getElementById('input-svg')\n  svgConverter.sketch()\n\u003c/script\u003e\n```\n\n```javascript\n\u003c!-- requirejs --\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  window.requirejs(['https://unpkg.com/svg2roughjs/dist/svg2roughjs.umd.min.js'], svg2roughjs =\u003e {\n    const svgConverter = new svg2roughjs.Svg2Roughjs('#output-div')\n    svgConverter.svg = document.getElementById('input-svg')\n    svgConverter.sketch()\n  });\n\u003c/script\u003e\n```\n\n## API\n\n### Module Exports\n\n- `Svg2Roughjs`: The main class for the conversion.\n- `OutputType`: An enum that is used to switch between `SVG` and `CANVAS` output when targetting an `HTMLDivElement` as output container.\n\n### Methods\n\n- `constructor(target, outputType?, roughConfig?)`\n\n  Creates a new Svg2Rough.js instance.\n\n  `target` may either be a container `HTMLDivElement` (or a selector for the container) into which a new sketch should be created, or directly an `SVGSVGElement` or `HTMLCanvasElement` that should be used for the output.\n\n  The optional `outputType` defaults to the respective mode if `target` is either `SVGSVGElement` or `HTMLCanvasElement`. If targetting an HTML container element, then `OutputType.SVG` is used by default.\n\n- `sketch(sourceSvgChanged = false): Promise\u003cSVGSVGElement | HTMLCanvasElement | null\u003e`\n\n  Clears the configured `target` element and converts the current `svg2roughj.svg` to a hand-drawn sketch.\n\n  Setting `sourceSvgChanged` to `true` re-evaluates the given `svg2roughj.svg` as it was set anew. May be used to re-use the same Svg2Rough.js instance and the same SVG element as source container.\n\n### Properties\n\n| Property          | Description                                                                                                                       | Default                    |\n| ----------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| `svg`             | The given `SVGSVGElement` that should be converted.                                                                               | `undefined`                |\n| `outputType`      | Switch between canvas or SVG output.                                                                                              | `OutputType.SVG`           |\n| `roughConfig`     | [Rough.js options](https://github.com/rough-stuff/rough/wiki#options) object, e.g. to change the fill-style, roughness or bowing. | `{}`                       |\n| `fontFamily`      | Font with which text elements should be drawn.\u003cbr\u003eIf set to `null`, the text element's original font-family is used.              | `'Comic Sans MS, cursive'` |\n| `backgroundColor` | Sets a background color onto which the sketch is drawn.                                                                           | `transparent`              |\n| `randomize`       | Randomize Rough.js' fillWeight, hachureAngle and hachureGap.                                                                      | `true`                     |\n| `seed`            | Optional, numerical seed for the randomness when creating the sketch.                                                             | `null`                     |\n| `sketchPatterns`  | Whether to sketch pattern fills/strokes or just copy them to the output                                                           | `true`                     |\n| `pencilFilter`    | Applies a pencil effect on the SVG rendering.                                                                                     | `false`                    |\n\n## Sample Images\n\nSome sample images with different Svg2rough.js settings. Try it yourself [here](https://fskpf.github.io/).\n\n| SVG                                                                                                                                                         | Sketch                                                                                                         |\n| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |\n| \u003cimg src=\"https://fskpf.github.io/static/sample-images/bpmn1.svg\" width=\"400px\"\u003e\u003cbr\u003e(created with [yEd Live](https://www.yworks.com/yed-live))              | \u003cimg src=\"https://fskpf.github.io/static/sample-images/bpmn1_sketch.svg\" width=\"400px\"\u003e\u003cbr\u003e\u0026nbsp;              |\n| \u0026nbsp;                                                                                                                                                      | \u0026nbsp;                                                                                                         |\n| \u003cimg src=\"https://fskpf.github.io/static/sample-images/hierarchic_diagram.svg\" width=\"400px\"\u003e\u003cbr\u003e(created with [yEd Live](https://www.yworks.com/yed-live)) | \u003cimg src=\"https://fskpf.github.io/static/sample-images/hierarchic_diagram_sketch.svg\" width=\"400px\"\u003e\u003cbr\u003e\u0026nbsp; |\n| \u0026nbsp;                                                                                                                                                      | \u0026nbsp;                                                                                                         |\n| \u003cimg src=\"https://fskpf.github.io/static/sample-images/flowchart.svg\" width=\"400px\"\u003e\u003cbr\u003e(created with [yEd Live](https://www.yworks.com/yed-live))          | \u003cimg src=\"https://fskpf.github.io/static/sample-images/flowchart_sketch.svg\" width=\"400px\"\u003e\u003cbr\u003e\u0026nbsp;          |\n| \u0026nbsp;                                                                                                                                                      | \u0026nbsp;                                                                                                         |\n| \u003cimg src=\"https://fskpf.github.io/static/sample-images/chirality.svg\" width=\"400px\"\u003e                                                                        | \u003cimg src=\"https://fskpf.github.io/static/sample-images/chirality_sketch.svg\" width=\"400px\"\u003e                    |\n| \u0026nbsp;                                                                                                                                                      | \u0026nbsp;                                                                                                         |\n| \u003cimg src=\"https://fskpf.github.io/static/sample-images/comic_boy.svg\" width=\"400px\"\u003e                                                                        | \u003cimg src=\"https://fskpf.github.io/static/sample-images/comic_boy_sketch.svg\" width=\"400px\"\u003e                    |\n| \u0026nbsp;                                                                                                                                                      | \u0026nbsp;                                                                                                         |\n| \u003cimg src=\"https://fskpf.github.io/static/sample-images/mars_rover_blueprint.svg\" width=\"400px\"\u003e                                                             | \u003cimg src=\"https://fskpf.github.io/static/sample-images/mars_rover_sketch.svg\" width=\"400px\"\u003e                   |\n\n## Local Build\n\nTo build the project locally, make sure to have [Node.js](https://nodejs.org/en) installed and run\n\n```\n\u003e npm install\n\u003e npm run build\n```\n\nThis creates a local `/dist/` folder containing both, the ES module and UMD build of `svg2roughjs`.\n\n### Tests\n\nTo perform all tests on the current build, run\n\n```\nnpm run test-all\n```\n\nThis converts all given tests in [`/test/`](https://github.com/fskpf/svg2roughjs/tree/master/test) and\ncompares the output SVG with the expected string. Each test contains a configuration file with different\nsettings and a fixed seed to account for the randomness in the sketched output.\n\n## Credits\n\n- [Rough.js](https://github.com/pshihn/rough) – Draws the hand-drawn elements\n- [svg-pathdata](https://github.com/nfroidure/svg-pathdata) – Parses SVGPathElements\n- [TinyColor](https://github.com/bgrins/TinyColor) – Color manipulation\n\n## License\n\n[MIT License](https://github.com/fskpf/svg2roughjs/blob/master/LICENSE.md) © Fabian Schwarzkopf and Johannes Rössel\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffskpf%2Fsvg2roughjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffskpf%2Fsvg2roughjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffskpf%2Fsvg2roughjs/lists"}