40:null 41:["$","title",null,{"children":"Simple pencil + ink pen effect for SVG path using filters | Daniel Wood | Observable"}] 47:T44a,path_d = "m61,296c0,0 4.14325,-2.9093 6,-6c7.60343,-12.65652 15.77957,-28.11407 20,-36c11.41272,-21.32486 15.47656,-27.5737 22,-33c29.85457,-24.83354 44.71201,-27.98163 50,-29c11.78348,-2.26929 28.9559,-0.33562 35,5c7.49678,6.61803 15.02756,20.4411 25,40c8.94734,17.54837 14,34 19,49c6,18 10.07678,33.58847 18,45c8.10583,11.67456 18.87521,20.49054 34,20c10.19269,-0.3306 26.61209,-11.24927 46,-43c6.99197,-11.45044 10.50085,-27.20941 17,-42c22.31149,-50.77596 27.258,-59.70815 42,-73c9.0657,-8.17392 25.06567,-13.20029 36,-12c9.16449,1.00601 22.90411,8.25493 31,19c11.35403,15.06935 18.11743,36.96968 24,60c5.10196,19.97424 7.54114,37.25388 16,52c7.59521,13.24057 18.97363,26.24292 26,31c6.3064,4.26962 14.06866,4.88245 24,-2c13.94855,-9.66635 24.72675,-29.30939 34,-55c9.8869,-27.39069 11.77521,-43.09616 17,-55c5.75446,-13.11055 12.47229,-25.47231 17,-30c4.52771,-4.52769 10.94672,-6.49873 18,-7c5.98492,-0.42534 12.38586,1.32828 18,5c6.53644,4.27493 13.90363,12.51663 20,25c7.08942,14.51689 10.76099,34.51898 23,62c5.45831,12.25589 11.28418,20.73114 16,26c4.27039,4.77115 9,10 14,13l5,2l5,1l0,0"48:[] 45:{"id":"70b3faaab039dd10","slug":null,"title":"Simple pencil + ink pen effect for SVG path using filters","thumbnail":"7f563b1fcc62eabf522f7aab47e383a827ed255295bc8363bf7185b5d028fc23","access_level":"public","create_time":"$D2023-02-16T19:56:47.476Z","update_time":"$D2023-02-16T19:56:47.476Z","view_time":null,"first_public_time":"$D2023-02-16T19:56:47.476Z","has_unpublished_edits":null,"fork":{"id":"ec0b4db5368b273a","slug":"simple-pencil-ink-pen-effect-for-svg-path-using-filters","title":"Simple pencil + ink pen effect for SVG path using filters","owner":{"id":"51a17a9a0cd3fee1","login":"oliviafvane","name":"Olivia Vane"}},"stars":1,"starred":false,"owner":{"type":"team","id":"3e625d3fdbdc0d0a","login":"danieljwood","name":"Daniel Wood","avatar_url":"https://avatars-next.observableusercontent.com/37aea67dccef4e009d2709aca1700a64df2eb6b1d78ff8a345b3b2bc3bcc8f2f","tier":"starter_2024","bio":"Maps and Chartjunk for @nprapps","following":false},"version":131,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"319e840dacaee022","login":"danieljwood","name":"Daniel Wood","avatar_url":"https://avatars-next.observableusercontent.com/37aea67dccef4e009d2709aca1700a64df2eb6b1d78ff8a345b3b2bc3bcc8f2f","tier":null,"bio":"Maps and Chartjunk for @nprapps","following":false}],"members":[{"type":"individual","id":"319e840dacaee022","login":"danieljwood","name":"Daniel Wood","avatar_url":"https://avatars-next.observableusercontent.com/37aea67dccef4e009d2709aca1700a64df2eb6b1d78ff8a345b3b2bc3bcc8f2f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Simple pencil + ink pen effect for SVG path using filters","cells":[{"id":0,"value":"md`# Simple pencil + ink pen effect for SVG path using filters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`[

](https://astrofella.wordpress.com/tag/sir-quentin-blake/ \"By Quentin Blake\")`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`This is a simple way to do a pencil or ink pen effect for an SVG \\`\\`\\`\\`, using the \\`\\`\\`\\` noise filter. \n\nFor more pencil effect examples on Observable, have a look at [@matthewturk/pencil-effect-filters](https://observablehq.com/@matthewturk/pencil-effect-filters), and which also simplify and curve the path [@coreygirard/pencil-mercator](https://observablehq.com/@coreygirard/pencil-mercator), [@d3/sketchy-earth](https://observablehq.com/@d3/sketchy-earth) and [@visionscarto/pencil-globe](https://observablehq.com/@visionscarto/pencil-globe). \n\nTake an SVG path (no filter applied):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`### Higher frequency noise for pencil effect:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`### Lower frequency noise and thicker stroke for ink pen effect:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`### To increase the hand-drawn feel, layer two paths with slightly different noise on top of each other:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 46:"$45:body"