2c:null 2d:["$","title",null,{"children":"SVG paths using filters animated | Albin Larsson | Observable"}] 32: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"33:[] 30:{"id":"8e5de7eaf1e26531","slug":"svg-paths-using-filters-animated","title":"SVG paths using filters animated","thumbnail":"4aff7fd2a0df55598f0d64958c1c1d753334c59c034526124c416b5e4589b936","access_level":"public","create_time":"$D2021-04-07T18:53:59.582Z","update_time":"$D2021-04-07T19:02:46.670Z","view_time":null,"first_public_time":"$D2021-04-07T19:00:27.987Z","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":"2a1c2869483219b6","login":"abbe98","name":"Albin Larsson","avatar_url":"https://avatars-next.observableusercontent.com/63476357c7dad5f60f9fd27d0ba9474c16429d41733750930c1581a76991d0ef","tier":"starter_2024"},"version":204,"publish_version":204,"role":null,"authored":false,"authors":[{"type":"individual","id":"de44a8f07c87bc40","login":"abbe98","name":"Albin Larsson","avatar_url":"https://avatars-next.observableusercontent.com/63476357c7dad5f60f9fd27d0ba9474c16429d41733750930c1581a76991d0ef","tier":null}],"members":[{"type":"individual","id":"de44a8f07c87bc40","login":"abbe98","name":"Albin Larsson","avatar_url":"https://avatars-next.observableusercontent.com/63476357c7dad5f60f9fd27d0ba9474c16429d41733750930c1581a76991d0ef","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SVG paths using filters animated","cells":[{"id":0,"value":"md`# SVG paths using filters animated`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`Various SVG paths animated for a drawing effect. Based on [Olivia Vane’s](/@oliviafvane) [Simple pencil + ink pen effect for SVG path using filters](https://observablehq.com/@oliviafvane/simple-pencil-ink-pen-effect-for-svg-path-using-filters). You need to \"re-run\" a cell to see the animation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"