40:I[328484,["$2","$2f","$30","$31","$32","$33","$34"],"ToolPlayer"] 44:I[27201,["$2"],"IconMark"] 41:T1f0a,function makeSvg(W, H) { const out = []; let d = ''; const f = (v) => (+v.toFixed(2)).toString(); const o = { fillStyle: '#000', strokeStyle: '#000', lineWidth: 1, lineJoin: 'round', lineCap: 'round', globalAlpha: 1, dash: [], setLineDash(a) { o.dash = a; }, beginPath() { d = ''; }, moveTo(x, y) { d += 'M' + f(x) + ' ' + f(y); }, lineTo(x, y) { d += (d ? 'L' : 'M') + f(x) + ' ' + f(y); }, closePath() { d += 'Z'; }, rect(x, y, w, h) { d += 'M' + f(x) + ' ' + f(y) + 'H' + f(x + w) + 'V' + f(y + h) + 'H' + f(x) + 'Z'; }, ellipse(x, y, rx, ry, rot, a0, a1) { const n = Math.max(8, Math.ceil((Math.abs(a1 - a0) / (Math.PI * 2)) * 140)); for (let i = 0; i <= n; i++) { const a = a0 + ((a1 - a0) * i) / n; o.lineTo(x + rx * Math.cos(a), y + ry * Math.sin(a)); } }, arc(x, y, r, a0, a1) { o.ellipse(x, y, r, r, 0, a0, a1); }, fill() { out.push(''); }, stroke() { out.push(''); }, fillRect(x, y, w, h) { out.push(''); }, toString() { return ''; }, }; return o; } function drawScene(g, W, H, px, time, p) { { const S = (Math.min(W, H) / 1000) * 1.15; const r = kit.rand(p.seed); const t = (p.tilt * Math.PI) / 180, ct = Math.cos(t), st = Math.sin(t); const yaw = (p.rotate ? time * 0.12 : 0) + 0.0; const ca = Math.cos(yaw), sa = Math.sin(yaw); const PH = p.platformHeight, cr = 66 * p.centerSize; const cH = (p.center === 'cube' ? cr * 1.5 : p.center === 'sphere' ? cr * 2.2 : 150) * (p.center === 'cube' || p.center === 'sphere' ? 1 : p.centerHeight); const rTop = cr * 1.5 + 24; const n = p.platforms; const outerR = n > 0 ? rTop + (n - 1) * p.spacing : rTop; const ringR = outerR + 40 + p.blockSize * 0.8; const ringStep = p.blockSize * 1.7 + 24; const total = n * PH + cH; const ox = W / 2, oy = H / 2 + total * ct * 0.5 * S + 20 * S; const camv = (x, y, z) => { const xr = x * ca + z * sa, zr = -x * sa + z * ca; return [xr, y * ct - zr * st, zr * ct + y * st]; }; const scr = (x, y, z) => { const c = camv(x, y, z); return [ox + c[0] * S, oy - c[1] * S, c[2]]; }; g.fillStyle = p.bg; g.fillRect(0, 0, W, H); g.strokeStyle = p.line; g.fillStyle = p.bg; g.lineWidth = p.weight * px; g.lineJoin = 'round'; g.lineCap = 'round'; // Orbits on the ground plane. const gap = p.orbitGap; for (let k = 0; k < p.orbits; k++) { const rad = (ringR + k * gap) * S; const dashed = k > 0 && r() < 0.35; g.setLineDash(dashed ? [rad * 0.05, rad * 0.03] : []); g.globalAlpha = k === 0 ? 1 : Math.max(0.35, 0.85 - k * 0.08); g.beginPath(); g.ellipse(ox, oy, rad, rad * st, 0, 0, Math.PI * 2); g.stroke(); } g.setLineDash([]); g.globalAlpha = 1; const cyl = (y0, rad, h, wx = 0, wz = 0) => { const R = rad * S, ry = R * st, hh = h * ct * S; const sc = scr(wx, y0, wz), ox = sc[0]; const yb = sc[1], yt = yb - hh; g.beginPath(); g.rect(ox - R, yt, 2 * R, hh); g.moveTo(ox + R, yt); g.ellipse(ox, yt, R, ry, 0, 0, Math.PI * 2); g.moveTo(ox + R, yb); g.ellipse(ox, yb, R, ry, 0, 0, Math.PI * 2); g.fill(); g.beginPath(); g.ellipse(ox, yt, R, ry, 0, 0, Math.PI * 2); g.moveTo(ox + R, yb); g.ellipse(ox, yb, R, ry, 0, 0, Math.PI); g.moveTo(ox - R, yt); g.lineTo(ox - R, yb); g.moveTo(ox + R, yt); g.lineTo(ox + R, yb); g.stroke(); }; const box = (cx, cz, ang, dr, dt, h, y0) => { const u = [Math.cos(ang), Math.sin(ang)], v = [-u[1], u[0]]; const ring = [[-1, -1], [1, -1], [1, 1], [-1, 1]]; const pt = (s, yy) => scr(cx + u[0] * s[0] * dr / 2 + v[0] * s[1] * dt / 2, yy, cz + u[1] * s[0] * dr / 2 + v[1] * s[1] * dt / 2); const bot = ring.map((s) => pt(s, y0)), top = ring.map((s) => pt(s, y0 + h)); const cD = scr(cx, y0 + h / 2, cz)[2]; const faces = [top]; for (let k = 0; k < 4; k++) faces.push([bot[k], bot[(k + 1) % 4], top[(k + 1) % 4], top[k]]); for (const f of faces) { let d = 0; for (const q of f) d += q[2]; if (d / f.length <= cD + 1e-6 && f !== faces[0]) continue; if (f === faces[0] && st < 0.02) continue; g.beginPath(); f.forEach((q, i) => (i ? g.lineTo(q[0], q[1]) : g.moveTo(q[0], q[1]))); g.closePath(); g.fill(); g.stroke(); } }; const sphere = (y0, rad) => { const cyy = y0 + rad, c = scr(0, cyy, 0), R = rad * S; g.beginPath(); g.arc(c[0], c[1], R, 0, Math.PI * 2); g.fill(); g.stroke(); const line = (fn) => { let pen = false; g.beginPath(); for (let i = 0; i <= 90; i++) { const q = fn(i / 90), cv = camv(q[0], q[1], q[2]); if (cv[2] > 0) { const X = ox + cv[0] * S, Y = oy - (cyy * ct + 0) * S + 0 - (cv[1] - cyy * ct) * S; pen ? g.lineTo(X, Y) : g.moveTo(X, Y); pen = true; } else pen = false; } g.stroke(); }; for (let k = -2; k <= 2; k++) { const ph = (k * Math.PI) / 6; line((u) => [rad * Math.cos(ph) * Math.cos(u * 6.2832), cyy + rad * Math.sin(ph), rad * Math.cos(ph) * Math.sin(u * 6.2832)]); } for (let k = 0; k < 6; k++) { const th = (k * Math.PI) / 6; line((u) => { const ph = u * 6.2832; return [rad * Math.cos(ph) * Math.cos(th), cyy + rad * Math.sin(ph), rad * Math.cos(ph) * Math.sin(th)]; }); } }; // Blocks. const phase = r() * Math.PI * 2; const list = []; for (let j = 0; j < p.rings; j++) { const R = ringR + j * ringStep; const cnt = Math.round(p.blocks * R / ringR); const ph = phase + j * Math.PI / cnt; for (let i = 0; i < cnt; i++) { const a = ph + (i / cnt) * Math.PI * 2; const h = p.blockHeight * (1 - p.variation * 0.8 * r()) * (1 + j * 0.0); const x = R * Math.cos(a), z = R * Math.sin(a); list.push({ a, h, x, z, d: scr(x, 0, z)[2] }); } } list.sort((A, B) => A.d - B.d); const drawBlock = (b) => p.blockShape === 'cylinder' ? cyl(0, p.blockSize * 0.45, b.h, b.x, b.z) : box(b.x, b.z, b.a, p.blockSize, p.blockShape === 'slab' ? p.blockSize * 1.8 : p.blockSize * 0.8, b.h, 0); list.filter((b) => b.d < 0).forEach(drawBlock); // Platforms, bottom to top. for (let i = 0; i < n; i++) cyl(i * PH, outerR - i * p.spacing, PH); const y0 = n * PH; if (p.center === 'cylinder') cyl(y0, cr, cH); else if (p.center === 'cube') box(0, 0, 0.5, cr * 1.5, cr * 1.5, cH, y0); else if (p.center === 'sphere') sphere(y0, cr * 1.1); else { const dh = cH / 9; for (let i = 0; i < 5; i++) cyl(y0 + i * dh * 2, cr * (1 - i * 0.1), dh); } list.filter((b) => b.d >= 0).forEach(drawBlock); } } defineTool({ animated: true, render(ctx, p) { drawScene(ctx.g, ctx.width, ctx.height, ctx.px, ctx.time, p); }, actions: { exportSvg(ctx, p) { const rec = makeSvg(ctx.width, ctx.height); drawScene(rec, ctx.width, ctx.height, ctx.px, ctx.time, p); ctx.download(rec.toString(), 'isometric-scene.svg'); }, }, });37:["$","$L40",null,{"spec":{"code":"$41","name":"Isometric Wireframe Scene","presets":[{"name":"Blueprint","values":{"bg":"#08090b","line":"#e9ecef"}},{"name":"Amber cube","values":{"bg":"#0d0905","line":"#ffb347","blocks":16,"center":"cube","platforms":4,"blockShape":"slab","blockHeight":90}},{"name":"Cyan sphere","values":{"bg":"#050b10","line":"#6fe3ff","tilt":48,"rings":3,"blocks":20,"center":"sphere","orbits":6,"blockSize":22}},{"name":"Disc tower","values":{"bg":"#0a0d08","line":"#c9f7a5","center":"discs","spacing":22,"platforms":5,"variation":0.6,"blockShape":"cylinder","blockHeight":110,"centerHeight":1.5}},{"name":"Monolith","values":{"tilt":28,"rings":2,"blocks":14,"center":"cylinder","spacing":16,"platforms":6,"centerSize":0.6,"centerHeight":2.2,"platformHeight":8}}],"animated":true,"renderer":"canvas2d","sections":[{"label":"Center","controls":[{"key":"center","type":"select","label":"Center object","default":"cylinder","options":[{"label":"Cylinder","value":"cylinder"},{"label":"Cube","value":"cube"},{"label":"Sphere","value":"sphere"},{"label":"Stacked discs","value":"discs"}]},{"key":"centerSize","max":1.8,"min":0.5,"step":0.01,"type":"slider","label":"Center size","default":1},{"key":"centerHeight","max":2.2,"min":0.3,"step":0.01,"type":"slider","label":"Center height","default":1},{"key":"platforms","max":6,"min":0,"step":1,"type":"slider","label":"Platforms","default":3},{"key":"spacing","max":70,"min":10,"step":1,"type":"slider","label":"Platform spacing","default":30},{"key":"platformHeight","max":40,"min":4,"step":1,"type":"slider","label":"Platform height","default":14}]},{"label":"Blocks & orbits","controls":[{"key":"blockShape","type":"select","label":"Block shape","default":"box","options":[{"label":"Blocks","value":"box"},{"label":"Wide slabs","value":"slab"},{"label":"Pillars","value":"cylinder"}]},{"key":"blocks","max":48,"min":4,"step":1,"type":"slider","label":"Blocks","default":24},{"key":"rings","max":3,"min":1,"step":1,"type":"slider","label":"Block rings","default":1},{"key":"blockSize","max":80,"min":14,"step":1,"type":"slider","label":"Block size","default":34},{"key":"blockHeight","max":200,"min":10,"step":1,"type":"slider","label":"Block height","default":46},{"key":"variation","max":1,"min":0,"step":0.01,"type":"slider","label":"Height variation","default":0},{"key":"orbits","max":8,"min":1,"step":1,"type":"slider","label":"Orbits","default":4},{"key":"orbitGap","max":260,"min":40,"step":1,"type":"slider","label":"Orbit spacing","default":130},{"key":"seed","type":"seed","label":"Seed","default":5}]},{"label":"View","controls":[{"key":"tilt","max":80,"min":15,"step":1,"type":"slider","label":"Camera tilt","default":35},{"key":"rotate","type":"toggle","label":"Slow rotation","default":false},{"key":"weight","max":4,"min":0.5,"step":0.1,"type":"slider","label":"Line weight","default":1.2},{"key":"line","type":"color","label":"Line color","default":"#e9ecef"},{"key":"bg","type":"color","label":"Background","default":"#08090b"},{"key":"exportSvg","type":"button","label":"Export SVG","action":"code"}]}],"description":"Isometric line-art scene: a central object on stacked platforms, a ring of blocks facing it and wide concentric orbits, drawn as hidden-line wireframes."},"versionId":"7d37f26b-98c8-4b6f-ae99-f9093c7fccf7","toolId":"341d6c79-a3b3-4d4f-b2e4-f90a9b7f8481","carry":{"bg":"#08090b","line":"#e9ecef","seed":8770,"tilt":35,"rings":1,"blocks":24,"center":"cylinder","orbits":4,"rotate":false,"weight":1.2,"spacing":66,"orbitGap":130,"blockSize":34,"platforms":3,"variation":0,"blockShape":"box","centerSize":1,"blockHeight":46,"centerHeight":1,"platformHeight":14},"reportErrors":true,"footer":"$L42","headExtra":"$L43"}] 39:null 3f:[["$","title","0",{"children":"Isometric Wireframe Scene · Blueprint"}],["$","meta","1",{"name":"description","content":"Isometric line-art scene: a central object on stacked platforms, a ring of blocks facing it and wide concentric orbits, drawn as hidden-line wireframes."}],["$","link","2",{"rel":"canonical","href":"https://blueprint.page/p/isometric-wireframe-scene"}],["$","meta","3",{"property":"og:title","content":"Isometric Wireframe Scene"}],["$","meta","4",{"property":"og:description","content":"Isometric line-art scene: a central object on stacked platforms, a ring of blocks facing it and wide concentric orbits, drawn as hidden-line wireframes."}],["$","meta","5",{"property":"og:url","content":"https://blueprint.page/p/isometric-wireframe-scene"}],["$","meta","6",{"property":"og:site_name","content":"Blueprint"}],["$","meta","7",{"property":"og:image","content":"https://blueprint.page/welcome/opengraph-image.jpg"}],["$","meta","8",{"property":"og:type","content":"website"}],["$","meta","9",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","10",{"name":"twitter:title","content":"Isometric Wireframe Scene"}],["$","meta","11",{"name":"twitter:description","content":"Isometric line-art scene: a central object on stacked platforms, a ring of blocks facing it and wide concentric orbits, drawn as hidden-line wireframes."}],["$","meta","12",{"name":"twitter:image","content":"https://blueprint.page/welcome/opengraph-image.jpg"}],["$","link","13",{"rel":"icon","href":"/favicon.ico?v=2026-10-28","sizes":"any","type":"image/x-icon"}],["$","link","14",{"rel":"icon","href":"/icon.png?v=2026-10-28","sizes":"192x192","type":"image/png"}],["$","link","15",{"rel":"apple-touch-icon","href":"/apple-touch-icon.png?v=2026-10-28","sizes":"180x180","type":"image/png"}],["$","$L44","16",{}]]