28:null 29:["$","title",null,{"children":"Disasm svgs | dduyg | Observable"}] 2e:Td8a,viewof selectedSource = { const sources = [ { key: "svg1", label: "mermaid", url: svg1_url }, { key: "svg2", label: "mermaid altessa", url: svg2_url }, { key: "svg3", label: "merman", url: svg3_url }, { key: "custom", label: "customSvg", url: null } ]; const style = html``; let value = "svg1"; const thumb = html`

`; function updateThumb(key) { const s = sources.find((x) => x.key === key); if (s?.url) { thumb.innerHTML = ` ${s.label}

`; } else { thumb.innerHTML = `✏️`; } } const select = html``; const customWrap = html``; select.addEventListener("change", () => { value = select.value; updateThumb(value); customWrap.style.display = value === "custom" ? "" : "none"; wrap.dispatchEvent(new CustomEvent("input", { bubbles: true })); }); const wrap = html``; return Object.defineProperty(wrap, "value", { get: () => value }); }2f:Tb6e,{ const style = html``; function initSliders(root) { root.querySelectorAll("input[type=range]").forEach((r) => { const update = () => { const min = +r.min || 0; const max = +r.max || 100; const val = +r.value; r.style.setProperty("--pct", ((val - min) / (max - min)) * 100 + "%"); }; update(); r.addEventListener("input", update); }); } const buildWrap = html`

Build options

${viewof buildOptions}

`; const optWrap = html`

Display options

${viewof options}

`; const panel = html`

${style} ${buildWrap} ${optWrap}

`; requestAnimationFrame(() => initSliders(panel)); panel.addEventListener("input", () => requestAnimationFrame(() => initSliders(panel)) ); return panel; }30:T6bd,viewof chart = { const markup = currentSvg?.trim(); if (!markup) { const div = htl.html`

No SVG loaded yet.

`; return Object.defineProperty(div, "value", { get: () => null }); } let element; try { element = new DOMParser().parseFromString( markup, "image/svg+xml" ).documentElement; } catch (err) { const div = htl.html`

⚠ Invalid SVG.

`; return Object.defineProperty(div, "value", { get: () => null }); } const count = getCandidates(element).length; const plural = (n, s) => `${n} ${s}${n === 1 ? "" : "s"}`; const clips = element.querySelectorAll("clipPath").length; const clipUses = element.querySelectorAll("[clip-path]").length; const clipWarn = !clips ? "" : htl.html` · ⚠️ ${plural( clips, "clip path" )} on ${plural(clipUses, "element")}`; const wrap = htl.html``; const show = htl.html` Show original `; show.onchange = () => { wrap.style.display = show.firstElementChild.checked ? "" : "none"; }; const preview = htl.html`

${count} elements${clipWarn} · ${show}
${wrap}

`; preview.oninput = (e) => e.stopImmediatePropagation(); return Object.defineProperty(preview, "value", { get: () => element }); }31:[] 2c:{"id":"1bbcbc35567a0f06","slug":"svg-disassembly-room","title":"Disasm svgs","thumbnail":"e5a5e46d31bf1353f411216c0ed527c0ead545ccc19da70df52c5b49e84f2b7f","access_level":"public","create_time":"$D2026-06-09T12:58:50.741Z","update_time":"$D2026-06-10T09:03:15.722Z","view_time":null,"first_public_time":"$D2026-06-09T17:01:23.351Z","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":194,"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":"Disasm svgs","cells":[{"id":0,"value":"# Disasm *svgs*\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"output","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"

\n\n___\n#### ├─dependecies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"import { getCandidates, viewof buildOptions, viewof options, output } with {\n chart,\n getDimensions\n} from \"@mootari/plots-disassembled\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"svg1_url = \"https://cdn.jsdelivr.net/gh/dduyg/LiminalLoop@shelf/0-6/mermaid-light.svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"svg2_url = \"https://cdn.jsdelivr.net/gh/dduyg/LiminalLoop@shelf/0-6/mermaid_medium-light.svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"svg3_url = \"https://cdn.jsdelivr.net/gh/dduyg/LiminalLoop@shelf/0-6/merman-medium.svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"svg1 = fetch(svg1_url).then((r) => r.text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"svg2 = fetch(svg2_url).then((r) => r.text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"svg3 = fetch(svg3_url).then((r) => r.text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"viewof customSvg = Inputs.textarea({\n label: \"Custom SVG\",\n rows: 9,\n placeholder: \"paste your SVG code here...\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"function getDimensions(svg) {\n return svg?.viewBox?.baseVal ?? { width: 0, height: 0 };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"currentSvg = {\n if (selectedSource === \"svg1\") return svg1;\n if (selectedSource === \"svg2\") return svg2;\n if (selectedSource === \"svg3\") return svg3;\n return customSvg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2d:"$2c:body"