28:null 29:["$","title",null,{"children":"svg2rough.js playground | Max Graze | Observable"}] 2e:T70c,onigiri = svg` `2f:T9ac,koji = svg``30:[] 2c:{"id":"29a84c1e91f80cec","slug":"hello-svg2rough-js","title":"svg2rough.js playground","thumbnail":"9c76e607fd9c2a91f5a2908ee5dbc323fe58be1f13f2462a51d144d6262395b0","access_level":"public","create_time":"$D2022-08-07T01:24:11.444Z","update_time":"$D2022-08-09T16:17:32.861Z","view_time":null,"first_public_time":"$D2022-08-09T00:46:27.104Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"998e3f48dc296646","login":"datagrazing","name":"Max Graze","avatar_url":"https://avatars-next.observableusercontent.com/f69d8a810962426c04ba3ee76a79f7dfb2fc875b2c2d768f60d2084049a4dcdc","tier":"starter_2024"},"version":227,"publish_version":227,"role":null,"authored":false,"authors":[{"type":"individual","id":"4c2305a37ae74c4b","login":"datagrazing","name":"Max Graze","avatar_url":"https://avatars-next.observableusercontent.com/f69d8a810962426c04ba3ee76a79f7dfb2fc875b2c2d768f60d2084049a4dcdc","tier":null}],"members":[{"type":"individual","id":"4c2305a37ae74c4b","login":"datagrazing","name":"Max Graze","avatar_url":"https://avatars-next.observableusercontent.com/f69d8a810962426c04ba3ee76a79f7dfb2fc875b2c2d768f60d2084049a4dcdc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"svg2rough.js playground","cells":[{"id":0,"value":"# svg2rough.js playground","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"viewof roughness = Inputs.range([0, 20], {step: .5, value: 0, label: 'Roughness'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"viewof bowing = Inputs.range([0, 20], {step: .5, value: 0, label: 'Bowing'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"viewof pencilFilter = Inputs.radio([\"true\", \"false\"], {value: 'false', label: \"Pencil Filter\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"viewof sketchPatterns = Inputs.radio([\"true\", \"false\"], {value: 'false', label: \"Sketch Patterns\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"viewof randomize = Inputs.radio([\"true\", \"false\"], {value: 'false', label: \"randomize\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"svg2rough = import(\"https://cdn.skypack.dev/svg2roughjs@3.0.1?min\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"