/* ============================================================
SHLOK — Illustration library → window.Illo
Animated abstract SVG scenes, themed per step.
Shared visual language: indigo→teal, soft gradients,
floating layered shapes, gentle motion.
============================================================ */
const Illo = (function () {
const W = 460, H = 168;
function Defs() {
return (
);
}
// tiny dotted backdrop used in most scenes
function Dots() {
const els = [];
for (let i = 0; i < 26; i++) {
const x = (i * 67) % W, y = (i * 113) % H;
els.push();
}
return {els};
}
const G = "url(#ig)", G2 = "url(#ig2)";
const stroke = { fill: "none", stroke: "url(#ig)", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round" };
const sFaint = { fill: "none", stroke: "rgba(255,255,255,0.18)", strokeWidth: 1.4, strokeLinecap: "round" };
/* ---- scenes ---- */
const scenes = {
// role — avatar in a glowing ring with orbiting role glyphs
role: (
),
// business — building blocks rising
business: (
),
// team — connected person nodes
team: (
{[[160, 60, 0], [300, 60, -0.7], [150, 118, -1.4], [310, 118, -0.4]].map(([x, y, d], i) => (
))}
),
// tools — scattered floating chips
tools: (
),
// worries — a head with floating concern dots
worries: (
),
// messy — tangled line resolving into neat lines
messy: (
),
// burden — figure carrying a stack
burden: (
),
// feeling — equalizer / gauge bars
feeling: (
{[0, 1, 2, 3, 4].map((i) => (
))}
),
// scenario — overlapping speech bubbles
scenario: (
),
// loss — draining hourglass / falling coins
loss: (
{"\u20B9"}
),
// outcomes — scattered dots converging into a hub
outcomes: (
{[[150, 50], [320, 48], [140, 120], [330, 120]].map(([x, y], i) => (
))}
),
// trust — shield with check + rays
trust: (
),
// landing — a beacon line of light
landing: (
),
// need — compass / heart-pulse
need: (
),
// contact — calendar + phone
contact: (
),
};
function Illo({ name }) {
const scene = scenes[name] || scenes.role;
return (
);
}
return Illo;
})();
window.Illo = Illo;