2b:null 2c:["$","title",null,{"children":"Interactive SVG | KyungYeol Kim | Observable"}] 31:T9a4,{ let doc; if (!this) { const text = await FileAttachment("example@5.svg").text(); doc = html`

${text}

`; [54, 55, 56, 57, 58].forEach(nth => { const el = doc.querySelector(`svg > g > path:nth-child(${nth})`); el.setAttribute('opacity', 0); el.setAttribute('fill-opacity', 0); }); } else { doc = this; } [37, 38, 39, 40, 41, 42, 43].forEach(nth => { const el = doc.querySelector(`svg > g > *:nth-child(${nth})`); if (nth !== 40) { el.setAttribute('stroke', highlight.locals ? '#ffeca9' : '#000'); } el.setAttribute('fill', highlight.locals ? '#ffeca9' : '#000'); el.setAttribute('opacity', highlight.enter ? 0 : 1); }); [54, 55, 56, 57, 58].forEach(nth => { const el = doc.querySelector(`svg > g > *:nth-child(${nth})`); el.setAttribute('stroke', highlight.enter ? '#c7e8ac' : '#000'); if (nth == 55 || nth == 57) { el.setAttribute('fill', highlight.enter ? '#c7e8ac' : '#000'); } el.setAttribute('opacity', highlight.enter ? 1 : 0); el.setAttribute('fill-opacity', highlight.enter ? 1 : 0); }); [44, 45, 46, 47, 48, 49, 27, 28, 29, 30, 31, 32, 25, 26].forEach(nth => { const el = doc.querySelector(`svg > g > *:nth-child(${nth})`); el.setAttribute('stroke', highlight.enter ? '#c7e8ac' : '#000'); if (nth !== 44 && nth !== 30) { el.setAttribute('fill', highlight.enter ? '#c7e8ac' : '#000'); } }); [18].forEach(nth => { const el = doc.querySelector(`svg > g > path:nth-child(${nth})`); el.setAttribute('fill', highlight.ssh ? '#c1e4f7' : '#fff'); }); [50].forEach(nth => { const el = doc.querySelector(`svg > g > path:nth-child(${nth})`); el.setAttribute('fill', highlight.host ? '#f9d2de' : '#fff'); el.setAttribute('fill-opacity', highlight.host ? 1 : 0); }); [ { nth: 35, key: 'locals' }, { nth: 33, key: 'locals' }, { nth: 10, key: 'remote' }, { nth: 6, key: 'remote' } ].forEach(({ nth, key, color }) => { const el = doc.querySelector(`svg > g > path:nth-child(${nth})`); if (highlight.enter) { el.setAttribute('fill', '#c7e8ac'); } else if (highlight.locals) { el.setAttribute('fill', key === 'locals' ? '#ffeca9' : '#fff'); } else if (highlight.remote) { el.setAttribute('fill', key === 'remote' ? '#d1bcd2' : '#fff'); } else { el.setAttribute('fill', '#fff'); } }); return doc; }32:[{"id":"4badaae63dcb754e78f27f5d38e536bbfdaa8d69b2d6d95d49a851ad5b3419cb900292664419349c8ba2d863ebe17587c6b017955e21ba4f9fdf77e4056711b8","href":"https://static.observableusercontent.com/files/4badaae63dcb754e78f27f5d38e536bbfdaa8d69b2d6d95d49a851ad5b3419cb900292664419349c8ba2d863ebe17587c6b017955e21ba4f9fdf77e4056711b8","name":"example@5.svg","type":"image/svg+xml","lastModified":1584294288045.972,"size":20538}] 2f:{"id":"1188b1fd5c6945aa","slug":"interactive-svg","title":"Interactive SVG","thumbnail":"1bdce81e1034f01f9ce355e272571d7d9dbd60f8560546af7baff6e6fab45073","access_level":"public","create_time":"$D2020-03-14T18:18:52.158Z","update_time":"$D2024-02-19T06:33:08.020Z","view_time":null,"first_public_time":"$D2020-03-15T18:17:59.135Z","fork":false,"stars":20,"starred":false,"owner":{"type":"team","id":"56a62604da372f41","login":"chitacan","name":"KyungYeol Kim","avatar_url":"https://avatars-next.observableusercontent.com/ebe2bc4618021a6392db1d0169bbe2af3520871861d6f0659384f97da78200ce","tier":"starter_2024"},"version":197,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e4a45eb07cd703f7","login":"chitacan","name":"KyungYeol Kim","avatar_url":"https://avatars-next.observableusercontent.com/ebe2bc4618021a6392db1d0169bbe2af3520871861d6f0659384f97da78200ce","tier":null}],"members":[{"type":"individual","id":"e4a45eb07cd703f7","login":"chitacan","name":"KyungYeol Kim","avatar_url":"https://avatars-next.observableusercontent.com/ebe2bc4618021a6392db1d0169bbe2af3520871861d6f0659384f97da78200ce","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"title":"Interactive SVG","cells":[{"id":0,"value":"md`# Interactive SVG\n\nwhich is exported from [Lucidchart](https://lucidchart.com)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"html`

$ ${highlighter('ssh', viewof highlight)} -L ${highlighter(\n  '4369',\n  viewof highlight,\n  'remote'\n)}:${highlighter(\n  'localhost:4369',\n  viewof highlight,\n  'locals'\n)} -L ${highlighter('53083', viewof highlight, 'remote')}:${highlighter(\n  'locahost:53083',\n  viewof highlight,\n  'locals'\n)} -T ${highlighter(\n  'worker.myapp.com',\n  viewof highlight,\n  'host'\n)}

${highlighter(\n 'Enter',\n viewof highlight,\n 'enter'\n)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"viewof highlight = new View({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"highlighter = (text, view, key = text) => {\n const el = text.startsWith('<')\n ? html`${text}`\n : html`${text}`;\n el.addEventListener('mouseover', () => {\n view.value = { ...view.value, [key]: true };\n });\n el.addEventListener('mouseout', () => {\n view.value = { ...view.value, [key]: false };\n });\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import { View } from '@mbostock/synchronized-views'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"