// Lalaluxe — components/brand.jsx // What the brand draws by hand: the wordmark and the painted finger. Loaded by booking.html and // admin.html before their shared primitives; hues come from the paint tokens in colors.css. The // server shells in lib/booking-router.js and the favicons carry the same logo geometry. /* ---------- Logo: drawn capitals, the X made with a brush ---------- */ // Custom high-contrast capitals built from stems, hairlines and one arc — nothing is typed, so the // mark needs no font. S is the stem and h the hairline on a 100-unit cap height. function logoGlyphs(S, h) { const H = 100; const R = (x, y, w, hh) => `M${x} ${y}h${w}v${hh}h${-w}Z`; const P = (...pts) => "M" + pts.map((p) => p.join(" ")).join("L") + "Z"; const beak = (x, y, dir) => P([x, y], [x, y + dir * 31], [x - 1.5 - h * 0.25, y + dir * 31], [x - 7.5, y + dir * h]); const t = h + 0.5; // the thin stroke return { L: { w: 58, d: R(8, 0, S, H) + R(0, 0, S + 16, h) + R(0, H - h, 58, h) + beak(58, H, -1) }, A: { w: 98, d: P([44, 0], [44 + t, 0], [8 + t, H], [8, H]) + P([44, 0], [44.5 + S, 0], [75.5 + S, H], [75, H]) + R(23.5, 64, 41, h) + R(0, H - h, 19 + h, h) + R(67.5, H - h, 15.5 + S, h) }, U: { w: 82, d: `M9 0H${9 + S}V60A${(61 - S) / 2} ${39.7 - h} 0 0 0 70 60V0H${70 + t}V60A${(61 + t) / 2} 40 0 0 1 9 60Z` + R(1, 0, S + 16, h) + R(63, 0, 15 + h, h) }, E: { w: 60, d: R(8, 0, S, H) + R(0, 0, 56, h) + beak(56, 0, 1) + R(20, 50 - h / 2, 25, h) + R(45, 39, 1.2 + h * 0.25, 22) + R(0, H - h, 58, h) + beak(58, H, -1) }, }; } const LOGO_TEXT = logoGlyphs(17, 4.6); // sturdy cut for small sizes const LOGO_FINE = logoGlyphs(15, 2.3); // display cut // the X: two passes of a loaded brush const LOGO_X = { w: 92, a: "M3 6C8-1 20 0 26 8 41 29 62 59 88 92 92 98 88 105 80 104 74 103 71 99 68 95 49 68 27 39 6 16 2 12 1 9 3 6ZM90 101l7 5-2 3-8-5ZM84 105l5 5-3 1-5-5Z", b: "M79 0C85-1 90 4 87 9 69 37 46 68 21 100 17 105 8 105 7 100 6 97 8 93 11 89 35 57 57 28 73 5 75 2 77 0 79 0ZM7 104l-5 6 3 1 5-6Z", }; function logoRow(G, word, gap, y) { let x = 0; const nodes = []; for (const ch of word) { if (ch === "X") { nodes.push( , ); x += LOGO_X.w - 4 + gap; } else { nodes.push(); x += G[ch].w + gap; } } return { nodes, width: x - gap }; } // The logo the studio picked (Studio → Logo), as the server wrote it on . Every // logo but the drawn one is a set of files under images/brand// — the wordmark for a light and a // dark ground (the theme shows one), and the app icon. Twinned with BRANDS in lib/brand.js. const BRAND_LOGOS = { classic: { name: "The brushed X", note: "Drawn capitals, the X in two pink brushstrokes" }, fluffy: { name: "Fluffy", note: "Soft fur letters, pink after dark", logo: ["logo-day.webp", "logo-night.webp"] }, chrome: { name: "Candy chrome", note: "Pink chrome with a halo", logo: ["logo-day.webp", "logo-night.webp"] }, love: { name: "Love note", note: "Handwritten with a heart", logo: ["logo-day.svg", "logo-night.svg"] }, halo: { name: "Pink halo", note: "Jelly letters under a halo, hearts around", logo: ["logo-day.webp", "logo-night.webp"] }, drip: { name: "Drip", note: "Candy letters melting, cut out as a sticker", logo: ["logo-day.webp", "logo-night.webp"] }, ransom: { name: "Ransom note", note: "Cut-out letters and a lipstick kiss", logo: ["logo-day.webp", "logo-night.webp"] }, }; const brandNow = () => { const id = typeof document !== "undefined" && document.documentElement.dataset.brand; return id && Object.hasOwn(BRAND_LOGOS, id) ? id : "classic"; }; // The drawn logo's tab icon, as the pages carry it: the X in pink on jet (the studio's: jet on pink). function drawnTabIcon(studio) { const [ground, ink] = studio ? ["#FBACBE", "#0B0908"] : ["#0B0908", "#FBACBE"]; const svg = ``; return "data:image/svg+xml," + encodeURIComponent(svg); } // Put a logo on the page now: the wordmarks redraw and the tab icon follows. function setBrand(id) { if (!Object.hasOwn(BRAND_LOGOS, id || "") || id === brandNow()) return; document.documentElement.dataset.brand = id; const icon = document.querySelector('link[rel="icon"]'); if (icon) { const studio = location.pathname.startsWith("/admin"); icon.setAttribute("type", id === "classic" ? "image/svg+xml" : "image/png"); if (id === "classic") icon.removeAttribute("sizes"); icon.setAttribute("href", id === "classic" ? drawnTabIcon(studio) : `/images/brand/${id}/${studio ? "console" : "favicon"}-32.png`); } window.dispatchEvent(new CustomEvent("brandchange", { detail: id })); } function useBrand() { const [id, setId] = React.useState(brandNow); React.useEffect(() => { const on = () => setId(brandNow()); window.addEventListener("brandchange", on); return () => window.removeEventListener("brandchange", on); }, []); return id; } // A logo's wordmark from its files, both grounds; the theme shows one. function LogoArt({ id }) { const [day, night] = BRAND_LOGOS[id].logo; return (

); } // The wordmark. `fine` is the display cut, for sizes where hairlines can hold. `brand` draws a // logo other than the one on the page (the console's picker). function Logo({ fine = false, brand }) { const current = useBrand(); const id = brand || current; if (id !== "classic") return ; const row = logoRow(fine ? LOGO_FINE : LOGO_TEXT, "LALALUXE", 13, 0); return ( ); } // The mark on its own, where the full word cannot fit (the console's collapsed rail): the brushed X, // or the picked logo's app icon. function LogoX({ brand }) { const current = useBrand(); const id = brand || current; if (id !== "classic") return

; return ( ); } /* ---------- The painting ---------- */ // Filters shared by the painted figure: a hand-drawn wobble for contours and a dragged-brush // texture for colour fields. Rendered once at the app root. function PaintDefs() { return ( ); } // The painting: one fingertip on a colour field, its nail growing with `ext` // (free-edge length past the fingertip, in viewBox units). `marks` rules the lengths across the // ground. Built the way a painter would block it in — a flat mid-tone, a cut shadow on the // turned side, a plane of light, a few gestural marks, then the contour in ink. // `look` adds what a service does to the nail, or what a piece of nail art puts on it (see // ServiceIcon and ArtIcon), `shape` cuts the free edge, and `frame` crops the picture. // What the nail is painted with for a look: [base, shaded side, stroke of light, shade strength]. const NAIL_FINISHES = { lacquer: ["var(--lacquer)", "var(--lacquer-shade)", "var(--lacquer-light)", 1], french: ["var(--lacquer-light)", "var(--lacquer)", "var(--chrome-light)", 0.6], frenchart: ["var(--lacquer-light)", "var(--lacquer)", "var(--chrome-light)", 0.6], cateye: ["var(--paint-berry)", "var(--art-ink)", "var(--lacquer)", 0.4], bling: ["var(--chrome)", "var(--chrome-shade)", "var(--chrome-light)", 0.7], ombre: ["var(--on-paint)", "var(--lacquer-light)", "var(--chrome-light)", 0.4], milkbath: ["var(--on-paint)", "var(--lacquer-light)", "var(--chrome-light)", 0.75], airbrush: ["var(--on-paint)", "var(--lacquer-light)", "var(--chrome-light)", 0.5], chrome: ["var(--chrome)", "var(--chrome-shade)", "var(--chrome-light)", 1], animal: ["var(--on-paint)", "var(--chrome)", "var(--chrome-light)", 0.45], // a nail with nothing on it yet: the bare nail, its outline dashed (Build your own's empty nail) bare: ["var(--nail-bare)", "var(--skin-shade)", "var(--nail-bare)", 0.3], }; // The ground under every painted icon: two dragged passes over the colour field. function PaintGround({ w = 300, h = 236 }) { return ( <> ); } // How the free edge is cut: [corner radius, sidewall taper]. Almond, stiletto and round draw their own curve. // Duck flares the other way: the free edge fans out past the sidewalls to a wide, square tip. const NAIL_SHAPES = { square: [3, 0], coffin: [2.5, 9], almond: [6, 8], stiletto: [8, 9], round: [10, 0], duck: [2.5, 0] }; // how far each side of a duck tip reaches past the nail bed const DUCK_FLARE = 6; // Cow print: [across from the nail's centre, how far down it, turn°, size, outline]. const COW_BLOT = [ "m-7-2c1-5 7-7 11-3 4 3 3 8-1 9-3 1-4 4-8 2-4-2-3-5-2-8z", "m-5-5c4-3 9-1 9 3 0 3-3 3-3 6 0 3-5 4-7 1-2-3-2-7 1-10z", "m-6 0c0-4 5-6 8-4 3 2 5 5 2 8-3 3-10 1-10-4z", ]; // Full bling: stones set edge to edge, each row offset from the last. [across from the centre, how far down] const BLING_STONES = [0.08, 0.2, 0.32, 0.44, 0.56, 0.68, 0.8, 0.92].flatMap((p, row) => (row % 2 ? [-9, 0, 9] : [-13.5, -4.5, 4.5, 13.5]).map((dx) => [dx, p])); const COW_PATCHES = [ [13, 0.15, 0, 1.15, COW_BLOT[0]], [-11, 0.3, 0, 1.2, COW_BLOT[1]], [8, 0.48, 0, 1.25, COW_BLOT[2]], [-13, 0.65, 40, 1.05, COW_BLOT[0]], [12, 0.77, -30, 1.15, COW_BLOT[1]], [-2, 0.92, 0, 0.85, COW_BLOT[2]], ]; function HandStage({ ext, marks = [], label = "Nail length preview", look, shape, frame = "0 0 300 236" }) { const CX = 150, T = 114, BED = 50, NW = 38; const e = Math.max(0, ext); const f = (n) => Math.round(n * 100) / 100; const x = CX - NW / 2; const top = T + 4 - e; // free edge const cut = T + BED; // lowest point of the cuticle curve const c = NW * 0.3; const cutTo = NAIL_SHAPES[shape]; const r = cutTo ? cutTo[0] : Math.max(3.2, 11 - e * 0.24); // soft square when short, crisp when long const t = cutTo ? cutTo[1] : Math.min(7, Math.max(0, (e - 10) * 0.085)); // sidewalls taper once there is length const yt = Math.max(T + 6, top + r); // straight over the nail bed, then the free edge const mid = (top + cut) / 2; const rise = yt - top; const fl = shape === "duck" ? DUCK_FLARE : 0; const xl = x - 3 - fl, xr = x + NW + 3 + fl; // the nail's full span, past either side, for what is painted across it const edge = shape === "duck" ? `C${x + NW} ${f(yt - rise * 0.3)} ${f(x + NW + fl * 0.7)} ${f(top + rise * 0.3)} ${x + NW + fl} ${f(top + r)}Q${x + NW + fl} ${f(top)} ${f(x + NW + fl - r)} ${f(top)}L${f(x - fl + r)} ${f(top)}Q${x - fl} ${f(top)} ${x - fl} ${f(top + r)}C${f(x - fl * 0.7)} ${f(top + rise * 0.3)} ${x} ${f(yt - rise * 0.3)} ${x} ${f(yt)}` : shape === "almond" ? `C${x + NW} ${f(yt - rise * 0.5)} ${CX + 11} ${f(top + 4)} ${CX} ${f(top)}C${CX - 11} ${f(top + 4)} ${x} ${f(yt - rise * 0.5)} ${x} ${f(yt)}` : shape === "stiletto" ? `C${x + NW - 0.5} ${f(yt - rise * 0.38)} ${CX + 5.5} ${f(top + 13)} ${CX + 1.3} ${f(top + 1.6)}Q${CX} ${f(top - 0.6)} ${CX - 1.3} ${f(top + 1.6)}C${CX - 5.5} ${f(top + 13)} ${x + 0.5} ${f(yt - rise * 0.38)} ${x} ${f(yt)}` : shape === "round" ? `C${x + NW} ${f(top + 3)} ${CX + 13} ${f(top)} ${CX} ${f(top)}C${CX - 13} ${f(top)} ${x} ${f(top + 3)} ${x} ${f(yt)}` : `L${f(x + NW - t)} ${f(top + r)}Q${f(x + NW - t)} ${f(top)} ${f(x + NW - t - r)} ${f(top)}L${f(x + t + r)} ${f(top)}Q${f(x + t)} ${f(top)} ${f(x + t)} ${f(top + r)}L${x} ${f(yt)}`; const nail = `M${x} ${f(cut - c)}C${x} ${f(cut + c * 0.5)} ${x + NW} ${f(cut + c * 0.5)} ${x + NW} ${f(cut - c)}L${x + NW} ${f(yt)}${edge}Z`; // one slender fingertip, a little asymmetric, the way a real one is const finger = `M121.5 252C121.5 238 119.5 ${T + 116} 120.5 ${T + 101}C121.5 ${T + 84} 124 ${T + 68} 123.5 ${T + 46}` + `C123 ${T + 17} 133.5 ${T} 149.8 ${T}C166.5 ${T} 177 ${T + 18} 176.5 ${T + 47}` + `C176 ${T + 68} 178.5 ${T + 84} 179.5 ${T + 101}C180.5 ${T + 116} 178.5 238 178.5 252Z`; // several paintings can share a page (the service list), so each keeps its own clip paths const id = "hs" + React.useId().replace(/[^a-zA-Z0-9]/g, ""); const clip = (name) => `url(#${id}${name})`; // fill in: the grown-out gap above the cuticle, the cuticle's own curve lifted 15 const gap = `M${x - 3} ${f(cut - c - 15)}C${x - 3} ${f(cut + c * 0.5 - 15)} ${x + NW + 3} ${f(cut + c * 0.5 - 15)} ${x + NW + 3} ${f(cut - c - 15)}`; // repair: where the nail has snapped const snapY = top + (cut - top) * 0.36; const snap = `M${x - 3} ${f(snapY + 3)}L${f(x + NW * 0.25)} ${f(snapY - 6)}L${CX} ${f(snapY + 4)}L${f(x + NW * 0.75)} ${f(snapY - 6)}L${x + NW + 3} ${f(snapY + 3)}`; const [paint, paintShade, paintLight, shadeStrength] = NAIL_FINISHES[look] || NAIL_FINISHES.lacquer; const ny = (p) => f(top + (cut - top) * p); // a point p of the way down the nail, tip to cuticle // a raised five-petal bloom, and a cut stone, set a point p of the way down the nail const bloom = (dx, p, size) => ( {[0, 1, 2, 3, 4].map((k) => { const turn = ((-90 + 72 * k) * Math.PI) / 180; return ; })} ); const stone = (dx, p, w, h) => ( ); const beads = (spots, r, fill) => ( {spots.map(([dx, p], i) => )} ); const lacquer = ( {/* french: the free edge left white, down to a smile line */} {(look === "french" || look === "frenchart" || look === "junk") && } {/* ombré: colour fading from the tip down to nothing at the cuticle */} {look === "ombre" && } {/* cat eye: a band of light drawn across dark polish by a magnet */} {look === "cateye" && } {look === "cateye" && } {/* the far side falls into shade */} {/* airbrush: an aura of colour blown into the middle of the nail */} {look === "airbrush" && } {/* one loaded stroke of light */} {/* milk bath: a milky swirl with petals and gold flake set into it */} {look === "milkbath" && ( {[[-7, 0.3, 24], [8, 0.46, -30], [-4, 0.62, 10], [7, 0.78, 40]].map(([dx, p, turn], i) => ( ))} {[[5, 0.2], [-9, 0.5], [1, 0.84], [10, 0.62]].map(([dx, p], i) => )} )} {/* full bling: stones over the whole nail, running off the edges */} {look === "bling" && beads(BLING_STONES, 3.4, "var(--chrome-light)")} {/* animal print: cow — black patches on white, running off the edges */} {look === "animal" && COW_PATCHES.map(([dx, p, turn, size, d], i) => ( ))} {/* chrome: the room bent across a mirror */} {look === "chrome" && } {look === "chrome" && } {/* gel: a wet band of gloss */} {look === "gel" && } {look === "fillin" && } {look === "fillin" && } ); const crack = ; return ( ); } // a four-point sparkle function sparkPath(cx, cy, s) { const k = (n) => Math.round(n * 100) / 100; return `M${cx} ${k(cy - s)}C${k(cx + s * 0.16)} ${k(cy - s * 0.3)} ${k(cx + s * 0.3)} ${k(cy - s * 0.16)} ${k(cx + s)} ${cy}` + `C${k(cx + s * 0.3)} ${k(cy + s * 0.16)} ${k(cx + s * 0.16)} ${k(cy + s * 0.3)} ${cx} ${k(cy + s)}` + `C${k(cx - s * 0.16)} ${k(cy + s * 0.3)} ${k(cx - s * 0.3)} ${k(cy + s * 0.16)} ${k(cx - s)} ${cy}` + `C${k(cx - s * 0.3)} ${k(cy - s * 0.16)} ${k(cx - s * 0.16)} ${k(cy - s * 0.3)} ${cx} ${k(cy - s)}Z`; } /* ---------- Service icons: the same painting, cropped to the fingertip, showing what the service does ---------- */ // So nobody has to read: a long nail and a sparkle is new length; a gold band at the cuticle is the // grown-out gap being filled; a second coat hovering over a short nail is an overlay; a snapped // nail is a repair; a short round nail with a wet shine is gel polish. The value is each icon's // nail length. Mirrors SERVICE_ICONS in lib/site-config.js. const SERVICE_ICONS = { fullset: 56, fillin: 56, overlay: 6, repair: 44, gel: 10, plain: 30 }; function ServiceIcon({ kind }) { const look = SERVICE_ICONS[kind] === undefined ? "plain" : kind; return ( ); } /* ---------- Nail art icons: the same painting, a little closer, wearing the art ---------- */ // A french tip is a white free edge, and with designs it carries a heart under it; cat eye is a // band of light across dark polish; ombré fades from the tip; charms, 3D art and a face sit on the // lacquer; chrome is a mirror; airbrush is an aura of colour; full bling is a nail paved in stones; // junk nails wear a little of everything. Milk bath (a milky nail with petals in it) and animal // print (cow) are drawn too, for a studio that offers them. `shape` cuts the nail the way the // customer has chosen hers. Mirrors ART_ICONS in lib/site-config.js. const ART_ICONS = ["french", "frenchart", "cateye", "ombre", "charms", "chrome", "flowers", "character", "airbrush", "bling", "junk", "milkbath", "animal", "plain"]; function ArtIcon({ kind, shape }) { return ( ); } /* ---------- Shape icons: the same nail, cut each way ---------- */ // For the look screen's shape picker: each cut and how long the nail is drawn at it. The cut is also // what ArtIcon takes as `shape`. Which cut a shape wears is `content.shapeIcon[id]`, picked in the // console; mirror SHAPE_ICONS in lib/site-config.js. const SHAPE_ICONS = { square: 38, coffin: 46, almond: 46, stiletto: 56, round: 10, duck: 42 }; function ShapeIcon({ cut }) { const at = cut in SHAPE_ICONS ? cut : "square"; return ( ); } /* ---------- Visit icons: a calendar page with one day ticked, or three ---------- */ // How many visits she is booking, without a word: a single appointment is one date, a plan is three. const VISIT_DAYS = { cols: [38, 52, 66, 80], rows: [54, 67, 80], one: [[66, 67]], three: [[38, 54], [66, 67], [52, 80]] }; function VisitIcon({ count }) { const ticked = count === 1 ? VISIT_DAYS.one : VISIT_DAYS.three; const is = (x, y) => ticked.some(([tx, ty]) => tx === x && ty === y); return ( ); } /* ---------- Toe icons: one big toe, close up, painted the same way ---------- */ // For the toes screen: sculpted acrylic is square and a touch long, gel is rounded with a wet shine, // solid is the plain nail, french has the white free edge. One toe only, cropped close, the nail // most of its width — the owner's call after trying a row of toes and a smaller nail. // `art` paints a piece of nail art (one of ART_ICONS) on the toenail instead, for the toe art ladder, // drawn as ArtIcon draws it on a finger but laid out for the short, wide nail of a big toe; "bare" is // a toe built toe by toe that wears nothing yet, its nail bare and dashed. `base` cuts the nail as // acrylic or gel under the art, for a toe built toe by toe. const TOE_LOOKS = ["acrylic", "gel", "solid", "french"]; function ToeIcon({ kind, art, base }) { const pick = art === undefined ? null : art === "bare" || ART_ICONS.includes(art) ? art : "plain"; const look = pick ? (pick === "french" || pick === "frenchart" || pick === "junk" ? "french" : "solid") : TOE_LOOKS.includes(kind) ? kind : "solid"; const cut = TOE_LOOKS.slice(0, 2).includes(base) ? base : look; const acrylic = cut === "acrylic", gel = cut === "gel"; const f = (n) => Math.round(n * 100) / 100; const id = "toe" + React.useId().replace(/[^a-zA-Z0-9]/g, ""); const cx = 66, w = 96, tip = 24, x0 = cx - w / 2, x1 = cx + w / 2; // a toe is widest at the pad and rounds over at the tip const outline = `M${f(x0 + w * 0.05)} 176C${f(x0 - w * 0.02)} 152 ${f(x0 - w * 0.06)} ${f(tip + w * 0.86)} ${f(x0 - w * 0.02)} ${f(tip + w * 0.46)}` + `C${f(x0 + w * 0.03)} ${f(tip + w * 0.12)} ${f(x0 + w * 0.24)} ${tip} ${cx} ${tip}` + `C${f(x1 - w * 0.24)} ${tip} ${f(x1 - w * 0.03)} ${f(tip + w * 0.12)} ${f(x1 + w * 0.02)} ${f(tip + w * 0.46)}` + `C${f(x1 + w * 0.06)} ${f(tip + w * 0.86)} ${f(x1 + w * 0.02)} 152 ${f(x1 - w * 0.05)} 176`; const nw = w * 0.76, nh = nw * 0.86; const h = nh * (acrylic ? 1.1 : gel ? 0.88 : 1); const ny = tip + w * (acrylic ? 0.06 : gel ? 0.15 : 0.1), nx = cx - nw / 2; const r = gel ? nw * 0.3 : acrylic ? nw * 0.07 : nw * 0.13, c = nw * 0.26, flare = gel ? 0 : nw * 0.03; const nail = `M${f(nx)} ${f(ny + h - c)}C${f(nx)} ${f(ny + h + c * 0.5)} ${f(nx + nw)} ${f(ny + h + c * 0.5)} ${f(nx + nw)} ${f(ny + h - c)}` + `L${f(nx + nw + flare)} ${f(ny + r)}Q${f(nx + nw + flare)} ${f(ny)} ${f(nx + nw + flare - r)} ${f(ny)}` + `L${f(nx - flare + r)} ${f(ny)}Q${f(nx - flare)} ${f(ny)} ${f(nx - flare)} ${f(ny + r)}Z`; const crease = ny + h + w * 0.2; // the art, set out on the toenail: across from its centre (in finger-nail units, widened to this // nail) and a point p of the way down it, tip to cuticle const k = nw / 38, s = 1.45; const X = (dx) => f(cx + dx * k), Y = (p) => f(ny + h * p); const [paint, paintShade, paintLight, shadeStrength] = (look === "solid" && NAIL_FINISHES[pick]) || NAIL_FINISHES.lacquer; const bloom = (dx, p, size) => ( {[0, 1, 2, 3, 4].map((n) => { const turn = ((-90 + 72 * n) * Math.PI) / 180; return ; })} ); const stone = (dx, p, sw, sh) => ( ); const beads = (spots, rad, fill) => ( {spots.map(([dx, p], i) => )} ); return ( ); } /* ---------- The wall: what hangs either side of the page on a wide screen ---------- */ // One loaded brush pass — the mark that underlines a headline — stretched to w × h. const BRUSH_PASS = "M4 13C3 8 8 5 16 6c44-3 104-1 154-1.5 40-.5 80 1 113-.5 7-.2 13 1 12 3-1 1.6-9 1.4-16 2 7 .6 14 1.5 13 3.4-1 1.6-11 1-20 1.2 6 .8 12 2 11 3.4-1.5 1.8-13 .6-25 .4-58-.4-138 2.2-198 1.6-20-.2-40 1.5-50-.5-4-.9-5.5-2.5-6-5.5Z"; function brushPass(w, h) { let i = 0; return BRUSH_PASS.replace(/-?\d*\.?\d+/g, (n) => Math.round(Number(n) * (i++ % 2 ? h / 24 : w / 300) * 10) / 10); } // The logo's brushed X at the scale of the room: two passes cross behind the page, so each wall // shows two arms. [centre x, centre y, length, width, lean°, paint] on a 1440 × 900 wall. const WALL_PASSES = [ [704, 474, 1780, 236, -33, "var(--paint-rose)"], [742, 426, 1720, 150, 31, "var(--paint-ochre)"], ]; function WallArt() { return ( ); }