2c:null 2d:["$","title",null,{"children":"SVG maps and gradients from filter primitives | dleeftink | Observable"}] 32:T618, 33:Ta0b,34:T93a, 35:T4dd, 36:T405, 37:[] 30:{"id":"1a7476309bb28954","slug":"svg-filter-maps-and-gradients","title":"SVG maps and gradients from filter primitives","thumbnail":"20897ca2c7cd4a359fe1ba357da0f69c8090fa179e9f445615972fc80f563fa2","access_level":"public","create_time":"$D2025-11-15T21:43:17.431Z","update_time":"$D2026-05-20T08:45:48.225Z","view_time":null,"first_public_time":"$D2025-11-16T12:32:12.872Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"10e70264ea4e147e","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":"starter_2024"},"version":5984,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6cdb6324966da5d4","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":null}],"members":[{"type":"team","id":"10e70264ea4e147e","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":"starter_2024","role":"editor"},{"type":"individual","id":"6cdb6324966da5d4","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","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 maps and gradients from filter primitives","cells":[{"id":0,"value":"# SVG maps and gradients from filter primitives \n## Generating gradients and displacement maps using filter primitives only","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1029,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1018,"value":"## Flood based\n`Places multiple fills at different offset locations`\n___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1213,"value":"___\n\n## Drop-shadow based\n`Forces the input alpha channel to 0.5`\n\n___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1076,"value":"$33","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1025,"value":"___ \n\n## Drop-shadow based (requires `0.5` alpha channel)\n`Inverts the alpha channel twice to generate two inner shadow components`\n___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2218,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2764,"value":"## Linear gradient from spot light\n\n___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2760,"value":"$35","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4248,"value":"#### `> simplified`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4224,"value":" ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4448,"value":"___\n\n## Solid shading with diffuse lighting\n\n___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4458,"value":" ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2407,"value":"___\n\n## Radial gradient from specular light\n\n___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2328,"value":" ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4925,"value":"___\n\n## Inner ring using blue side-channel\n`Don't let the simple appearence fool the actual computational requirements in case of animation`\n___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4910,"value":"$36","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5214,"value":"___\n\n## Adjustable edge\n`Todo: adjust convolution for high DPI`\n___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4944,"value":" ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5259,"value":"___\n\n## Inner (aperture) blur\n\n___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5222,"value":" ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2241,"value":"___\n\n### Test area","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1033,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 31:"$30:body"