// Cookie illustrations modeled on Nadya's actual work: shaped sugar cookies
// with piped-icing outlines, soft pastel fills, and hand-painted detail.
//
// Each cookie is a self-contained SVG with a viewBox of 0 0 200 200.
// Aspect ratio varies per shape (square, hexagon, vertical, etc.) but they
// all render at the same nominal canvas size for consistent presentation.
const { useState } = React;
// ---- Shared icing pattern -------------------------------------------------
// A subtle dot-grid that suggests the slight texture of royal icing
function IcingTexture({ id, color = "oklch(0.4 0.02 50 / 0.05)" }) {
return (
);
}
// "Cookie edge" — a soft tan rim visible just outside the iced shape, to make
// each piece read as a real cookie rather than a sticker.
function CookieEdge({ d, offset = 3, color = "oklch(0.78 0.07 70)" }) {
return ;
}
// Hand-piped cursive script (we use a font, but draw with double-stroke effect)
function Script({ x, y, text, size = 22, color = "oklch(0.4 0.13 250)", anchor = "middle" }) {
return (
{text}
);
}
// Bubble letters (like the DALIA cookies — chunky outlined caps)
function Bubble({ x, y, text, size = 26, fill = "oklch(0.78 0.13 145)", stroke = "oklch(0.45 0.13 145)", anchor = "middle" }) {
return (
{text}
);
}
// ===========================================================================
// 1. ONESIE — light blue with rainbow sprinkles and "oh boy" cursive
// ===========================================================================
function Onesie({ size = 200, color = "oklch(0.85 0.05 240)", outline = "oklch(0.55 0.08 240)", text = "oh boy", rotate = 0 }) {
// Clean onesie silhouette with a real U-shaped neckline scoop between
// the shoulders, and a smooth U between the legs (not a sharp V).
const body = "M 45 28 L 78 22 Q 110 58 142 22 L 175 28 Q 188 38 172 54 L 172 58 Q 158 62 158 54 L 158 154 Q 158 178 132 174 L 118 162 Q 110 172 102 162 L 88 174 Q 62 178 62 154 L 62 54 Q 62 62 48 58 L 48 54 Q 32 38 45 28 Z";
// The collar — a lens that shares the same endpoints as the body's
// neckline curve, so there are no protruding triangle corners.
const collar = "M 78 22 Q 110 58 142 22 Q 110 80 78 22 Z";
// Lighter blue derived from the icing color
const lightBlue = "oklch(0.92 0.035 240)";
// sprinkles — short rotated tick marks (deterministic so they don't reshuffle)
const sprinkleColors = ["oklch(0.95 0.02 80)", "oklch(0.78 0.13 80)", "oklch(0.68 0.13 145)", "oklch(0.55 0.13 240)"];
const seeds = [
[72,84,30],[96,78,-22],[140,80,46],[166,90,12],
[78,108,-44],[112,104,18],[150,112,-12],[88,134,38],
[124,140,-30],[156,138,24],[70,154,-8],[100,156,42],
[136,158,-18],[112,80,8],[148,86,-36],[80,124,52],
[120,124,-50],[154,124,14],[66,108,-22],[148,150,-44],
[104,132,28],[80,142,-12],[156,108,-2],[92,94,-36],
];
const sprinkles = seeds.map(([cx, cy, rot], i) => (
));
return (
);
}
// ===========================================================================
// 2. DAISY — white petals around a soft yellow center
// ===========================================================================
function Daisy({ size = 200, petal = "oklch(0.98 0.005 90)", petalEdge = "oklch(0.78 0.04 80)", center = "oklch(0.78 0.13 85)", centerEdge = "oklch(0.55 0.13 60)", name = "DALIA", rotate = 0 }) {
const cx = 100, cy = 100;
const petals = [];
for (let i = 0; i < 6; i++) {
const a = (i / 6) * Math.PI * 2 - Math.PI / 2;
const px = cx + Math.cos(a) * 50;
const py = cy + Math.sin(a) * 50;
const rot = (a * 180) / Math.PI + 90;
petals.push(
);
}
return (
);
}
// ===========================================================================
// 3. CAMEL HEXAGON — desert scene with palms + camel silhouette
// ===========================================================================
function CamelHex({ size = 200, rotate = 0 }) {
const hex = "M 100 12 L 178 56 L 178 144 L 100 188 L 22 144 L 22 56 Z";
// Color zones for desert
return (
);
}
// ===========================================================================
// 4. BUTTERFLY — monarch (black + cream)
// ===========================================================================
function Butterfly({ size = 200, body = "oklch(0.95 0.04 90)", outline = "oklch(0.22 0.02 60)", rotate = 0 }) {
// Wing path (mirrored)
const wingTop = "M 0 0 Q -40 -38, -68 -30 Q -90 -22, -78 8 Q -64 26, -32 22 Q -8 18, 0 8 Z";
const wingBot = "M 0 8 Q -10 18, -34 30 Q -54 42, -42 56 Q -28 64, -10 50 Q -2 36, 0 22 Z";
// Wing dots
const dots = [
{ x: -55, y: -16, r: 2.5 },
{ x: -65, y: -8, r: 2.5 },
{ x: -72, y: 2, r: 2.5 },
{ x: -42, y: 50, r: 2 },
{ x: -32, y: 58, r: 2 },
{ x: -18, y: 56, r: 2 },
];
return (
);
}
// ===========================================================================
// 5. MUSHROOM — red cap, cream stem, white dots
// ===========================================================================
function Mushroom({ size = 200, cap = "oklch(0.5 0.16 25)", capEdge = "oklch(0.35 0.13 25)", stem = "oklch(0.94 0.02 80)", rotate = 0 }) {
// Cap: dome path
const capPath = "M 30 100 Q 30 30, 100 30 Q 170 30, 170 100 L 130 100 Q 100 105, 70 100 Z";
// Stem: trapezoidal
const stemPath = "M 70 100 Q 75 130, 70 165 Q 80 175, 100 175 Q 120 175, 130 165 Q 125 130, 130 100 Q 100 105, 70 100 Z";
return (
);
}
// ===========================================================================
// 6. MILK BOTTLE — cream body + mustard top, cursive name
// ===========================================================================
function MilkBottle({ size = 200, body = "oklch(0.97 0.01 80)", top = "oklch(0.78 0.13 75)", name = "Novel", rotate = 0 }) {
// Bottle path: square base with rounded shoulders + tapered nipple
const d = "M 60 195 Q 50 195, 50 185 L 50 100 Q 50 88, 56 84 L 56 70 Q 56 60, 64 56 L 80 50 L 80 38 Q 80 30, 90 28 L 110 28 Q 120 30, 120 38 L 120 50 L 136 56 Q 144 60, 144 70 L 144 84 Q 150 88, 150 100 L 150 185 Q 150 195, 140 195 Z";
const topD = "M 56 84 L 56 70 Q 56 60, 64 56 L 80 50 L 80 38 Q 80 30, 90 28 L 110 28 Q 120 30, 120 38 L 120 50 L 136 56 Q 144 60, 144 70 L 144 84 Z";
return (
);
}
// ===========================================================================
// 7. SQUARE WITH SPRINKLE CORNER + BUBBLE TEXT
// ===========================================================================
function SprinkleSquare({ size = 200, bg = "oklch(0.82 0.07 295)", text = "DALIA", rotate = 0 }) {
const sq = "M 20 28 Q 20 18, 30 18 L 170 18 Q 180 18, 180 28 L 180 172 Q 180 182, 170 182 L 30 182 Q 20 182, 20 172 Z";
// Corner clusters of organic dot-flowers
const clusterColors = ["oklch(0.7 0.16 30)", "oklch(0.75 0.14 70)", "oklch(0.65 0.14 145)", "oklch(0.6 0.14 235)", "oklch(0.8 0.13 95)"];
function Cluster({ cx, cy, n = 18, r = 30 }) {
const dots = [];
for (let i = 0; i < n; i++) {
const a = Math.random() * Math.PI * 2;
const d = Math.random() * r;
const px = cx + Math.cos(a) * d;
const py = cy + Math.sin(a) * d;
const c = clusterColors[i % clusterColors.length];
dots.push();
}
return {dots};
}
return (
);
}
// ===========================================================================
// 8. PALM TREE SQUARE — cream square, mustard sun, brown palms
// ===========================================================================
function PalmSquare({ size = 200, rotate = 0 }) {
const sq = "M 20 28 Q 20 18, 30 18 L 170 18 Q 180 18, 180 28 L 180 172 Q 180 182, 170 182 L 30 182 Q 20 182, 20 172 Z";
// Palm leaves — long pointed ellipses radiating from a center
function Palm({ x, y, scale = 1 }) {
const leaves = [];
for (let i = 0; i < 7; i++) {
const a = -90 + (i - 3) * 22; // spread upward
leaves.push(
);
}
return (
{/* trunk */}
);
}
return (
);
}
// ===========================================================================
// 9. DRAGONFLY — light blue + lavender wings
// ===========================================================================
function Dragonfly({ size = 200, rotate = 0 }) {
// Wings: long elongated ellipses; 4 of them (2 per side)
return (
);
}
// ===========================================================================
// 10. MOSQUE / DOME — brown with mustard door
// ===========================================================================
function Mosque({ size = 200, rotate = 0 }) {
const d = "M 100 18 Q 96 22, 96 30 L 96 38 Q 60 42, 50 80 L 38 80 L 38 90 L 30 90 Q 26 92, 26 100 L 26 180 Q 26 188, 36 188 L 164 188 Q 174 188, 174 180 L 174 100 Q 174 92, 170 90 L 162 90 L 162 80 L 150 80 Q 140 42, 104 38 L 104 30 Q 104 22, 100 18 Z";
// Mosque dome top: arches along base
return (
);
}
Object.assign(window, { Onesie, Daisy, CamelHex, Butterfly, Mushroom, MilkBottle, SprinkleSquare, PalmSquare, Dragonfly, Mosque });