2b:null 2c:["$","title",null,{"children":"Gooey filter via a data url | Kelley van Evert | Observable"}] 31:T4a9,md`**Note:** the data url technique turns out not to be a necessary resort, because we can also use the DOM.uid API as so: ${(() => { const svg = d3.select(DOM.svg(width, 200)); svg.style('padding-top', '5px'); const filter = DOM.uid('gooey'); svg.append('defs').html(` `); svg.attr('filter', filter); const data = [ { x:140, y:50, r:20, c:'#40e5a0' }, { x:300, y:110, r:40, c:'#408ae5' }, ]; const circles = svg.selectAll('circle').data(data); circles.enter().append('circle') .attr('cx', d => d.x).attr('cy', d => d.y).attr('fill', d => d.c) .merge(circles) .interrupt().transition().duration(200) .attr('r', d => d.r) const mc = svg.append('circle') .attr('r', 50).attr('fill', '#d6863b') svg.on('mousemove', function () { const p = d3.mouse(this); mc.attr('cx', p[0]).attr('cy', p[1]) }); return svg.node() })()}`32:[] 2f:{"id":"a324a6d20e593fae","slug":"gooey-filter-via-a-data-url","title":"Gooey filter via a data url","thumbnail":"bd9e2f5df2d01dfea05332501dbc8dea365c9a4e639ba120ab30fe02d54682d4","access_level":"public","create_time":"$D2018-04-21T11:38:27.800Z","update_time":"$D2018-04-22T18:07:11.583Z","view_time":null,"first_public_time":"$D2018-04-21T11:41:06.996Z","fork":{"id":"0da06d9f52fcef45","slug":"gooey-glyph-morphing","title":"Gooey glyph morphing?","owner":{"id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert"}},"stars":2,"starred":false,"owner":{"type":"team","id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":"starter_2024"},"version":1544,"publish_version":1544,"role":null,"authored":false,"authors":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null}],"members":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Gooey filter via a data url","cells":[{"id":0,"value":"md`# Gooey filter via a data url`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1511,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1541,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1376,"value":"filter = {\n const svg = ``;\n \n const blob = new Blob([svg], { type: 'image/svg+xml' });\n const url = URL.createObjectURL(blob);\n //return url;\n\n const filter = `url('${url}#gooey')`;\n return filter;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1350,"value":"{\n const svg = d3.select(DOM.svg(width, 200));\n svg.attr('filter', filter)\n \n const data = [\n { x:140, y:50, r:20, c:'#40e5a0' },\n { x:300, y:110, r:40, c:'#408ae5' },\n ];\n \n const circles = svg.selectAll('circle').data(data);\n circles.enter().append('circle')\n .attr('cx', d => d.x).attr('cy', d => d.y).attr('fill', d => d.c)\n .merge(circles)\n .interrupt().transition().duration(200)\n .attr('r', d => d.r)\n \n const mc = svg.append('circle')\n .attr('r', 50).attr('fill', '#d6863b')\n \n svg.on('mousemove', function () {\n const p = d3.mouse(this);\n mc.attr('cx', p[0]).attr('cy', p[1])\n });\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1160,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"d3 = require('https://d3js.org/d3.v5.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"