2d:null 2e:["$","title",null,{"children":"SVG masking (or inverse clipping) | Justin Palmer | Observable"}] 33:T4bd,{ const svg = d3.select(DOM.svg(width, height)); const defs = svg.append("defs"); const artboard = svg.append("g"); const node = artboard .selectAll(".node") .data(nodes) .join("g") .attr("transform", d => `translate(${d.x}, ${d.y}) rotate(${d.r + 90})`); node .append("path") .attr("fill", (d, i) => colorScale(i)) .attr("d", symbol) // Apply the mask to the last item in the stack, the purple diamond .filter((d, i, items) => items.length - 1 === i) .attr("mask", "url(#mask)"); const mask = defs.append("mask").attr("id", "mask"); // Define the diamond shape as the visible area mask .append("path") .attr("d", symbol) .attr("fill", "white"); // Block out the purple overlap by using the red diamonds position for the mask. mask .append("path") .attr("d", symbol) .attr("fill", "black") .attr("transform", () => { // offset the mask relative to the purple diamonds position. const a = nodes[0]; const b = nodes[nodes.length - 1]; const cx = a.x - b.x; const cy = a.y - b.y; const cr = a.r - b.r; return `translate(${cy}, ${cx}) rotate(${cr})`; }); return svg.node(); }34:[] 31:{"id":"e8cb974e4585e48c","slug":"svg-masking-or-inverse-clipping","title":"SVG masking (or inverse clipping)","thumbnail":"9276f5e4084ff7ff08e20f365c2af4b73fd37bc7956d98fdd57a1c5838ae6566","access_level":"public","create_time":"$D2019-09-03T16:47:57.732Z","update_time":"$D2019-09-03T19:35:45.138Z","view_time":null,"first_public_time":"$D2019-09-03T19:37:01.673Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"f49e674e15feb629","login":"caged","name":"Justin Palmer","avatar_url":"https://avatars-next.observableusercontent.com/00a1076c4b3264a0ab009cf3700ecb5dabf1fc0ee15bd6cdb595fff8ba543dd4","tier":"starter_2024"},"version":562,"publish_version":562,"role":null,"authored":false,"authors":[{"type":"individual","id":"da33a7527f24ea8c","login":"caged","name":"Justin Palmer","avatar_url":"https://avatars-next.observableusercontent.com/00a1076c4b3264a0ab009cf3700ecb5dabf1fc0ee15bd6cdb595fff8ba543dd4","tier":null}],"members":[{"type":"individual","id":"da33a7527f24ea8c","login":"caged","name":"Justin Palmer","avatar_url":"https://avatars-next.observableusercontent.com/00a1076c4b3264a0ab009cf3700ecb5dabf1fc0ee15bd6cdb595fff8ba543dd4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"SVG masking (or inverse clipping)","cells":[{"id":0,"value":"md`# SVG masking (or inverse clipping)\nFor reasons I haven't investigated, the clipping and masking techniques used in these examples don't work in Safari.\n\nHow do we create a Pinwheel where all shapes are neatly folder underneath each other?\n\nIf we draw a pinwheel with overlapping diamonds, the last path in the stack, the purple diamond, will overlap the first path in the stack, the red diamond, leaving it obscurbed. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"{\n const svg = d3.select(DOM.svg(width, height));\n\n const artboard = svg.append(\"g\");\n\n const node = artboard\n .selectAll(\"g\")\n .data(nodes)\n .join(\"g\")\n .attr(\"transform\", d => `translate(${d.x}, ${d.y}) rotate(${d.r + 90})`);\n\n node\n .append(\"path\")\n .attr(\"fill\", (d, i) => colorScale(i))\n .attr(\"d\", symbol);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"md`## Clipping paths \n\nYour first instinct might be to try [clipping paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath). Mozilla defines <clipPath> as: \n\n> _A clipping path restricts the region to which paint can be applied. Conceptually, parts of the drawing that lie outside of the region bounded by the clipping path are not drawn._\n\nIn the example below, we are using a circle element to demonstrate how a clipPath would work in this scenerio. The clipPath obscures the parts of the diamond that live outside of the circle, but it doesn't obscure the purple diamond. For that, we need to use a [mask](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask).\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"{\n const svg = d3.select(DOM.svg(width, height));\n // const defs = svg.append(\"defs\");\n const artboard = svg.append(\"g\");\n\n const node = artboard\n .selectAll(\".node\")\n .data(nodes)\n .join(\"g\")\n .attr(\"transform\", d => `translate(${d.x}, ${d.y}) rotate(${d.r + 90})`);\n\n node\n .append(\"path\")\n .attr(\"fill\", (d, i) => colorScale(i))\n .attr(\"d\", symbol)\n .filter((d, i) => i === 0)\n .attr(\"clip-path\", \"url(#clip)\");\n\n const cpath = svg.append(\"clipPath\")\n .attr(\"id\", \"clip\");\n\n cpath\n .append(\"circle\")\n .attr(\"r\", 50)\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"md`## Masks \nMasks allow us block out the overlapping section of the purple diamond. To use a mask, we need to define both visible and invisible areas. Visible areas are specified with white, and invisible areas with black.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"symbol = d3\n .symbol()\n .size(15000)\n .type(d3.symbolDiamond)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = width / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"itemCount = 12","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"colorScale = d3\n .scaleSequential(d3.interpolateSpectral)\n .domain([0, itemCount - 1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"nodes = {\n return [...new Array(itemCount)].map((_, i) => {\n const angle = (i * (Math.PI * 2)) / itemCount;\n const r = angle * (180 / Math.PI);\n const cx = width / 2;\n const cy = height / 2;\n const innerRadius = Math.min(cx, cy) / 2;\n return {\n r,\n x: cx + Math.cos(angle) * innerRadius,\n y: cy + Math.sin(angle) * innerRadius\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"