2c:null 2d:["$","title",null,{"children":"Subtracting SVG paths | Silvano Stralla | Observable"}] 32:T65e,lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nulla justo, fringilla et quam at, sodales tincidunt erat. Vestibulum ullamcorper tortor lectus, vel fringilla dolor consequat sed. Nullam sollicitudin id ipsum at cursus. Etiam nulla nisl, laoreet sit amet odio id, rutrum bibendum libero. Integer hendrerit, enim a tincidunt volutpat, enim libero lobortis nulla, ac ultrices velit ante quis est. Duis ultricies, mauris non bibendum dictum, libero dolor accumsan libero, in ultrices dui tortor vitae justo. Vivamus convallis id nisi sed interdum. Donec pulvinar [suscipit justo](javascript:void(0)), vitae lacinia ipsum tincidunt id. Etiam augue ex, convallis a cursus eget, dictum auctor dolor. In posuere feugiat dui id vestibulum. Vivamus non justo aliquam velit varius aliquam. Phasellus eu molestie nisl. Donec ullamcorper risus quam, a commodo neque vulputate vel. Fusce suscipit scelerisque nisl, nec ullamcorper libero dapibus sed. Proin sit amet scelerisque sem. Aenean a nulla eu felis fringilla mollis nec nec augue. Vivamus id volutpat quam. Maecenas nisi metus, dictum ut sem sit amet, interdum pellentesque justo. In quis volutpat velit. Aliquam quis cursus dolor. Proin at aliquam sapien. Ut vestibulum nulla ut sapien ultrices, egestas cursus orci vulputate. Etiam tempor massa eget est placerat, sit amet egestas metus blandit. Nullam posuere elit metus. Sed eget semper dui, et sagittis ipsum. Quisque lorem nulla, bibendum non rhoncus eu, pharetra eget justo. Fusce tempor varius nisi vel ornare. Nam a lorem nulla. Pellentesque condimentum sem in turpis maximus, non viverra felis rhoncus.`33:[] 30:{"id":"392de7c8e2aa19b9","slug":null,"title":"Subtracting SVG paths","thumbnail":"3f0b09cc3dbcda23dc033064a415dc3c2b74a32ef378b8614d379ad0a8739dfb","access_level":"public","create_time":"$D2020-04-22T12:33:51.133Z","update_time":"$D2024-12-05T16:38:06.409Z","view_time":null,"first_public_time":"$D2023-04-26T12:10:27.165Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"5abe88ecb58817c9","login":"sistrall","name":"Silvano Stralla","avatar_url":"https://avatars-next.observableusercontent.com/4bc3241b306f7b5a6287850682c0556142f5d03336f0b6669f83d5f8ebc09b39","tier":"starter_2024"},"version":419,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2c61dbc5f1303f90","login":"sistrall","name":"Silvano Stralla","avatar_url":"https://avatars-next.observableusercontent.com/4bc3241b306f7b5a6287850682c0556142f5d03336f0b6669f83d5f8ebc09b39","tier":null}],"members":[{"type":"individual","id":"2c61dbc5f1303f90","login":"sistrall","name":"Silvano Stralla","avatar_url":"https://avatars-next.observableusercontent.com/4bc3241b306f7b5a6287850682c0556142f5d03336f0b6669f83d5f8ebc09b39","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Subtracting SVG paths","cells":[{"id":0,"value":"md`# Subtracting SVG paths\n\nHey... you should be probably **clicking somewhere in the rectangle below here!**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"html`

${content}

${interlude}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"curtainCount = 12","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"interlude = d3.select(DOM.element('div'))\n .on(\"click\", function() {\n const { layerX, layerY } = d3.event;\n\n d3.select(this).selectAll('defs mask circle')\n .attr('r', 0)\n .attr(\"cx\", layerX)\n .attr(\"cy\", layerY)\n .transition()\n .delay((d, i) => i * 50)\n .ease(d3.easeCubicInOut)\n .duration(1000)\n .attr(\"r\", (d, i) => width - i * 10); \n })\n .call(div => div.selectAll('svg')\n .data(d3.range(curtainCount))\n .join('svg')\n .call(curtain))\n .node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"curtain = s => s\n .attr(\"width\", \"100%\")\n .attr(\"height\", \"100%\")\n .attr(\"style\", (d, i) => `\n z-index: ${curtainCount - d};\n `)\n .call(s => s.append('defs').call(defs))\n .call(s => s.append('rect').call(rect))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"defs = d => d\n .call(d => d\n .append('mask')\n .attr('id', (d, i) => `mask-${i}`)\n .call(m => m\n .append('rect')\n .attr('width', '100%')\n .attr('height', '100%')\n .attr('fill', 'white'))\n .call(m => m\n .append('circle')\n .attr('r', 0)\n .attr('cx', 0)\n .attr('cy', 0)\n .attr('fill', 'black')))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"rect = r => r\n .attr('width', \"100%\")\n .attr('height', \"100%\")\n .attr('mask', (d, i) => `url(#mask-${i})`)\n .attr('fill', fill)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"fill = d3.scaleSequential(d3.interpolateCool).domain([0, curtainCount]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"content = md`${lorem}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"text = html`

${md`${lorem}`}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"height = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"