// Hand-drawn SVG illustrations for peptides and articles
// Style: cream bg, ink 1.5px stroke, splat-green + accent fills, dot/grid patterns
const IL_COLORS = {
ink: "#0F1F2C", cream: "#FAF6EC", cream2: "#F2EBD8", paper: "#FFFDF6",
splat: "#5FBF5F", splatDeep: "#2F8C3A", splatSoft: "#C7ECBF", splatGlow: "#B6E4A8",
coral: "#F26B4A", sun: "#F2C94C", sky: "#7FB8D6", lilac: "#B9A7D6", rose: "#E89AB1",
muted: "#6B7A85",
};
const DotPattern = ({ id, color = "rgba(15,31,44,0.14)" }) => (
);
// ---- Peptide illustrations (200x140 viewBox) ----
const ILL_Retatrutide = () => (
);
const ILL_GHKCu = () => (
);
const ILL_MT2 = () => (
);
const ILL_MotsC = () => (
);
const ILL_Tesa = () => (
);
// ---- Article illustrations (160x120 viewBox) ----
const Chart_Titration = () => (
);
const Chart_AminoChain = () => (
);
const Chart_Routine = () => (
);
const Chart_MitoFlex = () => (
);
const Chart_Thermometer = () => (
);
const Chart_FAQ = () => (
);
// Learn page — additional
const Chart_Receptor = () => (
);
const Chart_HalfLife = () => (
);
const Chart_Stacks = () => (
);
const Chart_Bruise = () => (
);
// Small-size extra charts
const Chart_SubQ = () => (
);
const Chart_SkinProto = () => (
);
const Chart_QA = () => (
);
const Chart_Sites = () => (
);
// Generic fallback — schematic amino acid chain
// Color picks a palette from IL_COLORS by name (e.g. "green", "coral", "sky", "sun", "lilac")
// Simple deterministic hash so each peptide id maps to a stable variant
function _hashId(id = "") {
let h = 0;
for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) | 0;
return Math.abs(h);
}
const ILL_Generic = ({ color = "green", id = "" }) => {
const palettes = {
green: { bg: IL_COLORS.splatSoft, bead: IL_COLORS.splat, accent: IL_COLORS.splatDeep, alt: IL_COLORS.sun },
coral: { bg: "#FBDACF", bead: IL_COLORS.coral, accent: "#8C3821", alt: IL_COLORS.sun },
sky: { bg: "#D4E7F2", bead: IL_COLORS.sky, accent: "#2F5A74", alt: IL_COLORS.lilac },
sun: { bg: "#F6E6A8", bead: IL_COLORS.sun, accent: "#8A6A10", alt: IL_COLORS.coral },
lilac: { bg: "#DED0F0", bead: IL_COLORS.lilac, accent: "#4A3470", alt: IL_COLORS.sky },
};
const p = palettes[color] || palettes.green;
const h = _hashId(id);
const variant = h % 8; // 0..7, each with a different layout
const dpId = `dp-gen-${id || color}`;
// ---- 8 distinct cartoon layouts ----
const layouts = [];
// 0 — wave chain, 6 beads (the original, slightly tweaked)
layouts[0] = (
{[22,60,100,140,180].map((x,i) => (
))}
{/* sparkle */}
);
// 1 — diagonal arc rising, 5 beads + sparkle
layouts[1] = (
{[{x:22,y:100},{x:60,y:88},{x:100,y:70},{x:140,y:50},{x:180,y:36}].map((b,i) => (
))}
);
// 2 — DNA-like helix pair (two interlocking sine waves with bridges)
layouts[2] = (
{[44,76,108,140,172].map((x,i) => ())}
{[{x:22,y:56},{x:60,y:80},{x:100,y:56},{x:140,y:80},{x:180,y:56}].map((b,i) => (
))}
{[{x:22,y:84},{x:60,y:60},{x:100,y:84},{x:140,y:60},{x:180,y:84}].map((b,i) => (
))}
);
// 3 — zigzag chain of 5 + flask icon
layouts[3] = (
{[{x:22,y:80},{x:56,y:52},{x:90,y:80},{x:124,y:52},{x:158,y:80}].map((b,i) => (
))}
{/* flask */}
);
// 4 — closed loop (cyclic peptide), 6 beads in a ring
layouts[4] = (
{[0,1,2,3,4,5].map(i => {
const a = (i / 6) * Math.PI * 2 - Math.PI / 2;
const x = 100 + Math.cos(a) * 42;
const y = 70 + Math.sin(a) * 42;
return ;
})}
{/* center cyclic label */}
cyclic
);
// 5 — branched chain (Y-shape), 7 beads + small lightning bolt
layouts[5] = (
{[{x:22,y:80},{x:60,y:80},{x:92,y:60},{x:132,y:60},{x:172,y:60},{x:132,y:100},{x:166,y:106}].map((b,i) => (
))}
);
// 6 — fragments (two short chains, side by side) — for fragment peptides
layouts[6] = (
{[{x:22,y:70},{x:44,y:60},{x:66,y:70},{x:88,y:60},{x:110,y:70}].map((b,i) => (
))}
{[{x:132,y:70},{x:154,y:60},{x:176,y:70}].map((b,i) => (
))}
+
);
// 7 — ladder/comb (helix-like rungs along one chain)
layouts[7] = (
{[40,68,96,124,152,180].map((x,i) => ())}
{[40,68,96,124,152].map((x,i) => (
))}
);
// ---- shared decoration: small label tag with the variant name ----
const tagLabels = ["chain", "ascending", "helix", "zigzag", "cyclic", "branched", "fragment", "ladder"];
const tagLabel = tagLabels[variant];
return (
);
};
// Map registry
const PEPTIDE_ILLUSTRATIONS = {
reta: ILL_Retatrutide,
ghkcu: ILL_GHKCu,
mt2: ILL_MT2,
motsc: ILL_MotsC,
tesa: ILL_Tesa,
};
// Category-tag → palette key
const TAG_COLOR_MAP = {
"Metabolic": "green",
"Skin": "coral",
"Skin · Recovery": "coral",
"GH axis": "sun",
"GH · Body comp": "coral",
"Mitochondrial": "sun",
"Cognitive": "lilac",
"Immune": "green",
"Healing": "green",
"Sleep": "lilac",
"Longevity": "sun",
"Antimicrobial": "sky",
"Wellness": "coral",
"Pigment · Novel": "lilac",
};
const PeptideArt = ({ id }) => {
const Cmp = PEPTIDE_ILLUSTRATIONS[id];
if (Cmp) return ;
// Look up the peptide's tag for category color
const peptide = (typeof PEPTIDES !== "undefined" ? PEPTIDES : []).find(p => p.id === id);
const color = (peptide && TAG_COLOR_MAP[peptide.tag]) || "green";
return ;
};
Object.assign(window, {
PeptideArt,
Chart_Titration, Chart_AminoChain, Chart_Routine, Chart_MitoFlex,
Chart_Thermometer, Chart_FAQ, Chart_Receptor, Chart_HalfLife,
Chart_Stacks, Chart_Bruise, Chart_SubQ, Chart_SkinProto, Chart_QA, Chart_Sites,
});