// illustrations.jsx — Flata SVG-illustrationer för Sandareds projekt
const ILLU_VIEWBOX = "0 0 200 200";
function IlluFrame({ children, bg, size = 200 }) {
return (
);
}
// ─── 1. Sandaredsdagen — torg med scen, musik och människor ─────────
function IlluSandaredsdagen({ size }) {
const person = (x, y, s, body, hair, skin) => (
);
return (
{Array.from({ length: 13 }).map((_, i) => {
const t = (i + 0.5) / 13;
const x = 8 + t * 184;
const y = 38 + Math.sin(t * Math.PI) * 32 - 4;
const colors = ['#E8825A','#4A7BA8','#E8B84A','#2D5F4E','#D94F3C','#8B6BA8'];
const c = colors[i % colors.length];
return (
);
})}
{person(78, 160, 0.7, '#4A7BA8', '#3A2615', '#F4C9A8')}
{person(90, 159, 0.7, '#E8B84A', '#7A6045', '#E0A87C')}
{person(102, 160, 0.7, '#8B6BA8', '#1A1A1A', '#C28B6A')}
{person(114, 158, 0.7, '#D94F3C', '#C8A050', '#F4C9A8')}
{person(126, 161, 0.7, '#2D5F4E', '#4A3520', '#E0A87C')}
{person(138, 159, 0.7, '#E8825A', '#3A2615', '#F4C9A8')}
{person(82, 174, 0.85, '#D94F3C', '#1A1A1A', '#F4C9A8')}
{person(96, 173, 0.85, '#4A8B5C', '#7A6045', '#C28B6A')}
{person(110, 175, 0.85, '#E8B84A', '#3A2615', '#F4C9A8')}
{person(124, 174, 0.85, '#4A7BA8', '#C8A050', '#E0A87C')}
{person(138, 175, 0.85, '#8B6BA8', '#4A3520', '#F4C9A8')}
{person(74, 188, 1.0, '#E8825A', '#3A2615', '#F4C9A8')}
{person(88, 188, 1.0, '#2D5F4E', '#4A3520', '#E0A87C')}
{person(102, 190, 1.05, '#D94F3C', '#1A1A1A', '#C28B6A')}
{person(116, 188, 1.0, '#E8B84A', '#7A6045', '#F4C9A8')}
{person(130, 188, 1.0, '#4A7BA8', '#3A2615', '#E0A87C')}
{person(144, 190, 0.95, '#8B6BA8', '#C8A050', '#F4C9A8')}
);
}
// ─── 2. Höstmarknad ─────────────────────────────────────────────────
function IlluHostmarknad({ size }) {
return (
{[-22,-14,-6,2,10,18,26].map((x, i) => (
))}
{[-14,-6,2,10,16].map((x, i) => (
))}
{[10,30,50,110,132,178].map((x, i) => (
))}
);
}
// ─── 3. Belysning i Sandaredsparken ──────────────────────────────────
function IlluBelysning({ size }) {
return (
);
}
// ─── 4. Julbelysning ─────────────────────────────────────────────────
function IlluJul({ size }) {
return (
{[[18,70],[180,55],[160,25],[10,110],[185,100]].map(([x,y],i) => (
))}
{[[-18,-64,'#E8B84A'],[-6,-72,'#E8825A'],[8,-76,'#E8B84A'],[-12,-82,'#E8825A'],[4,-88,'#E8B84A'],[16,-68,'#E8825A'],[-20,-72,'#E8B84A'],[12,-82,'#E8825A']].map(([x,y,c],i) => (
))}
{[-16,-8,0,8,16].map((x,i) => (
))}
{[{x:-28,h:0,hair:'#3A2615',cloak:'#4A7BA8'},{x:-14,h:-2,hair:'#7A6045',cloak:'#D94F3C'},{x:0,h:0,hair:'#4A3520',cloak:'#2D5F4E'},{x:14,h:-2,hair:'#C8A050',cloak:'#8B6BA8'},{x:28,h:0,hair:'#3A2615',cloak:'#E8825A'}].map((p,i) => (
))}
{Array.from({ length: 9 }).map((_, i) => {
const t = (i + 0.5) / 9;
const x = 10 + t * 180;
const y = 50 + Math.sin(t * Math.PI) * 14 + (t - 0.5) * 10;
const c = i % 2 === 0 ? '#E8B84A' : '#E8825A';
return (
);
})}
);
}
// ─── 5. Solbäddar & pingisbord ────────────────────────────────────────
function IlluStranden({ size }) {
return (
);
}
// ─── 6. Utegym ───────────────────────────────────────────────────────
function IlluUtegym({ size }) {
return (
);
}
// ─── 7. Laddstolpar ──────────────────────────────────────────────────
function IlluLadd({ size }) {
return (
);
}
// ─── 8. Discgolfbana ─────────────────────────────────────────────────
function IlluDisc({ size }) {
return (
{[-30,-20,-10,0,10,20,30].map((a,i) => {
const rad = (a * Math.PI) / 180;
const x2 = 100 + Math.sin(rad) * 32;
return ;
})}
);
}
// ─── 9. Blommor i centrum ────────────────────────────────────────────
function IlluBlommor({ size }) {
return (
{[0,72,144,216,288].map(a => (
))}
{[0,72,144,216,288].map(a => (
))}
{[0,72,144,216,288].map(a => (
))}
);
}
// ─── 10. Ortsråd Väst ────────────────────────────────────────────────
function IlluOrtsrad({ size }) {
const seat = (x, y, body, hair, skin, side = 'front') => {
if (side === 'back') return (
);
if (side === 'left') return (
);
if (side === 'right') return (
);
return (
);
};
return (
{seat(60, 134, '#4A7BA8', '#3A2615', '#F4C9A8', 'back')}
{seat(80, 132, '#D94F3C', '#7A6045', '#E0A87C', 'back')}
{seat(100, 132, '#E8B84A', '#1A1A1A', '#C28B6A', 'back')}
{seat(120, 132, '#2D5F4E', '#C8A050', '#F4C9A8', 'back')}
{seat(140, 134, '#8B6BA8', '#4A3520', '#E0A87C', 'back')}
{seat(34, 152, '#E8825A', '#3A2615', '#F4C9A8', 'left')}
{seat(166, 152, '#4A8B5C', '#7A6045', '#C28B6A', 'right')}
);
}
// ─── 11. Terrängbana ─────────────────────────────────────────────────
function IlluTerrang({ size }) {
return (
);
}
// ─── 12. Bänkar i centrum ────────────────────────────────────────────
function IlluBank({ size }) {
return (
);
}
// ─── Hero landscape — Viaredssjön ────────────────────────────────────
function HeroLandscape({ width = 560, height = 460 }) {
return (
);
}
Object.assign(window, {
IlluSandaredsdagen, IlluHostmarknad, IlluBelysning, IlluJul, IlluStranden,
IlluUtegym, IlluLadd, IlluDisc, IlluBlommor, IlluOrtsrad, IlluTerrang, IlluBank,
HeroLandscape,
});