2a:null 2b:["$","title",null,{"children":"SVG drop shadow maker | Alec Barrett | Observable"}] 30:[] 2e:{"id":"b13263aba7fba161","slug":"svg-drop-shadow-maker","title":"SVG drop shadow maker","thumbnail":"2e53817d2d36d08afaa2d5b6611d1d073e5b5e95ef7b22ff81985c7090994afd","access_level":"public","create_time":"$D2019-05-24T14:54:07.974Z","update_time":"$D2020-01-16T15:22:37.507Z","view_time":null,"first_public_time":"$D2019-05-24T15:54:30.474Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"a22e826d0f3dc150","login":"anbnyc","name":"Alec Barrett","avatar_url":"https://avatars-next.observableusercontent.com/f36768e14bb49782102d13478101b1a5552af4ab66dea95cad1b7e8157bafdff","tier":"starter_2024"},"version":237,"publish_version":237,"role":null,"authored":false,"authors":[{"type":"individual","id":"3efd68de913f5c25","login":"anbnyc","name":"Alec Barrett","avatar_url":"https://avatars-next.observableusercontent.com/f36768e14bb49782102d13478101b1a5552af4ab66dea95cad1b7e8157bafdff","tier":null}],"members":[{"type":"individual","id":"3efd68de913f5c25","login":"anbnyc","name":"Alec Barrett","avatar_url":"https://avatars-next.observableusercontent.com/f36768e14bb49782102d13478101b1a5552af4ab66dea95cad1b7e8157bafdff","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"469c9c32a2765865","slug":"widget","title":"Widgets","owner":{"id":"a22e826d0f3dc150","login":"anbnyc","name":"Alec Barrett"}},"type":"notebook","body":{"title":"SVG drop shadow maker","cells":[{"id":0,"value":"md`# SVG drop shadow maker`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"viewof filterX = slider({\n min: -20, \n max: 20, \n step: 1, \n value: 0, \n title: \"filter x\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"viewof filterY = slider({\n min: -20, \n max: 20, \n step: 1, \n value: 0, \n title: \"filter y\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"viewof filterWidthPx = slider({\n min: 50, \n max: 250, \n step: 5, \n value: 200, \n title: \"filter width (px)\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":116,"value":"viewof filterHeightPx = slider({\n min: 50, \n max: 250, \n step: 5, \n value: 200, \n title: \"filter height (px)\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"viewof feOffsetDx = slider({\n min: 0, \n max: 40, \n step: 1, \n value: 4, \n title: \"feOffset dx\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"viewof feOffsetDy = slider({\n min: 0, \n max: 40, \n step: 1, \n value: 4, \n title: \"feOffset dy\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"viewof feGaussianBlurDeviation = slider({\n min: 0, \n max: 30, \n step: 1, \n value: 5, \n title: \"feGaussianBlur std dev\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"viewof c1 = color({\n value: \"#7d7d7d\",\n title: \"feColorMatrix color\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"viewof feColorMatrixAlpha = slider({\n min: 0, \n max: 1, \n step: 0.001, \n value: 0.5, \n title: \"feColorMatrix alpha\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"viewof feOffsetIn = select({\n title: \"feOffset in\",\n options: [\"SourceGraphic\", \"SourceAlpha\"],\n value: \"SourceAlpha\",\n description: \"Use SourceGraphic in conjunction with feColorMatrix above\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":194,"value":"md`#### Copy the following inside the \\`\\` tag in your SVG:\n\n\\`${myFilter}\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":228,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":234,"value":"// https://riptutorial.com/svg/example/12623/shadow-filters--inner-glow\n\n// \n// \n// \n// \n// \n// ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":230,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"myFilter = `\n \n \n \n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"round = d => Math.round(100*d)/100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"rgbcolor = d3.rgb(c1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"import {slider, color, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"d3 = require('d3-color')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2f:"$2e:body"