/* global React */
// Botanical-plate quality plants. Each fits 200×280 viewBox, crown at ~y=50, roots at y=280.
// Uses hand-tuned bezier curves, dual-tone washes, subtle stroke weight variation.
const LINE = "#2d1e12"; // warm sepia ink
const LINE_SOFT = "#4a3f35";
const LEAF_WASH = "#b8ccae"; // soft sage wash
const LEAF_WASH_2 = "#9cb692";
const LEAF_DEEP = "#6f8a66";
const SOIL_TONE = "#4a3420";
const PETAL_WASH = "#f5d4cf";
const PETAL_WASH_2 = "#edb8b2";
const BERRY = "#b83c3c";
const BERRY_DEEP = "#8a2929";
const GOLD = "#d9a85c";
const WHEAT = "#dfb768";
const LAVENDER = "#a68fc9";
const LAVENDER_DEEP = "#7e66a5";
// Reusable soft-wash SVG filter (only needs to be defined once per page)
function BotanicalDefs() {
return (
);
}
// Progressive stroke draw
function Drawn({ d, dash = 400, grow = 1, stroke = LINE, sw = 1.3, fill = "none", delay = 0 }) {
const off = dash * (1 - Math.max(0, Math.min(1, grow)));
return (
);
}
function Wash({ d, fill, grow = 1, delay = 0, opacity = 0.9 }) {
return (
);
}
// Leaf with vein detail
function BotanicalLeaf({ d, flip = false, grow = 1, delay = 0, veins = [] }) {
return (
{veins.map((v, i) => (
))}
);
}
// Soil mound
function SoilMound() {
return (
);
}
// ============= COFFEE CHERRY =============
function CoffeeCherry({ grow = 1, bloom = 0 }) {
const g = grow, b = bloom;
return (
{/* main stem */}
{/* leaf 1: lower left */}
{g > 0.18 && }
{/* leaf 2: lower right */}
{g > 0.28 && }
{/* leaf 3: mid left */}
{g > 0.42 && }
{/* leaf 4: upper right */}
{g > 0.56 && }
{/* topmost small leaves */}
{g > 0.72 && <>
}
{/* coffee cherries (bloom) */}
{b > 0 &&
{/* cluster at leaf junctions */}
{[
{x: 86, y: 200, r: 6, d: 0},
{x: 96, y: 208, r: 7, d: 100},
{x: 112, y: 170, r: 6, d: 200},
{x: 108, y: 162, r: 5, d: 280},
{x: 90, y: 130, r: 5, d: 380},
{x: 110, y: 100, r: 6, d: 480},
].map((c, i) => (
))}
}
);
}
// ============= WHEAT STALK =============
function WheatStalk({ grow = 1, bloom = 0 }) {
const g = grow, b = bloom;
const grains = [];
for (let i = 0; i < 8; i++) {
const y = 74 + i * 11;
const side = i % 2 ? 1 : -1;
grains.push(
{/* awn */}
);
}
return (
{/* base leaves */}
{g > 0.15 && <>
}
{/* main stem */}
{/* joints on stem */}
{[200, 160, 120].map((y, i) => g > 0.4 + i*0.1 && (
))}
{/* head wrapper */}
{g > 0.75 && {grains}}
);
}
// ============= LOTUS =============
function Lotus({ grow = 1, bloom = 0 }) {
const g = grow, b = bloom;
return (
{/* water lines */}
{/* lily pad */}
{g > 0.15 &&
{/* pad vein */}
}
{/* second pad behind */}
{g > 0.3 &&
}
{/* stem */}
{/* lotus flower: layered petals */}
{g > 0.55 &&
{/* outer petals */}
{[-72, -36, 0, 36, 72].map((rot, i) => {
const open = 0.2 + b * 0.8;
return (
);
})}
{/* inner petals (slightly smaller) */}
{b > 0.3 && [-50, -18, 18, 50].map((rot, i) => (
))}
{/* center */}
{/* stamen dots */}
{b > 0.5 && Array.from({ length: 8 }).map((_, i) => (
))}
}
);
}
// ============= SUNFLOWER =============
function Sunflower({ grow = 1, bloom = 0 }) {
const g = grow, b = bloom;
return (
{/* thick stem */}
{/* hairs on stem */}
{g > 0.5 && [220, 180, 140, 110].map((y, i) => (
))}
{/* leaves */}
{g > 0.3 && }
{g > 0.42 && }
{/* sunflower head */}
{b > 0 &&
{/* back layer of petals */}
{Array.from({ length: 18 }).map((_, i) => (
))}
{/* front layer shorter petals */}
{Array.from({ length: 14 }).map((_, i) => (
))}
{/* center disk */}
{/* seed pattern */}
{Array.from({ length: 24 }).map((_, i) => {
const a = i * 137.5 * Math.PI / 180;
const r = Math.sqrt(i) * 2.2;
return r < 11 ? (
) : null;
})}
}
);
}
// ============= LAVENDER =============
function Lavender({ grow = 1, bloom = 0 }) {
const g = grow, b = bloom;
const stems = [
{ x: 78, h: 110, d: 0 },
{ x: 100, h: 145, d: 80 },
{ x: 122, h: 118, d: 160 },
{ x: 88, h: 95, d: 240 },
{ x: 112, h: 100, d: 320 }
];
return (
{/* base leaves */}
{g > 0.12 && <>
}
{/* stems */}
{stems.map((s, i) => (
{/* blossom spikes */}
{b > 0 &&
{Array.from({ length: 7 }).map((_, k) => {
const y = 272 - s.h + 8 + k * 7;
return (
);
})}
}
))}
);
}
// ============= OLIVE TREE =============
function OliveTree({ grow = 1, bloom = 0 }) {
const g = grow, b = bloom;
return (
{/* trunk with character */}
{/* trunk shading */}
{g > 0.3 && }
{/* branches */}
{g > 0.35 && <>
}
{/* silver-green olive foliage */}
{b > 0 &&
{[
{ cx: 56, cy: 166, r: 22 },
{ cx: 142, cy: 138, r: 24 },
{ cx: 70, cy: 104, r: 20 },
{ cx: 124, cy: 80, r: 22 },
{ cx: 100, cy: 70, r: 24 },
{ cx: 100, cy: 140, r: 18 }
].map((c, i) => (
{/* olives */}
{Array.from({ length: 3 }).map((_, k) => (
))}
))}
}
);
}
// ============= MINT SPRIG =============
function MintSprig({ grow = 1, bloom = 0 }) {
const g = grow, b = bloom;
return (
{/* mint leaf pairs (opposite arrangement) */}
{[
{ y: 220, l: 48, r: 152 },
{ y: 170, l: 50, r: 150 },
{ y: 120, l: 56, r: 144 },
{ y: 78, l: 64, r: 136 }
].map((p, i) => g > 0.2 + i*0.15 && (
))}
{/* tiny white flower clusters */}
{b > 0 &&
{[70, 50, 40].map((y, i) => (
{Array.from({length: 5}).map((_,k)=>(
))}
))}
}
);
}
// ============= FIG BRANCH =============
function FigBranch({ grow = 1, bloom = 0 }) {
const g = grow, b = bloom;
return (
{/* branches */}
{g > 0.4 && <>
}
{/* fig leaves — lobed shape */}
{g > 0.55 && <>
}
{/* top fig leaf */}
{g > 0.7 &&
}
{/* figs */}
{b > 0 &&
{[
{x:90, y:200, r:7},
{x:108, y:168, r:6},
{x:82, y:142, r:5}
].map((f, i) => (
))}
}
);
}
// ============= OAK =============
function OakTree({ grow = 1, bloom = 0 }) {
const g = grow, b = bloom;
return (
{/* massive trunk */}
{/* branches spread wide */}
{g > 0.35 && <>
}
{/* canopy — clustered circles */}
{b > 0 &&
{[
{ cx: 44, cy: 122, r: 28 },
{ cx: 100, cy: 80, r: 36 },
{ cx: 160, cy: 116, r: 30 },
{ cx: 66, cy: 84, r: 24 },
{ cx: 134, cy: 74, r: 26 },
{ cx: 100, cy: 130, r: 22 }
].map((c, i) => (
))}
{/* acorns */}
{[{x:80,y:130},{x:120,y:132},{x:100,y:120}].map((a, i) => (
))}
}
);
}
// Map
const SPECIES = {
"Coffee shop": { C: CoffeeCherry, label: "Coffee cherry", latin: "Coffea arabica", widget: "order", q: "any oat-milk lattes near me?" },
"Bakery": { C: WheatStalk, label: "Wheat stalk", latin: "Triticum aestivum", widget: "order", q: "sourdough today?" },
"Yoga studio": { C: Lotus, label: "Sacred lotus", latin: "Nelumbo nucifera", widget: "booking", q: "next beginner class?" },
"Restaurant": { C: OliveTree, label: "Olive", latin: "Olea europaea", widget: "booking", q: "table for 2 tonight?" },
"Dentist": { C: MintSprig, label: "Peppermint", latin: "Mentha piperita", widget: "booking", q: "cleaning this week?" },
"Law firm": { C: MintSprig, label: "Bay laurel", latin: "Laurus nobilis", widget: "booking", q: "15-min consult?" },
"Consultant": { C: Lavender, label: "Lavender", latin: "Lavandula", widget: "booking", q: "book 30 min?" },
"Creator": { C: Sunflower, label: "Sunflower", latin: "Helianthus annuus", widget: "product", q: "what's new this week?" },
"Online store": { C: FigBranch, label: "Fig", latin: "Ficus carica", widget: "product", q: "what should I get?" },
"Real estate": { C: OakTree, label: "English oak", latin: "Quercus robur", widget: "product", q: "anything under 700k?" },
"Other": { C: GenericSprout, label: "Seedling", latin: "Plantae", widget: "booking", q: "how can I help you today?" }
};
Object.assign(window, { SPECIES, BotanicalDefs,
CoffeeCherry, WheatStalk, Lotus, Sunflower, Lavender, OliveTree, MintSprig, FigBranch, OakTree,
GenericSprout });
// Fallback pre-species sprout
function GenericSprout({ grow = 1, bloom = 0 }) {
return (
{grow > 0.4 && }
{grow > 0.55 && }
);
}