2e:null 2f:["$","title",null,{"children":"Make A Wallpaper - Imports | Michael Bricknell | Observable"}] 34:T4f2,primitives = ({ // Your existing ones line: "M 0,50 L 100,50", dot: "M 50,50 L 51,50", slash: "M 0,0 L 100,100", dash: "M 40,50 L 60,50", // New additions only vertical: "M 50,0 L 50,100", backslash: "M 0,100 L 100,0", // Extended dashes longdash: "M 30,50 L 70,50", shortdash: "M 45,50 L 55,50", // Crosses cross: "M 0,50 L 100,50 M 50,0 L 50,100", plus: "M 40,50 L 60,50 M 50,40 L 50,60", // Angles and brackets rightangle: "M 30,70 L 30,30 L 70,30", bracket: "M 40,30 L 30,30 L 30,70 L 40,70", hook: "M 30,30 L 30,50 L 50,50", // Directional arrows arrowup: "M 50,30 L 30,50 L 70,50", arrowdown: "M 50,70 L 30,50 L 70,50", // Wave patterns sawtooth: "M 25,75 L 50,25 L 75,75", mountain: "M 20,70 L 35,30 L 50,50 L 65,30 L 80,70", // Polygons pentagon: "M 50,20 L 73,40 L 63,70 L 37,70 L 27,40 Z", hexagon: "M 50,20 L 75,35 L 75,65 L 50,80 L 25,65 L 25,35 Z", // Utility marks check: "M 30,50 L 45,65 L 70,35", tilde: "M 30,45 L 40,35 L 60,65 L 70,55", // Grid elements grid: "M 0,33 L 100,33 M 0,66 L 100,66 M 33,0 L 33,100 M 66,0 L 66,100", crosshatch: "M 0,0 L 100,100 M 0,100 L 100,0", // Organic shapes leaf: "M 50,20 L 60,40 L 70,60 L 60,80 L 50,75 L 40,80 L 30,60 L 40,40 Z" })35:T540,alpha = ({ A: "M 10,90 L 50,10 L 90,90 M 30,60 L 70,60", B: "M 20,10 L 20,90 M 20,10 L 80,25 L 20,50 L 80,75 L 20,90", C: "M 80,20 L 30,10 L 20,50 L 30,90 L 80,80", D: "M 20,10 L 20,90 M 20,10 L 70,25 L 70,75 L 20,90", E: "M 20,10 L 90,10 M 20,50 L 70,50 M 20,90 L 90,90 M 20,10 L 20,90", F: "M 20,10 L 90,10 M 20,50 L 70,50 M 20,10 L 20,90", G: "M 80,20 L 30,10 L 20,50 L 30,90 L 80,80 L 80,50 L 50,50", H: "M 20,10 L 20,90 M 80,10 L 80,90 M 20,50 L 80,50", I: "M 50,10 L 50,90 M 30,10 L 70,10 M 30,90 L 70,90", J: "M 80,10 L 80,70 L 60,90 L 20,90", K: "M 20,10 L 20,90 M 80,10 L 20,50 L 80,90", L: "M 20,10 L 20,90 L 80,90", M: "M 20,90 L 20,10 L 50,50 L 80,10 L 80,90", N: "M 20,90 L 20,10 L 80,90 L 80,10", O: "M 50,10 L 80,30 L 80,70 L 50,90 L 20,70 L 20,30 Z", P: "M 20,90 L 20,10 L 80,10 L 80,50 L 20,50", Q: "M 50,10 L 80,30 L 80,70 L 50,90 L 20,70 L 20,30 Z M 60,60 L 90,90", R: "M 20,90 L 20,10 L 80,10 L 80,50 L 20,50 L 80,90", S: "M 80,20 L 70,10 L 30,10 L 20,20 L 80,80 L 70,90 L 30,90 L 20,80", T: "M 10,10 L 90,10 M 50,10 L 50,90", U: "M 20,10 L 20,70 L 50,90 L 80,70 L 80,10", V: "M 20,10 L 50,90 L 80,10", W: "M 20,10 L 35,90 L 50,50 L 65,90 L 80,10", X: "M 20,10 L 80,90 M 80,10 L 20,90", Y: "M 20,10 L 50,50 L 80,10 M 50,50 L 50,90", Z: "M 20,10 L 80,10 L 20,90 L 80,90" })36:T750,font = [ Object.fromEntries( getAvailableChars(font1) .split("") .map((char) => { const key = /\d/.test(char) ? `_${char}` : char; return [key, pathData(char, font1)]; }) ), Object.fromEntries( getAvailableChars(font2) .split("") .map((char) => { const key = /\d/.test(char) ? `_${char}` : char; return [key, pathData(char, font2)]; }) ), Object.fromEntries( getAvailableChars(font3) .split("") .map((char) => { const key = /\d/.test(char) ? `_${char}` : char; return [key, pathData(char, font3)]; }) ), Object.fromEntries( getAvailableChars(font4) .split("") .map((char) => { const key = /\d/.test(char) ? `_${char}` : char; return [key, pathData(char, font4)]; }) ), Object.fromEntries( getAvailableChars(font5) .split("") .map((char) => { const key = /\d/.test(char) ? `_${char}` : char; return [key, pathData(char, font5)]; }) ), Object.fromEntries( getAvailableChars(font6) .split("") .map((char) => { const key = /\d/.test(char) ? `_${char}` : char; return [key, pathData(char, font6)]; }) ), Object.fromEntries( getAvailableChars(font7) .split("") .map((char) => { const key = /\d/.test(char) ? `_${char}` : char; return [key, pathData(char, font7)]; }) ), Object.fromEntries( getAvailableChars(font8) .split("") .map((char) => { const key = /\d/.test(char) ? `_${char}` : char; return [key, pathData(char, font8)]; }) ), Object.fromEntries( getAvailableChars(font9) .split("") .map((char) => { const key = /\d/.test(char) ? `_${char}` : char; return [key, pathData(char, font9)]; }) ) ]37:T93c,function arcToLines( x1, y1, rx, ry, angle, largeArcFlag, sweepFlag, x2, y2, segments ) { const rad = Math.PI / 180; const phi = angle * rad; rx = Math.abs(rx); ry = Math.abs(ry); const sin_phi = Math.sin(phi); const cos_phi = Math.cos(phi); // Step 1: Compute (x1', y1') const x1p = (cos_phi * (x1 - x2)) / 2 + (sin_phi * (y1 - y2)) / 2; const y1p = (-sin_phi * (x1 - x2)) / 2 + (cos_phi * (y1 - y2)) / 2; if (x1p === 0 && y1p === 0) return [{ x: x1, y: y1 }]; const rx_sq = rx * rx; const ry_sq = ry * ry; const x1p_sq = x1p * x1p; const y1p_sq = y1p * y1p; // Correct radii if they are too small const lambda = x1p_sq / rx_sq + y1p_sq / ry_sq; if (lambda > 1) { rx *= Math.sqrt(lambda); ry *= Math.sqrt(lambda); } // Step 2: Compute (cx', cy') let sign = largeArcFlag === sweepFlag ? -1 : 1; let co = Math.sqrt( Math.max( 0, (rx * rx * ry * ry - rx * rx * y1p * y1p - ry * ry * x1p * x1p) / (rx * rx * y1p * y1p + ry * ry * x1p * x1p) ) ); const cxp = (sign * co * rx * y1p) / ry; const cyp = (sign * co * -ry * x1p) / rx; // Step 3: Compute (cx, cy) from (cx', cy') const cx = cos_phi * cxp - sin_phi * cyp + (x1 + x2) / 2; const cy = sin_phi * cxp + cos_phi * cyp + (y1 + y2) / 2; // Step 4: Compute startAngle and deltaAngle const angleBetween = (v1, v2) => { const p = v1.x * v2.x + v1.y * v2.y; const n = Math.sqrt((v1.x ** 2 + v1.y ** 2) * (v2.x ** 2 + v2.y ** 2)); const sign = v1.x * v2.y - v1.y * v2.x < 0 ? -1 : 1; return sign * Math.acos(Math.max(-1, Math.min(1, p / n))); }; const v1 = { x: (x1p - cxp) / rx, y: (y1p - cyp) / ry }; const v2 = { x: (-x1p - cxp) / rx, y: (-y1p - cyp) / ry }; const startAngle = angleBetween({ x: 1, y: 0 }, v1); let deltaAngle = angleBetween(v1, v2); if (sweepFlag === 0 && deltaAngle > 0) { deltaAngle -= 2 * Math.PI; } if (sweepFlag === 1 && deltaAngle < 0) { deltaAngle += 2 * Math.PI; } const points = []; for (let i = 0; i <= segments; i++) { const t = i / segments; const angle = startAngle + deltaAngle * t; const xp = rx * Math.cos(angle); const yp = ry * Math.sin(angle); const x = cos_phi * xp - sin_phi * yp + cx; const y = sin_phi * xp + cos_phi * yp + cy; points.push({ x, y }); } return points; }38:T178f,function svgPathToLines(pathString, segments = 16) { const polylines = []; let currentPolyline = []; let currentX = 0; let currentY = 0; let startX = 0; let startY = 0; let lastControlX = 0; let lastControlY = 0; // Regular expression to parse path commands and their arguments. const commandRegex = /([a-zA-Z])([^a-zA-Z]*)/g; const commands = pathString.match(commandRegex) || []; for (const commandStr of commands) { const command = commandStr[0]; const args = ( commandStr .slice(1) .trim() .match(/-?\d*\.?\d+/g) || [] ).map(Number); const isRelative = command === command.toLowerCase(); // Helper to get absolute coordinates from relative ones const getAbs = (x, y) => isRelative ? { x: x + currentX, y: y + currentY } : { x, y }; switch (command.toUpperCase()) { case "M": // moveto for (let i = 0; i < args.length; i += 2) { const point = getAbs(args[i], args[i + 1]); if (i === 0) { if (currentPolyline.length > 0) { polylines.push(currentPolyline); } currentPolyline = [point]; startX = point.x; startY = point.y; } else { currentPolyline.push(point); } currentX = point.x; currentY = point.y; } break; case "L": // lineto for (let i = 0; i < args.length; i += 2) { const point = getAbs(args[i], args[i + 1]); currentPolyline.push(point); currentX = point.x; currentY = point.y; } break; case "H": // horizontal lineto for (const arg of args) { currentX = isRelative ? currentX + arg : arg; currentPolyline.push({ x: currentX, y: currentY }); } break; case "V": // vertical lineto for (const arg of args) { currentY = isRelative ? currentY + arg : arg; currentPolyline.push({ x: currentX, y: currentY }); } break; case "Z": // closepath if (currentPolyline.length > 0) { currentPolyline.push({ x: startX, y: startY }); polylines.push(currentPolyline); currentPolyline = []; currentX = startX; currentY = startY; } break; case "C": // curveto (cubic) for (let i = 0; i < args.length; i += 6) { const p1 = getAbs(args[i], args[i + 1]); const p2 = getAbs(args[i + 2], args[i + 3]); const p3 = getAbs(args[i + 4], args[i + 5]); const curvePoints = cubicBezier( { x: currentX, y: currentY }, p1, p2, p3, segments ); currentPolyline.push(...curvePoints.slice(1)); currentX = p3.x; currentY = p3.y; lastControlX = p2.x; lastControlY = p2.y; } break; case "S": // smooth curveto (cubic) for (let i = 0; i < args.length; i += 4) { const p1 = { x: 2 * currentX - lastControlX, y: 2 * currentY - lastControlY }; const p2 = getAbs(args[i], args[i + 1]); const p3 = getAbs(args[i + 2], args[i + 3]); const curvePoints = cubicBezier( { x: currentX, y: currentY }, p1, p2, p3, segments ); currentPolyline.push(...curvePoints.slice(1)); currentX = p3.x; currentY = p3.y; lastControlX = p2.x; lastControlY = p2.y; } break; case "Q": // quadratic curveto for (let i = 0; i < args.length; i += 4) { const p1 = getAbs(args[i], args[i + 1]); const p2 = getAbs(args[i + 2], args[i + 3]); const curvePoints = quadraticBezier( { x: currentX, y: currentY }, p1, p2, segments ); currentPolyline.push(...curvePoints.slice(1)); currentX = p2.x; currentY = p2.y; lastControlX = p1.x; // Keep for 'T' lastControlY = p1.y; } break; case "T": // smooth quadratic curveto for (let i = 0; i < args.length; i += 2) { const p1 = { x: 2 * currentX - lastControlX, y: 2 * currentY - lastControlY }; const p2 = getAbs(args[i], args[i + 1]); const curvePoints = quadraticBezier( { x: currentX, y: currentY }, p1, p2, segments ); currentPolyline.push(...curvePoints.slice(1)); currentX = p2.x; currentY = p2.y; lastControlX = p1.x; lastControlY = p1.y; } break; case "A": // arc for (let i = 0; i < args.length; i += 7) { const rx = args[i]; const ry = args[i + 1]; const xAxisRotation = args[i + 2]; const largeArcFlag = args[i + 3]; const sweepFlag = args[i + 4]; const p2 = getAbs(args[i + 5], args[i + 6]); const arcPoints = arcToLines( currentX, currentY, rx, ry, xAxisRotation, largeArcFlag, sweepFlag, p2.x, p2.y, segments ); currentPolyline.push(...arcPoints.slice(1)); currentX = p2.x; currentY = p2.y; } break; default: // Reset last control point for non-curve commands lastControlX = currentX; lastControlY = currentY; break; } // If the last command was not a curve command, reset the control point if (!"CSTQ".includes(command.toUpperCase())) { lastControlX = currentX; lastControlY = currentY; } } if (currentPolyline.length > 0) { polylines.push(currentPolyline); } return polylines; }39:Tb07,function createTile(pathString, options = {}) { const { type = "p6", width = 20, height = 20, displayColumns = 7, displayRows = 7, dx = 0, dy = 0, color = "#e74c3c", strokeWidth = 1, background = "none" } = options; const totalWidth = width * displayColumns; const totalHeight = height * displayRows; const svg = d3 .create("svg") .attr("width", totalWidth) .attr("height", totalHeight) .attr("viewBox", `0 0 ${totalWidth} ${totalHeight}`) .attr("overflow", "hidden"); const patternId = `tile-pattern-${Math.random().toString(36).slice(2)}`; const clipId = `tile-clip-${Math.random().toString(36).slice(2)}`; const rawLines = svgPathToLines(pathString); const allPoints = rawLines.flat(); const minX = Math.min(...allPoints.map((p) => p.x)); const minY = Math.min(...allPoints.map((p) => p.y)); const maxX = Math.max(...allPoints.map((p) => p.x)); const maxY = Math.max(...allPoints.map((p) => p.y)); const glyphW = maxX - minX; const glyphH = maxY - minY; const normalizedLines = rawLines.map((line) => line.map((p) => ({ x: p.x - minX, y: p.y - minY })) ); console.log(minX, minY, totalWidth, totalHeight); const tile = wallpaper({ type, width, height, columns: 1, rows: 1, lines: normalizedLines }); const tileD = tile .flat() .map((line) => line.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x},${p.y}`).join(" ") ) .join(" "); const defs = svg.append("defs"); if (background && background !== "none") { const bgPatternMatch = background.match(/url$#(.+)$/); //console.log(bgPatternMatch); if (bgPatternMatch) { const bgId = bgPatternMatch[1]; const bgPattern = document.getElementById(bgId); if (bgPattern) { defs.node().appendChild(bgPattern.cloneNode(true)); //console.log(bgId, bgPattern); } } } defs .append("clipPath") .attr("id", clipId) .append("rect") .attr("width", totalWidth) .attr("height", totalHeight); defs .append("pattern") .attr("id", patternId) .attr("x", 0) .attr("y", 0) .attr("width", glyphW) .attr("height", glyphH) .attr("patternUnits", "userSpaceOnUse") .append("path") .attr("d", tileD) .attr("stroke", color) .attr("fill", "none") .attr("stroke-width", strokeWidth); const g = svg .append("g") .attr("clip-path", `url(#${clipId})`) .attr("transform", `translate(${dx}, ${dy})`); if (background !== "none") { g.append("rect") .attr("width", totalWidth) .attr("height", totalHeight) .attr("fill", background); } g.append("rect") .attr("width", totalWidth) .attr("height", totalHeight) .attr("fill", `url(#${patternId})`); return svg.node(); }3a:T572,function createFullWidthTile(pathString, options = {}) { const { type = "p6", width = 20, height = 20, columns = 20, rows = 20, displayColumns = 7, displayRows = 7, dx = 0, dy = 0, color = "#e74c3c", strokeWidth = 1, background = "none" } = options; const totalWidth = width * displayColumns; const totalHeight = height * displayRows; const aspectRatio = totalHeight / totalWidth; const svg = d3 .create("svg") .attr("viewBox", `0 0 ${totalWidth} ${totalHeight}`) .style("width", "100%") .style("height", `${aspectRatio * 100}vw`) // Responsive height .style("max-height", `${totalHeight}px`) // Optional: cap the height .style("background-color", background); const pattern = wallpaper({ type, width, height, columns, rows, lines: svgPathToLines(pathString) }); const g = svg.append("g").attr("transform", `translate(${dx}, ${dy})`); // SVG transform, not CSS pattern.forEach((tile) => { tile.forEach((line) => { const pathData = line .map((point, i) => `${i === 0 ? "M" : "L"} ${point.x},${point.y}`) .join(" "); g.append("path") // Append to the group instead of svg .attr("d", pathData) .attr("stroke", color) .attr("fill", "none") .attr("stroke-width", strokeWidth); }); }); return svg.node(); }3b:T1601,function createSolidShape(shapeType, params = {}) { const options = { type: "p1", width: 100, height: 100, columns: 1, rows: 1, fillColor: "#e74c3c", // Default fill color strokeColor: "black", strokeWidth: 0, displayColumns: 1, displayRows: 1, className: "", dx: 0, dy: 0, ...params }; // Shape definitions remain the same const shapes = { // Basic polygons rect: `M 0,0 L ${options.width},0 L ${options.width},${options.height} L 0,${options.height} Z`, triangle: `M ${options.width / 2},0 L ${options.width},${ options.height } L 0,${options.height} Z`, square: `M ${options.width * 0.25},${options.height * 0.25} L ${ options.width * 0.75 },${options.height * 0.25} L ${options.width * 0.75},${ options.height * 0.75 } L ${options.width * 0.25},${options.height * 0.75} Z`, diamond: `M ${options.width / 2},${options.height * 0.25} L ${ options.width * 0.75 },${options.height / 2} L ${options.width / 2},${options.height * 0.75} L ${ options.width * 0.25 },${options.height / 2} Z`, // Regular polygons pentagon: `M ${options.width / 2},${options.height * 0.15} L ${ options.width * 0.75 },${options.height * 0.35} L ${options.width * 0.65},${ options.height * 0.7 } L ${options.width * 0.35},${options.height * 0.7} L ${ options.width * 0.25 },${options.height * 0.35} Z`, hexagon: `M ${options.width / 2},${options.height * 0.15} L ${ options.width * 0.75 },${options.height * 0.3} L ${options.width * 0.75},${ options.height * 0.7 } L ${options.width / 2},${options.height * 0.85} L ${ options.width * 0.25 },${options.height * 0.7} L ${options.width * 0.25},${ options.height * 0.3 } Z`, // Arrow polygons arrowup: `M ${options.width / 2},${options.height * 0.2} L ${ options.width * 0.7 },${options.height / 2} L ${options.width * 0.6},${options.height / 2} L ${ options.width * 0.6 },${options.height * 0.8} L ${options.width * 0.4},${ options.height * 0.8 } L ${options.width * 0.4},${options.height / 2} L ${options.width * 0.3},${ options.height / 2 } Z`, arrowdown: `M ${options.width / 2},${options.height * 0.8} L ${ options.width * 0.7 },${options.height / 2} L ${options.width * 0.6},${options.height / 2} L ${ options.width * 0.6 },${options.height * 0.2} L ${options.width * 0.4},${ options.height * 0.2 } L ${options.width * 0.4},${options.height / 2} L ${options.width * 0.3},${ options.height / 2 } Z`, // Star polygons star4: `M ${options.width / 2},${options.height * 0.2} L ${ options.width * 0.6 },${options.height * 0.4} L ${options.width * 0.8},${ options.height / 2 } L ${options.width * 0.6},${options.height * 0.6} L ${options.width / 2},${ options.height * 0.8 } L ${options.width * 0.4},${options.height * 0.6} L ${ options.width * 0.2 },${options.height / 2} L ${options.width * 0.4},${options.height * 0.4} Z`, // House shapes house: `M ${options.width / 2},${options.height * 0.2} L ${ options.width * 0.75 },${options.height * 0.45} L ${options.width * 0.75},${ options.height * 0.8 } L ${options.width * 0.25},${options.height * 0.8} L ${ options.width * 0.25 },${options.height * 0.45} Z`, // Geometric shapes trapezoid: `M ${options.width * 0.35},${options.height * 0.25} L ${ options.width * 0.65 },${options.height * 0.25} L ${options.width * 0.75},${ options.height * 0.75 } L ${options.width * 0.25},${options.height * 0.75} Z`, kite: `M ${options.width / 2},${options.height * 0.15} L ${ options.width * 0.7 },${options.height / 2} L ${options.width / 2},${options.height * 0.85} L ${ options.width * 0.3 },${options.height / 2} Z`, // Chevron polygons chevronup: `M ${options.width / 2},${options.height * 0.25} L ${ options.width * 0.7 },${options.height * 0.45} L ${options.width * 0.65},${ options.height / 2 } L ${options.width / 2},${options.height * 0.35} L ${ options.width * 0.35 },${options.height / 2} L ${options.width * 0.3},${options.height * 0.45} Z` }; const pattern = wallpaper({ type: options.type, width: options.width, height: options.height, columns: options.columns, rows: options.rows, lines: svgPathToLines(shapes[shapeType]) }); const totalWidth = options.width * options.displayColumns; const totalHeight = options.height * options.displayRows; const svg = d3 .create("svg") .attr("width", totalWidth) .attr("height", totalHeight) .attr("viewBox", `0 0 ${totalWidth} ${totalHeight}`); // Create a group with transform for dx/dy offset const group = svg .append("g") .attr("transform", `translate(${options.dx}, ${options.dy})`); pattern.forEach((tile, id) => { tile.forEach((line) => { const pathData = line .map( (point, i) => `${i === 0 ? "M" : "L"} ${point.x},${point.y}` // Remove dx/dy here ) .join(" "); const color = Array.isArray(options.fillColor) ? options.fillColor[id % options.fillColor.length] : options.fillColor; group // Add to group instead of svg .append("path") .attr("class", options.className) .attr("d", pathData) .attr("fill", color) .attr("stroke", options.strokeColor) .attr("stroke-width", options.strokeWidth); }); }); return svg.node(); }3c:T4d9,function compositeTiles(backgroundColor = null, ...tiles) { const firstTile = tiles[0]; const width = parseFloat(firstTile?.getAttribute("width")) || 400; const height = parseFloat(firstTile?.getAttribute("height")) || 400; const viewBox = firstTile?.getAttribute("viewBox") || `0 0 ${width} ${height}`; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", viewBox); const defs = svg.append("defs"); if (backgroundColor && backgroundColor !== "none") { svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", backgroundColor) .attr("x", 0) .attr("y", 0); } tiles.forEach((tile) => { d3.select(tile) .selectAll("defs > *") .each(function () { defs.node().appendChild(this.cloneNode(true)); }); if (!backgroundColor || backgroundColor === "none") { d3.select(tile) .selectAll("rect") .each(function () { svg.node().appendChild(this.cloneNode(true)); }); } d3.select(tile) .selectAll("g") .each(function () { svg.node().appendChild(this.cloneNode(true)); }); }); return svg.node(); }3d:T63c,function createSVGGrid(tiles, options = {}) { const { itemsPerRow = 2, gap = 0, tileWidth = 460, tileHeight = 460, scale = false } = options; const rows = Math.ceil(tiles.length / itemsPerRow); const totalWidth = tileWidth * itemsPerRow + gap * (itemsPerRow - 1); const totalHeight = tileHeight * rows + gap * (rows - 1); const svg = d3 .create("svg") .attr("width", totalWidth) .attr("height", totalHeight) .attr("viewBox", `0 0 ${totalWidth} ${totalHeight}`); // First pass: copy all background rects tiles.forEach((tile, index) => { const row = Math.floor(index / itemsPerRow); const col = index % itemsPerRow; const x = col * (tileWidth + gap); const y = row * (tileHeight + gap); const clipGroup = svg .append("g") .attr("transform", `translate(${x}, ${y})`); // Only copy background rects in first pass d3.select(tile) .selectAll("rect") .each(function () { clipGroup.node().appendChild(this.cloneNode(true)); }); }); // Second pass: copy all pattern groups tiles.forEach((tile, index) => { const row = Math.floor(index / itemsPerRow); const col = index % itemsPerRow; const x = col * (tileWidth + gap); const y = row * (tileHeight + gap); const clipGroup = svg .append("g") .attr("transform", `translate(${x}, ${y})`); // Only copy groups in second pass d3.select(tile) .selectAll("g") .each(function () { clipGroup.node().appendChild(this.cloneNode(true)); }); }); return svg.node(); }3e:[{"id":"8697f6b7f2a44317d22b5bf05b97fbccc032c3c1571b2e0fc4848967a42cf206ef5c1e710e40b6ccdc4b11fbe123e0ce187cb0ecad1d04fff0180b1fad9adf34","href":"https://static.observableusercontent.com/files/8697f6b7f2a44317d22b5bf05b97fbccc032c3c1571b2e0fc4848967a42cf206ef5c1e710e40b6ccdc4b11fbe123e0ce187cb0ecad1d04fff0180b1fad9adf34","name":"Roboto-Thin.ttf","type":"font/ttf","lastModified":1757026435974.972,"size":145936},{"id":"9339d645a0435a6c36e533075d24e4454b5b0365bcdc5593453276d7f8a171365b1f926cc8f26dfbe96b19abf5a29d8ca2a6d2820c54a05e5158f04b8908c21f","href":"https://static.observableusercontent.com/files/9339d645a0435a6c36e533075d24e4454b5b0365bcdc5593453276d7f8a171365b1f926cc8f26dfbe96b19abf5a29d8ca2a6d2820c54a05e5158f04b8908c21f","name":"Kapakana-Light.ttf","type":"font/ttf","lastModified":1757033243449.953,"size":120828},{"id":"80306a2e8537a131e8103d8ae6a60b4930aaebb115f03b10f626c7f0acd9bd6370e8bd64d20b47165f8ec54e55a8412262154c7177a451b984bcee47319a9318","href":"https://static.observableusercontent.com/files/80306a2e8537a131e8103d8ae6a60b4930aaebb115f03b10f626c7f0acd9bd6370e8bd64d20b47165f8ec54e55a8412262154c7177a451b984bcee47319a9318","name":"Spectral-Italic.ttf","type":"font/ttf","lastModified":1757033348339.928,"size":265536},{"id":"58e43ee99222566db2d124f990f9a6d740f92ce8e55383860fbdb2a756673bc7a00f342691f75c36587a63e87440cb6337ab9c62ecd75aeefd66789511d400ff","href":"https://static.observableusercontent.com/files/58e43ee99222566db2d124f990f9a6d740f92ce8e55383860fbdb2a756673bc7a00f342691f75c36587a63e87440cb6337ab9c62ecd75aeefd66789511d400ff","name":"NotoSans-VariableFont_wdth,wght.ttf","type":"font/ttf","lastModified":1758542033086.147,"size":2044548},{"id":"dadc9225587e6ae02f0dea5b0a72ef6aebd230124a6a68ed8c68293e44236c56d96f358c070f82ba67889314d0bc0a6cc96f097cb674397892fe4595fb02b1a3","href":"https://static.observableusercontent.com/files/dadc9225587e6ae02f0dea5b0a72ef6aebd230124a6a68ed8c68293e44236c56d96f358c070f82ba67889314d0bc0a6cc96f097cb674397892fe4595fb02b1a3","name":"NotoSans-Italic-VariableFont_wdth,wght.ttf","type":"font/ttf","lastModified":1758542038978.302,"size":2300468},{"id":"dca74ca7eb2041d04cd9b07b9ef5537787ffc4923030ce6df3116db5d77bada97526ddcd0e2eb35188b4b3421cf74c7430ef37d245109d36bf96b149514b125b","href":"https://static.observableusercontent.com/files/dca74ca7eb2041d04cd9b07b9ef5537787ffc4923030ce6df3116db5d77bada97526ddcd0e2eb35188b4b3421cf74c7430ef37d245109d36bf96b149514b125b","name":"Updock-Regular.ttf","type":"font/ttf","lastModified":1758236519728.966,"size":119184},{"id":"abbec1466349684f4ccb7b1bb3c3f8b125fc94f24ff8fafeeea1c0509f3922697932feaa76bc43312e1c3c84da249b4f7ded36b1fa5cc1f11e5b2386f4285d6c","href":"https://static.observableusercontent.com/files/abbec1466349684f4ccb7b1bb3c3f8b125fc94f24ff8fafeeea1c0509f3922697932feaa76bc43312e1c3c84da249b4f7ded36b1fa5cc1f11e5b2386f4285d6c","name":"MrsSaintDelafield-Regular.ttf","type":"font/ttf","lastModified":1758236525551.907,"size":47932},{"id":"0ac5314236943d11d994bfb19b1f4a18f94cf653a8b6c15352c86cc0050bd7602187bc60448025283e775c916851acc3e6046c85eafde96278336330c3e233bc","href":"https://static.observableusercontent.com/files/0ac5314236943d11d994bfb19b1f4a18f94cf653a8b6c15352c86cc0050bd7602187bc60448025283e775c916851acc3e6046c85eafde96278336330c3e233bc","name":"MissFajardose-Regular.ttf","type":"font/ttf","lastModified":1758236529426.66,"size":57512},{"id":"ad990b893c74ac7b86b078233c4cdca85391cdf3eb53f01e171b4ece0ca7770af522784950e5d599ac0e95c96e618f6bc50723f7d535f6055f267499e236d6b6","href":"https://static.observableusercontent.com/files/ad990b893c74ac7b86b078233c4cdca85391cdf3eb53f01e171b4ece0ca7770af522784950e5d599ac0e95c96e618f6bc50723f7d535f6055f267499e236d6b6","name":"ImperialScript-Regular.ttf","type":"font/ttf","lastModified":1758236533277.269,"size":154356},{"id":"19b2bcdde358ee81a3fe5ef45d44dc33fef9688784a51c12dd3db3e36f61f32624a3fbfabb0afd1c0f930602b5e93de3347b12e9d3442dfbef19d78915c1fded","href":"https://static.observableusercontent.com/files/19b2bcdde358ee81a3fe5ef45d44dc33fef9688784a51c12dd3db3e36f61f32624a3fbfabb0afd1c0f930602b5e93de3347b12e9d3442dfbef19d78915c1fded","name":"DMSans-Italic-VariableFont_opsz,wght.ttf","type":"font/ttf","lastModified":1758236549769.058,"size":283524}] 32:{"id":"89f35e41c1416470","slug":"make-a-wallpaper","title":"Make A Wallpaper - Imports","thumbnail":"557eab69b933dadda7675ddfd0473e2893fff38a30353191c4ef79525d60519c","access_level":"public","create_time":"$D2025-08-29T14:03:54.995Z","update_time":"$D2026-04-30T10:47:28.153Z","view_time":null,"first_public_time":"$D2025-08-29T15:14:00.092Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024"},"version":777,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null}],"members":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null,"role":"editor"},{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"868bd20896c9e454","slug":"wallpaper","title":"Wallpaper Groups","owner":{"id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell"}},"type":"notebook","body":{"title":"Make A Wallpaper - Imports","cells":[{"id":0,"value":"# Make A Wallpaper - Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"wallpaper code by Andreas Köberle\n[eskimoblood](https://github.com/eskimoblood/wallpaper-groups)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":268,"value":"https://observablehq.com/@mbrickmaps/wallpaper-demo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"wp = import(\"https://cdn.skypack.dev/wallpaper-groups@1.0.3?min\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"fontkit = import(\"https://cdn.skypack.dev/fontkit@2.0.4?min\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"juice = require(\"https://bundle.run/juice@7.0.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"opentype = import(\"opentype.js@1.3.4\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"function createTileTemplate(tiles, options = {}) {\n const { columns = 2, gap = \"15px\" } = options;\n\n const container = document.createElement(\"div\");\n container.style.cssText = `\n display: grid;\n grid-template-columns: repeat(${columns}, 1fr);\n gap: ${gap};\n width: 100%;\n `;\n\n tiles.forEach((tile) => {\n container.appendChild(tile);\n });\n\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"wp.patternTypes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"num = ({\n zero: \"M 50,10 Q 20,10 20,50 Q 20,90 50,90 Q 80,90 80,50 Q 80,10 50,10 Z\",\n one: \"M 30,20 L 50,10 L 50,90\",\n two: \"M 20,30 C 40,10 80,10 80,40 L 20,90 L 80,90\",\n three:\n \"M 20,20 C 40,5 75,5 80,30 C 80,55 50,50 50,50 C 70,50 80,75 75,90 C 60,105 20,95 20,80\",\n four: \"M 20,20 L 20,70 L 80,70 M 60,10 L 60,90\",\n five: \"M 80,15 L 20,15 L 20,45 C 90,50 90,95 20,85\",\n six: \"M 70,20 C 70,5 30,5 20,50 C 10,95 70,95 80,70 C 80,50 50,45 20,50\",\n seven: \"M 20,10 L 80,10 L 30,90\",\n eight:\n \"M 50,50 C 20,30 20,20 50,10 C 80,20 80,30 50,50 C 80,70 80,80 50,90 C 20,80 20,70 50,50 Z\",\n nine: \"M 80,30 C 80,10 20,10 20,30 C 20,50 80,50 80,30 L 80,90\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"pick an open source font","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":400,"value":"robotoThin = await FileAttachment(\"Roboto-Thin.ttf\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"kapakanaLight = FileAttachment(\"Kapakana-Light.ttf\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"spectralItalic = FileAttachment(\"Spectral-Italic.ttf\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":744,"value":"imperialscriptRegularFont = FileAttachment(\"ImperialScript-Regular.ttf\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"font1 = opentype.load(robotoThin)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"font2 = opentype.load(kapakanaLight)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"font3 = opentype.load(spectralItalic)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"font4 = opentype.load(dmsansItalicVariablefont_opszWght)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"font5 = opentype.load(imperialscriptRegular)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"font6 = opentype.load(missfajardoseRegular)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"font7 = opentype.load(updockRegular)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"font8 = opentype.load(notosansItalicVariablefont_wdthWght)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"font9 = opentype.load(notosansVariablefont_wdthWght)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"notosansItalicVariablefont_wdthWght = FileAttachment(\n \"NotoSans-Italic-VariableFont_wdth,wght.ttf\"\n).url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"notosansVariablefont_wdthWght = FileAttachment(\n \"NotoSans-VariableFont_wdth,wght.ttf\"\n).url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"dmsansItalicVariablefont_opszWght = FileAttachment(\"DMSans-Italic-VariableFont_opsz,wght.ttf\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"imperialscriptRegular = FileAttachment(\"ImperialScript-Regular.ttf\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"missfajardoseRegular = FileAttachment(\"MissFajardose-Regular.ttf\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"mrssaintdelafieldRegular = FileAttachment(\"MrsSaintDelafield-Regular.ttf\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"updockRegular = FileAttachment(\"Updock-Regular.ttf\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"function pathData(letter, f) {\n const glyph = f.charToGlyph(letter);\n const path = glyph.getPath(0, 0, 60); //this sets the font size, and dx, dy\n return path.toPathData();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"chars = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"charString = new CharacterLoader().getCharacterString([\n \"latin\",\n \"cyrillic\",\n \"arabic\"\n])\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"charString.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"class CharacterLoader {\n constructor() {\n this.sets = {\n basic: \"AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789\",\n accented: \"ÀÁÂÃÄÅàáâãäåÇçÈÉÊËèéêëÌÍÎÏìíîïÑñÒÓÔÕÖØòóôõöøÙÚÛÜùúûüÝýÿ\",\n symbols: \".,!?;:'\\\"-()[]{}/@#$%^&*+=<>|\\\\`~_\",\n spaces: \" \\t\\n\\r\"\n };\n }\n\n getCharacterString(languages = [\"latin\"]) {\n let chars = this.sets.basic + this.sets.symbols + this.sets.spaces;\n\n if (languages.includes(\"latin\") || languages.includes(\"european\")) {\n chars += this.sets.accented;\n }\n\n if (languages.includes(\"cyrillic\")) {\n chars +=\n \"АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюя\";\n }\n\n if (languages.includes(\"arabic\")) {\n chars += \"ابتثجحخدذرزسشصضطظعغفقكلمنهويءآأؤإئةى\";\n }\n\n // Remove duplicates\n return [...new Set(chars)].join(\"\");\n }\n\n // Load characters from actual text content\n extractUniqueChars(text) {\n return [...new Set(text)].sort().join(\"\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"function getAvailableChars(font) {\n const chars = [];\n\n // Test a wide range of Unicode characters\n for (let i = 32; i <= 65535; i++) {\n const char = String.fromCharCode(i);\n try {\n const glyph = font.charToGlyph(char);\n if (glyph && glyph.index && glyph.index > 0) {\n chars.push(char);\n }\n } catch (e) {\n // Skip characters that cause errors\n }\n }\n\n return chars.join(\"\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"getAvailableChars(font1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"getAvailableChars(font9)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"wallpaper = wp.default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"function quadraticBezier(p0, p1, p2, segments) {\n const points = [{ x: p0.x, y: p0.y }];\n for (let i = 1; i <= segments; i++) {\n const t = i / segments;\n const x = (1 - t) ** 2 * p0.x + 2 * (1 - t) * t * p1.x + t ** 2 * p2.x;\n const y = (1 - t) ** 2 * p0.y + 2 * (1 - t) * t * p1.y + t ** 2 * p2.y;\n points.push({ x, y });\n }\n return points;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"function cubicBezier(p0, p1, p2, p3, segments) {\n const points = [{ x: p0.x, y: p0.y }];\n for (let i = 1; i <= segments; i++) {\n const t = i / segments;\n const x =\n (1 - t) ** 3 * p0.x +\n 3 * (1 - t) ** 2 * t * p1.x +\n 3 * (1 - t) * t ** 2 * p2.x +\n t ** 3 * p3.x;\n const y =\n (1 - t) ** 3 * p0.y +\n 3 * (1 - t) ** 2 * t * p1.y +\n 3 * (1 - t) * t ** 2 * p2.y +\n t ** 3 * p3.y;\n points.push({ x, y });\n }\n return points;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"path = svgPathToLines(\"M 0,10 L 0,20 M 10,10 L 1,20\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"dot = svgPathToLines(primitives.dot)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"function renderTileGrid(tiles, options = {}) {\n const {\n columns = Math.ceil(Math.sqrt(tiles.length)),\n rows = Math.ceil(tiles.length / columns),\n className = \"tile-grid\",\n containerTag = \"div\"\n } = options;\n\n const gridItems = tiles.map((tile) => tile || \"\").join(\"\");\n\n return html`\n <${containerTag} class=\"${className}\" style=\"\n display: grid;\n grid-template-columns: repeat(${columns}, 1fr);\n grid-template-rows: repeat(${rows}, 1fr);\n gap: 0;\n width: 100%;\n height: 100%;\n \">\n ${gridItems}\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"function createTileGrid(tileMap, options = {}) {\n const {\n //JUST COLUMNS\n columns = Math.ceil(Math.sqrt(Object.keys(tileMap).length)),\n className = \"tile-grid\",\n containerTag = \"div\"\n } = options;\n\n const tiles = Object.values(tileMap).join(\"\");\n\n return html`\n <${containerTag} class=\"${className}\" style=\"\n display: grid;\n grid-template-columns: repeat(${columns}, 1fr);\n gap: 0;\n width: 100%;\n \">\n ${tiles}\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"function inlineStyles(element) {\n // Use querySelectorAll to get all elements including the root\n const allElements = [element, ...element.querySelectorAll(\"*\")];\n\n allElements.forEach((el) => {\n const computedStyle = window.getComputedStyle(el);\n\n // Copy computed styles to inline styles\n for (let i = 0; i < computedStyle.length; i++) {\n const property = computedStyle[i];\n const value = computedStyle.getPropertyValue(property);\n el.style.setProperty(property, value);\n }\n });\n\n return element;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"function createFlexGrid(svgs, options = {}) {\n const { itemsPerRow = 2, gap = \"15px\" } = options;\n const container = document.createElement(\"div\");\n container.style.cssText = `\n display: flex;\n flex-wrap: wrap;\n gap: ${gap};\n width: 100%;\n `;\n const itemWidth = `calc(${100 / itemsPerRow}% - ${gap})`;\n\n svgs.forEach((svg) => {\n // Use juice to inline styles\n const inlinedHTML = juice(svg.outerHTML);\n const wrapper = document.createElement(\"div\");\n wrapper.innerHTML = inlinedHTML;\n const clonedSvg = wrapper.firstChild;\n\n clonedSvg.style.cssText += `\n flex: 0 0 ${itemWidth};\n width: ${itemWidth};\n height: auto;\n `;\n\n container.appendChild(clonedSvg);\n });\n\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"function simplifySVG(svgElement, precision = 1) {\n const clonedSVG = svgElement.cloneNode(true);\n\n // Simplify all path elements\n clonedSVG.querySelectorAll(\"path\").forEach((path) => {\n let pathData = path.getAttribute(\"d\");\n\n // Round all numbers to specified decimal places\n pathData = pathData.replace(/-?\\d+\\.?\\d*/g, (match) => {\n const num = parseFloat(match);\n return num.toFixed(precision);\n });\n\n // Remove unnecessary decimal zeros\n pathData = pathData.replace(/\\.?0+(?=\\s|[A-Za-z]|$)/g, \"\");\n\n path.setAttribute(\"d\", pathData);\n });\n\n // Simplify transform values\n clonedSVG.querySelectorAll(\"[transform]\").forEach((element) => {\n let transform = element.getAttribute(\"transform\");\n transform = transform.replace(/-?\\d+\\.?\\d*/g, (match) => {\n const num = parseFloat(match);\n return num.toFixed(precision);\n });\n transform = transform.replace(/\\.?0+(?=[\\s,)])/g, \"\");\n element.setAttribute(\"transform\", transform);\n });\n\n return clonedSVG;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"function getTileDimensions(tile) {\n const width = tile.getAttribute(\"width\");\n const height = tile.getAttribute(\"height\");\n const viewBox = tile.getAttribute(\"viewBox\");\n\n let dimensions = {};\n\n if (width && height) {\n dimensions.width = parseFloat(width);\n dimensions.height = parseFloat(height);\n }\n\n if (viewBox) {\n const [x, y, vbWidth, vbHeight] = viewBox.split(\" \").map(Number);\n dimensions.viewBoxWidth = vbWidth;\n dimensions.viewBoxHeight = vbHeight;\n dimensions.viewBox = { x, y, width: vbWidth, height: vbHeight };\n }\n\n // Get computed/rendered dimensions if needed\n if (tile.getBBox) {\n try {\n const bbox = tile.getBBox();\n dimensions.contentWidth = bbox.width;\n dimensions.contentHeight = bbox.height;\n dimensions.contentBounds = bbox;\n } catch (e) {\n // getBBox might fail if not in DOM\n }\n }\n\n return dimensions;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1","titling":"auto"}} 33:"$32:body"