28:null 29:["$","title",null,{"children":"Blobsplosion | Mathieu Jouhet | Observable"}] 2e:Te94,{ while (true) { // create responsive svg const s = DOM.svg(width, height); s.setAttributeNS(null, 'width', width); s.setAttributeNS(null, 'height', height); s.setAttributeNS(null, 'style', ` width: 100%; height: auto; max-width: ${width}; box-sizing: border-box; background-color: ${colors.background}; `); // append gooey effect filter const defs = svg``; defs.appendChild(blobFilter('blobs')); s.appendChild(defs); // container groups const gb1 = svg``; const gb2 = svg``; const gb3 = svg``; const gb4 = svg``; s.appendChild(gb1); s.appendChild(gb2); s.appendChild(gb3); s.appendChild(gb4); // position modifiers for width / height // we're using 0,0 coordinates to resolve iOS transform-origin quirks. const wm = 0; const hm = 0; // initialize blobs const g1 = createBlob( particles, width * wm, height * hm, distInit * 4, colors.blob4 ); const g2 = createBlob( particles, width * wm, height * hm, distInit * 3, colors.blob3 ); const g3 = createBlob( particles, width * wm, height * hm, distInit * 2, colors.blob2 ); const g4 = createBlob( particles, width * wm, height * hm, distInit, colors.blob1 ); gb1.appendChild(g1); gb2.appendChild(g2); gb3.appendChild(g3); gb4.appendChild(g4); // Initialize animation loop data let t = 0; let particlesInside = true; let circles = s.querySelectorAll('circle'); // Animate particles until none are left inside the box while(particlesInside) { t += 1; // Position everything at center and then scale const scale = Math.min((t) / 50, 1); gb1.setAttribute('transform', `translate(${width/2}, ${height/2}) scale(${scale})`); gb2.setAttribute('transform', `translate(${width/2}, ${height/2}) scale(${scale})`); gb3.setAttribute('transform', `translate(${width/2}, ${height/2}) scale(${scale})`); gb4.setAttribute('transform', `translate(${width/2}, ${height/2}) scale(${scale})`); let oneInside = false; let nextCircles = []; // Update particles circles.forEach((c, i) => { // Compute new position const angle = c.dataset.angle; const r = c.dataset.originalr * 1.035; const xpos = c.dataset.x; const ypos = c.dataset.y; const x = (r * Math.cos(angle)); const y = (r * Math.sin(angle)); // Update node c.setAttribute('cx', x); c.setAttribute('cy', y); c.setAttribute('r', Math.sqrt(t / 170) * c.dataset.destr); c.dataset.originalr = r; // Check wether the particle is inside or not const radius = ~~c.getAttribute('r'); const f = scale / 2; if ( x + width/2 > 0 - radius / f && x + width/2 < width + radius / f && y + height/2 > 0 - radius / f && y + height/2 < height + radius / f ) { oneInside = true; nextCircles.push(c); } else if(c.parentNode) { c.parentNode.removeChild(c); } }); // Next loop data circles = nextCircles; particlesInside = oneInside; // Render yield s; } } }2f:T8a1,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); if (title) form.append( html`${title}` ); form.append( html`` ); if (description) form.append( html`

${description}

` ); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }30:T11b1,html`

CSS is form,
form follows function[s],
indeed, that is a pun

`31:[] 2c:{"id":"febab27b557d14f1","slug":"blobsplosion","title":"Blobsplosion","thumbnail":"3d92e45155284f3cc064e9e10e5a4d4c0c98d52388a8cca1e33afaa5dbc370dd","access_level":"public","create_time":"$D2021-02-06T08:53:12.336Z","update_time":"$D2021-04-05T17:02:55.574Z","view_time":null,"first_public_time":"$D2021-02-06T17:04:04.145Z","has_unpublished_edits":null,"fork":false,"stars":20,"starred":false,"owner":{"type":"team","id":"56478bd83f2190f0","login":"daformat","name":"Mathieu Jouhet","avatar_url":"https://avatars-next.observableusercontent.com/c16e6bd08b4b833b3760138d4467214b19161a15acf138c3d1809c74485979ec","tier":"starter_2024"},"version":768,"publish_version":768,"role":null,"authored":false,"authors":[{"type":"individual","id":"e5f68da25a5a2366","login":"daformat","name":"Mathieu Jouhet","avatar_url":"https://avatars-next.observableusercontent.com/c16e6bd08b4b833b3760138d4467214b19161a15acf138c3d1809c74485979ec","tier":null}],"members":[{"type":"individual","id":"e5f68da25a5a2366","login":"daformat","name":"Mathieu Jouhet","avatar_url":"https://avatars-next.observableusercontent.com/c16e6bd08b4b833b3760138d4467214b19161a15acf138c3d1809c74485979ec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"3bb657500226a15a","slug":"doodles","title":"Doodles","owner":{"id":"56478bd83f2190f0","login":"daformat","name":"Mathieu Jouhet"}},"type":"notebook","body":{"title":"Blobsplosion","cells":[{"id":0,"value":"md`\n# Blobsplosion\n\nInspired by [a tweet from @Hannamations](https://twitter.com/Hannamations/status/1319828907017854977?s=20), I decided to have fun with the [svg gooey effect filter](https://css-tricks.com/gooey-effect/) to create this exploding blobs animation.\n\nThe blobs are created using circle particles, on which we're applying an svg blur + contrast filter to create the gooey effect.\n\n_Highly unoptimized, best viewed on desktop._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"viewof distInit = slider({\n min: 20,\n max: width / 8,\n step: 1,\n value: 25,\n title: \"Speed\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"viewof particles = slider({\n min: 16,\n max: 128,\n step: 1,\n value: 64,\n title: \"Particles per blob\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"viewof gooeyBlur = slider({\n min: 10,\n max: 40,\n step: 1,\n value: 26,\n title: \"Gooeyness\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"function createBlob(n = 5, x, y, r, color) {\n // const g = svg``;\n const g = svg``;\n \n // Distribute nodes around\n const nodes = distribute(n, r, x, y);\n nodes.forEach(n => {\n const nr = r + (Math.random() * r * 2);\n const c = svg`\n `;\n g.appendChild(c);\n }) \n return g;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"function distribute(total, r, xPos, yPos) {\n let num = total,\n nodes = [], \n width = (r * 2),\n height = (r * 2),\n angle,\n x,\n y;\n for (let i = 0; i < num; i++) {\n angle = (i * (i / Math.random() * i) / (num / 2)) * Math.PI;\n x = (r * 0.5 * Math.random() * Math.cos(angle)) + (width / 2);\n y = (r * 0.5 * Math.random() * Math.sin(angle)) + (width / 2);\n nodes.push({\n id: i,\n x: x,\n y: y,\n angle,\n });\n }\n return nodes;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"function blobFilter(id = 'blob') {\n return svg`\n \n \n \n \n \n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"width = 980","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"height = 550","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"function slider(config = {}) {\n let {\n min = 0,\n max = 1,\n value = (max + min) / 2,\n step = \"any\",\n precision = 2,\n title,\n description,\n disabled,\n getValue,\n format,\n display,\n submit\n } = typeof config === \"number\" ? { value: config } : config;\n precision = Math.pow(10, precision);\n if (!getValue)\n getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n return input({\n type: \"range\",\n title,\n description,\n submit,\n format,\n display,\n attributes: { min, max, step, disabled, value },\n getValue\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"colors = ({\n background: \"#c9b0b1\",\n blob1: \"#f2568f\",\n blob2: \"#f5ffff\",\n blob3: \"#63d1ef\",\n blob4: \"#ead6fd\"\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"md`\n## Want some more?\nLearn [how to draw squircle shapes with svg and javascript](https://observablehq.com/@daformat/draw-squircle-shapes-with-svg-javascript)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"{\n await visibility();\n return html`\n \n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2d:"$2c:body"