31:T70c,onigiri = svg` `32:T9ac,koji = svg``33:[] 2f:{"title":"svg2rough.js playground","cells":[{"id":0,"value":"# svg2rough.js playground","pinned":false,"hidden":false,"mode":"md"},{"id":215,"value":"For when you want to turn your sketch into an interactive digital piece while still looking au naturel.","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"rough = {\nconst wrapper = d3.create('div')\n .attr('id', \"wrapper\")\n// const svg = wrapper.append('svg')\n const el = html`

`;\n\nconst svg2roughjs = new svg2rough.Svg2Roughjs(el)\n svg2roughjs.roughConfig = {\n bowing: bowing,\n roughness: roughness,\n fillStyle: fillStyle\n }\n // svg2roughjs.backgroundColor = fill\n svg2roughjs.pencilFilter = pencilFilter\n svg2roughjs.sketchPatterns = sketchPatterns\n // svg2roughjs.fontFamily = 'comic sans'\n svg2roughjs.randomize = randomize\n\n //Insert your own svg here!\n svg2roughjs.svg = onigiri\n svg2roughjs.sketch()\n\n return el\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"viewof roughness = Inputs.range([0, 20], {step: .5, value: 0, label: 'Roughness'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"viewof bowing = Inputs.range([0, 20], {step: .5, value: 0, label: 'Bowing'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"viewof pencilFilter = Inputs.radio([\"true\", \"false\"], {value: 'false', label: \"Pencil Filter\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"viewof sketchPatterns = Inputs.radio([\"true\", \"false\"], {value: 'false', label: \"Sketch Patterns\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"viewof randomize = Inputs.radio([\"true\", \"false\"], {value: 'false', label: \"randomize\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"viewof fillStyle = Inputs.radio(\n [ \"solid\",\n \"hachure\",\n \n \"zigzag\",\n \"cross-hatch\",\n \"dots\",\n \"dashed\",\n \"zigzag-line\"\n ],\n { label: \"Fill Style\", value: \"hachure\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":219,"value":"## Other ways to sketchy SVGs\n\n### feTurbulence & feDeplacementMap\n- [Let's Sketch a Map](https://observablehq.com/@neocartocnrs/lets-sketch-a-map)\n- [SVG Filter Demo](https://observablehq.com/@chooblarin/svg-filter-demo)\n- [Simple pencil + ink pen effect for SVG path using filters](https://observablehq.com/@oliviafvane/simple-pencil-ink-pen-effect-for-svg-path-using-filters)\n\n### With rough.js\n- [D3 + Rough + Indie Flower](https://observablehq.com/@bumbeishvili/trying-out-rough)\n- [Rough Plot](https://observablehq.com/@fil/rough-plot)\n- [Tumble Wheel](https://observablehq.com/@jashkenas/tumble-wheel-with-rough-js)\n\n### Other\n- [Watercolor](https://observablehq.com/@veltman/watercolor)\n- [Pencil Airocean](https://observablehq.com/@fil/pencil-airocean)","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"svg2rough = import(\"https://cdn.skypack.dev/svg2roughjs@3.0.1?min\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}