2c:null 2d:["$","title",null,{"children":"SVG for Factorio Wire Icons | Mikal Hitsøy Henriksen | Observable"}] 32:Td9b,function wire3(x,y,t,z) { const paths = [] let d, dash, dasharray, path init(x,y,t,z) function init(_x, _y, _t=0, _z) { d = ['M', x=_x, y=_y] t = _t * TwoPi dash = { z: _z ?? dash?.z ?? 0, l: 0, } dasharray = [dash] const id = Math.random() .toString(36).substring(2) paths.push(path = {id, d, dasharray}) } function dz(_z) { if (dash.l > 0) { dash = { z: dash.z, l: 0 } dasharray.push(dash) } dash.z += _z } function draw(l, ...ds) { dash.l += l d.push(...ds) } const forward = l => draw(l, 'L', (x += l * cos(t)), (y += l * sin(t)) ) function arc(frac, r, sign) { const rad = frac * TwoPi const t0 = t t += rad * sign; draw(rad * r, 'A', r, r, 0, +(frac > 0.5), +(sign === 1), x += r * (sin(t) - sin(t0)) * sign, y += r * (cos(t0) - cos(t)) * sign ) } function compose(z, path) { const classes = ['wire'] const { id, dasharray, start, end } = path if (start && dasharray.at(0).z === z) classes.push('has-start-' + start) if (end && dasharray.at(-1).z === z) classes.push('has-end-' + end) const dashes = [] let on = true; let dist = 0 for (const bit of dasharray) { const active = bit.z === z; if (active === on) { dist += bit.l } else { dashes.push(dist); dist = bit.l; on = active; } } // omit if whole path is hidden if (dashes.length <= 1 && dashes[0] === 0) return [] // account for rounding precision by extending last segment dashes.push(dist + 1) return { id, classes, dashes } } function render(color="red") { const f = svg.fragment const defs = paths.map(p => ({ id: p.id, d:p.d.map(round).join(' ') })).map(p => f``) // distinct z values, ascending const zs = Array.from(new Set( paths.flatMap(p => p.dasharray).map(d => d.z) )).sort((a, b) => a - b); // compose paths into dashes per z, // two variants each, dasharray // extended to prevent seams const composed = cross(zs, paths, compose).flat() const layers = [['shell', 0.5],['core', 1]] const dashArrays = cross( composed, layers, (it, [type, margin]) => ({ href: '#' + it.id, class: [type, ...it.classes] .join(' '), 'stroke-dasharray': extend(it.dashes, margin) .map(round) .join(' '), })) return svg` ${defs} ${dashArrays.map(array => f`` )} ` } const actions = { paths, draw, startTip: () => path.start = 'tip', endTip: () => path.end = 'tip', over: () => dz(1), under: () => dz(-1), f: forward, cw: (frac,r=10) => arc(frac, r, 1), ccw:(frac,r=10) => arc(frac, r, -1), tele: init, svg: render, } const terminals = ['svg','paths'] const proxy = new Proxy({}, { get(_, prop) { if (!(prop in actions)) return undefined; const action = actions[prop] if (typeof action != 'function') return action if (terminals.includes(prop)) return action if (action.length === 0) { action() return proxy } return (...args) => { action(...args) return proxy }; } }); return proxy } 33:T529,const template = (...contents) => svg``34:T430,async function rasterizeSVG(svgElement, width = 56, height = 56, upscale = 4) { const serializer = new XMLSerializer(); let svgString = serializer.serializeToString(svgElement); const dataUrl = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgString); return new Promise((resolve, reject) => { const img = new Image(); img.crossOrigin = 'anonymous'; // Prevents canvas staining img.onload = () => { // Create offscreen canvas set to the game's asset target resolution const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d'); ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high'; // Draw image onto canvas (automatically handles raster anti-aliasing) ctx.drawImage(img, 0, 0, width, height); // Resolve as a PNG Data URL resolve(canvas.toDataURL('image/png')); }; img.onerror = (err) => reject(new Error("Failed to rasterize SVG: " + err)); img.src = dataUrl; }); }35:[{"id":"f4ed3331a271d5dc355763d0c6afc2e591da2d00a5c37994ed98f4c45ab7032c4ad293c3241903040760856298d324cf7c24daa8c5866bd0887586215bfc2b37","href":"https://static.observableusercontent.com/files/f4ed3331a271d5dc355763d0c6afc2e591da2d00a5c37994ed98f4c45ab7032c4ad293c3241903040760856298d324cf7c24daa8c5866bd0887586215bfc2b37","name":"new-green-wire-x56.png","type":"image/png","lastModified":1732994622215,"size":1605},{"id":"61e74155f27fefbc55c8294f99a6b5044eaeeb047f22eb64b35181f769228b65e4a0299b744a26c3a8fc622ba834670da326a564816b67f98f24af151a4eb909","href":"https://static.observableusercontent.com/files/61e74155f27fefbc55c8294f99a6b5044eaeeb047f22eb64b35181f769228b65e4a0299b744a26c3a8fc622ba834670da326a564816b67f98f24af151a4eb909","name":"new-red-wire-x56.png","type":"image/png","lastModified":1732994622214,"size":1475}] 30:{"id":"918a8095425772d9","slug":"svg-for-factorio-wire-icons","title":"SVG for Factorio Wire Icons","thumbnail":"c6fa7e12fddf7ed84001e28fd4511ffab75a0f943079342b3ad8bfa3ee69dc6d","access_level":"public","create_time":"$D2026-07-27T13:41:17.624Z","update_time":"$D2026-08-08T17:48:24.770Z","view_time":null,"first_public_time":"$D2026-08-05T14:10:33.132Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e334db7e51a78dca","login":"supermikal","name":"Mikal Hitsøy Henriksen","avatar_url":"https://avatars-next.observableusercontent.com/3494bf57b7ab1aa05cce1a2f4a53a5849448d33bb9fa90da0d1ea74a58548cdb","tier":"starter_2024"},"version":1879,"publish_version":1879,"role":null,"authored":false,"authors":[{"type":"individual","id":"dd5ad0253f4ceb03","login":"supermikal","name":"Mikal Hitsøy Henriksen","avatar_url":"https://avatars-next.observableusercontent.com/3494bf57b7ab1aa05cce1a2f4a53a5849448d33bb9fa90da0d1ea74a58548cdb","tier":null}],"members":[{"type":"team","id":"e334db7e51a78dca","login":"supermikal","name":"Mikal Hitsøy Henriksen","avatar_url":"https://avatars-next.observableusercontent.com/3494bf57b7ab1aa05cce1a2f4a53a5849448d33bb9fa90da0d1ea74a58548cdb","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SVG for Factorio Wire Icons","cells":[{"id":78,"value":"# SVG for Factorio Wire Icons\nHeads up:\n# !!! PROJECT MOVED !!!\n\nI've set up a dedicated workspace to organize the mod project: https://observablehq.com/@supermikal-factorio-wire-icons\n\nThis notebook will not get any further updates. All useful code has been moved to the new home.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"beforeAfter({\n before: grid(V()),\n after: await rasterizeSVG(template(V())),\n afterStyle: pixelStyle\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"const V = () =>\n wire3(14,16, S)\n .startTip\n // .ccw(1/30,100)\n .f(20)\n .ccw(.42, 6)\n .f(19.35)\n .ccw(.08, 4)\n .under\n .ccw(1/4, 4)\n .under\n .ccw(1/2, 4)\n .endTip\n .f(9.925)\n .svg(\"green\")","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"V().outerHTML","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"const R = () => [\n wire3(16,40,N)\n .startTip\n .f(16).cw(.5)\n .under.cw(.5)\n .tele(28,32,S)\n .under\n .ccw(.25)\n .endTip\n .svg(\"red\")\n ]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"display(sideBySideFlex(grid(\n svg``,\n R()\n), beforeAfter({\n before: await FileAttachment(\"new-red-wire-x56.png\").url(),\n after: await rasterizeSVG(template(R())),\n aspectRatio: 1,\n beforeStyle: pixelStyle,\n afterStyle: pixelStyle,\n start: 20\n})))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"const G = () => wire3(16,42,E)\n .startTip\n .over\n .f(8).ccw(.25).f(8).ccw(.5)\n .under.ccw(.5)\n .tele(32,26,E)\n .endTip\n .ccw(.25)\n .svg(\"green\")","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"\ndisplay(sideBySideFlex(grid(\n svg``,\n G()\n), beforeAfter({\n before: await FileAttachment(\"new-green-wire-x56.png\").url(),\n after: await rasterizeSVG(template(G())),\n aspectRatio: 1,\n beforeStyle: pixelStyle,\n afterStyle: pixelStyle,\n start: 20\n})))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"G().outerHTML.replaceAll(/><([^\\/])/g,'>\\n<$1')","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"B\nC\nČ\nD\nĐ\nH\nK\nM\nP\nS\nV\nVD\nVM\nVR\nX\nY\nZ\nŽ\nΚ\nΠ\nЖ\nЗ\nК\nҚ\nЦ\nЧ\nᲛ\nᲬ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"## Defs, Utils and Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"import {beforeAfter} from \"observable:@supermikal/before-after-slider\"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"const pixelStyle = \"image-rendering: pixelated; aspect-ratio: 1/1; object-position: left; height:auto;\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"function sideBySideFlex(...nodes) {\n return html`

${nodes.map(n => html`

${n}

`)}

`;\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"const { abs, sin, cos, PI } = Math;\nconst round = v => typeof v === 'number'\n ? Math.round(v * 1000) / 1000 : v;\n\nconst TwoPi = 2 * PI;\nconst E = 0, S = 1/4, W = 2/4, N = 3/4;","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"$32","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"wire3(16,16)\n .f(5)\n .over.f(6)\n .under.f(7)\n .under.under.f(8)\n .under.cw(1/PI,5)\n .tele(3,7,1/6,-2).f(10)\n // .paths\n .svg(\"green\")\n .outerHTML.replaceAll(/><([^\\/])/g,'>\\n<$1')","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"wire3(16,16).f(5)\n .over.f(6)\n .under.f(7)\n .under.f(8)\n .under.cw(1/PI,5)\n .svg().getHTML().replace(/^ +/gm, '')","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"function extend (arr, add) {\n const l = arr.length;\n if (l <= 1) return arr;\n const last = l - 1\n const out = arr.map((n,i) => n\n + (i % 2 == 0 ? add : -add)\n * ((i==0||i==last) ? 1 : 2)\n );\n if (arr[0] === 0) {\n out[0] = 0;\n out[1] += add\n };\n // return [1,9]\n return out;\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"extend([1,2,3,4],0.2)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"extend([0,1,2,3,4],0.2)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$33","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"const grid = (...contents) => template(svg.fragment`\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n\n \n \n\n \n \n \n`, contents)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"const red = \"#E20000\"\nconst green = \"#208C00\"\nconst black = \"#1D1D1D\"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$34","pinned":true,"hidden":true,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"function escapeHTML(str) {\n const entities = {\n '&': '&',\n '<': '<',\n '>': '>',\n '\"': '"',\n \"'\": '''\n };\n return str.replace(/[&<>\"']/g, char => entities[char]);\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"const cross = (xs, ys, f) =>\n xs.flatMap(x => ys.map(y => f(x, y)))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"cross([1,2,3],['a','b','c'], (q,w)=>({q,w}))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"2"}} 31:"$30:body"