28:null 29:["$","title",null,{"children":"Holo Geometrics | dduyg | Observable"}] 2e:T1d8b,{ trigger; const container = html`

`; const svgElement = SVG(container.querySelector(".canvas")); const g = svgElement.group(); const { width, height } = svgElement.viewbox(); const numStripes = 20; const spacing = width / numStripes; function random(min, max, snap) { const val = Math.random() * (max - min) + min; if (snap) return Math.round(val / snap) * snap; return val; } function randomChoice(arr) { return arr[Math.floor(Math.random() * arr.length)]; } function generate() { g.clear(); let grid = g.group(); grid.attr("opacity", 0.2); for (let i = 0; i < width; i += spacing) { grid .line(i, 0, i, height) .stroke({ color: "#1f272f", width: 0.5, linecap: "round" }); grid .line(height, i, 0, i) .stroke({ color: "#1f272f", width: 0.5, linecap: "round" }); } let firstCircle = { x: random(0, width - 100), y: random(0, height - 100), r: random(120, 180, 5) }; g.circle(firstCircle.r) .move(firstCircle.x, firstCircle.y) .attr("mask", `url(#maskedHeavyNoise-${trigger})`) .attr("fill", `url(#black-${trigger})`) .attr("class", "semi"); let squares = g.group(); squares.attr("class", "squares"); let maxSquares = 26; for (let i = 0; i < maxSquares; i++) { squares .rect(spacing, spacing) .fill("#1f272f") .move(random(0, width, spacing), random(0, width, spacing)); } let mess = g .rect(width, width) .fill("#000") .attr("filter", `url(#noise2-${trigger})`) .opacity(0.1); let lines = g.group(); lines.attr("mask", `url(#maskedNoise-${trigger})`).attr("class", "pattern"); let picker = random(0, 6, 1); for (let i = 0; i < width; i += spacing) { let line; switch (picker) { case 0: line = lines.line(i, i, 0, height); break; case 1: line = lines.line(0, 0, i, height); break; case 2: line = lines.line(i, i, i, height); break; case 3: line = lines.line(0, height, i, i); break; case 4: line = lines.line(i, 0, height, i); break; case 5: line = lines.line(i, height, 0, i); break; case 6: line = lines.line(i, height, height, i); break; } line.stroke({ color: "#1f272f", width: 0.5, linecap: "round" }); } let noOfRects = random(1, 5); let rectX = random(0, width - 50); let rectY = random(0, width - 50); let rectW = random(20, width / 2.3); let rectH = random(20, width / 2.3); let screens = g.group().attr("class", "screens"); for (let i = 0; i < noOfRects; i += 1) { var rect = screens .rect(rectH, rectW) .move(rectX, rectY) .stroke("#1f272f") .fill("#eee2d5"); rectX += 5; rectY -= 5; } let circles = []; function doesCircleHaveACollision(circle) { for (var i = 0; i < circles.length; i++) { var otherCircle = circles[i]; var a = circle.r + otherCircle.r; var x = circle.x - otherCircle.x; var y = circle.y - otherCircle.y; if (a >= Math.sqrt(x * x + y * y)) { return true; } } } let maxTries = 50; let tries = 0; while (tries <= maxTries) { let newCircle = { x: random(-50, width - 20), y: random(-50, height - 20), r: random(10, 60, 5) }; if (!doesCircleHaveACollision(newCircle)) { circles.push(newCircle); g.circle(newCircle.r) .move(newCircle.x, newCircle.y) .attr("mask", `url(#maskedHeavyNoise-${trigger})`) .attr( "fill", `url(#${randomChoice(["purple", "pink", "blue"])}-${trigger})` ); } tries++; } } function animate() { if (window.gsap && window.gsap.set) { window.gsap.set(container.querySelectorAll(".semi"), { rotate: randomChoice([90, -90, 0]), transformOrigin: "center" }); let t = window.gsap.timeline({ delay: 0.3, defaults: { ease: "sine.out" } }); t.from( [ ...container.querySelectorAll(".screens > *"), ...container.querySelectorAll("circle") ], { opacity: 0, duration: 1 } ) .from(container.querySelectorAll(".pattern > *"), { stagger: 0.1, drawSVG: 0 }) .from( container.querySelectorAll(".squares > *"), { opacity: 0, stagger: 0.05, transformOrigin: "center", duration: 0.1 }, 0.5 ); } } generate(); setTimeout(() => animate(), 100); return container; }2f:T594,viewof trigger = { const container = html`

`; const button = container.querySelector("button"); button.onmouseover = () => { button.querySelector("span").style.transform = "translate(0, 0)"; }; button.onmouseout = () => { button.querySelector("span").style.transform = "translate(-0.1rem, -0.1rem)"; }; let value = 0; button.onclick = () => { value = Math.random(); container.value = value; container.dispatchEvent(new Event("input")); }; return container; }30:[] 2c:{"id":"476c34993947eddd","slug":"holo-geometrics","title":"Holo Geometrics","thumbnail":"25cb39f0324479e78703d080c5585b737e5f1273851ad3733628f7c9337d419a","access_level":"public","create_time":"$D2026-01-30T20:37:42.519Z","update_time":"$D2026-01-30T21:35:00.216Z","view_time":null,"first_public_time":"$D2026-01-30T20:37:42.519Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1fa0c77b14fd90d0","login":"dduyg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8922701a2d973be0158565df96ce0b2fe9ffd55df053350d59973a811bac06af","tier":"starter_2024"},"version":116,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"248f116c85e550e3","login":"dduyg","name":"Duygu Dağdelen","avatar_url":"https://avatars-next.observableusercontent.com/ca098eb30fb37c129368c39d70e98a9a8444cfaa7496c72781905ac410af8cad","tier":null}],"members":[{"type":"team","id":"1fa0c77b14fd90d0","login":"dduyg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8922701a2d973be0158565df96ce0b2fe9ffd55df053350d59973a811bac06af","tier":"starter_2024","role":"editor"},{"type":"individual","id":"248f116c85e550e3","login":"dduyg","name":"Duygu Dağdelen","avatar_url":"https://avatars-next.observableusercontent.com/ca098eb30fb37c129368c39d70e98a9a8444cfaa7496c72781905ac410af8cad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Holo Geometrics","cells":[{"id":63,"value":"# Holo Geometrics\nA geometric grid experiment, trying stuff out from 🦄, click to create a new abstract composition with geometric patterns, gradients, and noise effects.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"

\n\n/imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"SVG = {\n const module = await import(\n \"https://unpkg.com/@svgdotjs/svg.js@3.2.0/dist/svg.esm.js\"\n );\n return module.SVG;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"gsap = {\n const script = document.createElement(\"script\");\n script.src = \"https://unpkg.com/gsap@3/dist/gsap.min.js\";\n document.head.appendChild(script);\n await new Promise((resolve) => (script.onload = resolve));\n return window.gsap;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"