// Patchwork Singapore — textile primitives
// Renders SVG patterns, fray edges, stitched borders, dense weave.
// Exports to window so other JSX files can use them.
const TextilePatterns = () => (
{/* ====== Weave patterns — base fabric colors ====== */}
{[
["weave-cream", "#f1e8d6", "#6b4423"],
["weave-sand", "#d4a574", "#7a5230"],
["weave-ochre", "#e0a04b", "#7a5230"],
["weave-clay", "#c75b3e", "#5a2418"],
["weave-claydp", "#8b3a3a", "#3e1818"],
["weave-sage", "#7a8c5c", "#3a4a28"],
["weave-sagedp", "#5e7a48", "#28341a"],
["weave-indigo", "#3d5a6c", "#1a2a36"],
["weave-indigodp","#2c4a5e","#0e1e2a"],
["weave-rust", "#a04a30", "#4a1e10"],
].map(([id, fill, thread]) => (
{/* vertical warp */}
{/* horizontal weft */}
{/* highlight specks */}
))}
{/* ====== Rain-thread overlay (for weather layer) ====== */}
{/* ====== Sun-thread overlay (dry weeks) ====== */}
{/* ====== Satisfaction quilt-block (concentric square block) drop-in ====== */}
{/* ====== Dengue "french knot" ====== */}
{/* ====== Filters for paper-grain shadow ====== */}
);
// Frayed thread edge — drawn around a rect (cx,cy,w,h).
// Returns an array of tiny elements simulating loose threads.
const FrayedEdge = ({ x, y, w, h, color = "#6b4423", seed = 0 }) => {
const lines = [];
// Deterministic pseudo-random based on seed
const r = (k) => {
const s = Math.sin((seed + 1) * 9973 + k * 3.7) * 10000;
return s - Math.floor(s);
};
const N_EDGE = 7;
// Top edge
for (let i = 0; i < N_EDGE; i++) {
const px = x + ((i + 0.5) / N_EDGE) * w + (r(i) - 0.5) * 4;
const len = 1.5 + r(i + 1) * 2.5;
const ang = -90 + (r(i + 2) - 0.5) * 40;
const rad = (ang * Math.PI) / 180;
lines.push(
);
}
// Bottom edge
for (let i = 0; i < N_EDGE; i++) {
const px = x + ((i + 0.5) / N_EDGE) * w + (r(i + 10) - 0.5) * 4;
const len = 1.5 + r(i + 11) * 2.5;
const ang = 90 + (r(i + 12) - 0.5) * 40;
const rad = (ang * Math.PI) / 180;
lines.push(
);
}
// Left edge
for (let i = 0; i < N_EDGE; i++) {
const py = y + ((i + 0.5) / N_EDGE) * h + (r(i + 20) - 0.5) * 4;
const len = 1.5 + r(i + 21) * 2.5;
const ang = 180 + (r(i + 22) - 0.5) * 40;
const rad = (ang * Math.PI) / 180;
lines.push(
);
}
// Right edge
for (let i = 0; i < N_EDGE; i++) {
const py = y + ((i + 0.5) / N_EDGE) * h + (r(i + 30) - 0.5) * 4;
const len = 1.5 + r(i + 31) * 2.5;
const ang = 0 + (r(i + 32) - 0.5) * 40;
const rad = (ang * Math.PI) / 180;
lines.push(
);
}
return {lines};
};
// Decorative cross-stitch corner marks
const CornerStitches = ({ x, y, w, h, color = "#6b4423" }) => (
{/* top-left */}
{/* top-right */}
{/* bottom-left */}
{/* bottom-right */}
);
Object.assign(window, { TextilePatterns, FrayedEdge, CornerStitches });