2e:["$","title",null,{"children":"SVG filters and clip | Nicolas Lambert | Observable"}] 33:[] 31:{"id":"a9770fc9a50351c2","slug":"effect","title":"SVG filters and clip","thumbnail":"c93e24f2b16930d2cd355e8834c13b306433a402ce9f9ef82e3868f3adb805d0","access_level":"public","create_time":"$D2023-12-14T07:06:44.092Z","update_time":"$D2026-09-04T11:12:42.583Z","view_time":null,"first_public_time":"$D2023-12-15T12:20:21.030Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":"starter_2024"},"version":331,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}],"members":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"bfb3f0e24e42a069","slug":"geoviz","title":"geoviz","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"type":"notebook","body":{"title":"SVG filters and clip","cells":[{"id":0,"value":"# SVG filters and clip","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":233,"value":"🆕 *Updated for Notebook 2.0*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"The SVG format is really great for creating beautiful, aesthetic maps. You can modify thicknesses, colors, opacities, define complex dotted lines, etc. The SVG format also allows the use of filters, defined in SVG by the `` element, which must be placed in the `` section of the file. In `geoviz`, a set of useful filters has been predefined. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"## 1 - Blur","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"The effect.blur() function is used to define a blur filter. The id parameter defines the filter identifier. The stdDeviation parameter determines the blur range.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"let stdDeviation = view(Inputs.range([0, 15], {\n label: \"stdDeviation\",\n step: 0.1,\n value: 5\n}))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"let svg = viz.create({ domain: aus, width: 600, margin: 20 });\n\n // Filter definition\n svg.effect.blur({ id: \"blur\", stdDeviation: stdDeviation });\n\n // Layer display with filter\n svg.path({\n datum: aus,\n fill: \"#38896F\",\n filter: \"url(#blur)\"\n });\n\n // Or directly\n // svg.path({ datum: aus, fill: \"#38896F\", filter: svg.defs.blur({ stdDeviation: stdDeviation }) });\n\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"## 2 - Shadow","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":199,"value":"The effect.shadow() function can be used to draw a drop shadow","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":212,"value":"let stdDeviation2 = view(Inputs.range([0, 15], {\n label: \"stdDeviation\",\n step: 0.1,\n value: 1.5\n}))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"let dx = view(Inputs.range([0, 15], {\n label: \"dx\",\n step: 1,\n value: 4\n}))\n","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"let dy = view(Inputs.range([0, 15], {\n label: \"dy\",\n step: 1,\n value: 4\n}))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"let svg = viz.create({ domain: aus, width: 600, margin: 20 });\n\n // Shadow Effect\n svg.path({\n datum: aus,\n fill: \"black\",\n fillOpacity: 0.6,\n filter: svg.effect.shadow({\n stdDeviation: stdDeviation2,\n fill: \"black\",\n fillOpacity: 0.7,\n dx: dx,\n dy: dy\n })\n });\n\n // Australia\n svg.path({ datum: aus, fill: \"#38896F\" });\n\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"## 3 - radialGradient","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"With effect.radialGradient(), you can create a radial gradient. In addition to the filter id, the function takes several parameters as input. color1 and color2 define the gradient colors. The parameters offset1, offset2, fx and fy define how the gradation is performed. Then, you have to apply it on the fill attribute.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":119,"value":"let color1 = view(Inputs.color({ label: \"color1\", value: \"#7db054\" }))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"let color2 = view(Inputs.color({ label: \"color2\", value: \"#38896F\" }))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"let offset1 = view(Inputs.range([0, 100], {\n label: \"offset1\",\n step: 1,\n value: 50\n}))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"let offset2 = view(Inputs.range([0, 100], {\n label: \"offset2\",\n step: 1,\n value: 100\n}))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"viewof fx = Inputs.range([0, 100], {\n label: \"fx\",\n step: 1,\n value: 50\n})","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"let fy = view(Inputs.range([0, 100], {\n label: \"fy\",\n step: 1,\n value: 50\n}))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"let svg = viz.create({ domain: aus, width: 600, margin: 20 });\n\n svg.path({\n datum: aus,\n fill: svg.effect.radialGradient({\n color1,\n color2,\n offset1,\n offset2,\n fx,\n fy\n })\n });\n\n display(svg.render())","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"## 4 - clipPath","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":159,"value":"The `` SVG element defines a clipping path, to be used by the clip-path property. A clipping path restricts the region to which paint can be applied. In `geoviz`, you can add a clipPath element with the effect.clipPath() function.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":183,"value":"*Please note that the clipPath element is valid for the entire web page, not just within this svg container.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"let svg = viz.create({\n domain: aus,\n width: 600,\n margin: 20,\n projection: \"mercator\"\n });\n\n // clip definition\n const ausclip = svg.effect.clipPath({ datum: aus });\n\n // Clipped tiles\n svg.tile({ url: \"worldStreet\", clipPath: ausclip });\n\n // Outline of australia\n svg.path({\n data: aus,\n fill: \"none\",\n stroke: \"#38896F\",\n strokeWidth: 1\n });\n\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"import { style, disclaimer, aus, viz } from \"observable:@neocartocnrs/geoviz-appendix\"","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2","titling":"auto"}} 32:"$31:body" 2d:E{"digest":"NEXT_REDIRECT;replace;/@neocarto/effect;307;"}