// Three pig mascot variants, all composed of geometric primitives.
// Props: { size, pose, accent, skin }
// pose: 'wave' | 'surf' | 'chill'
// Each returns a self-contained SVG. No external assets.
const PigFlat = ({ size = 220, pose = "wave", wave = 0 }) => {
// Flat vector cartoon — clean shapes, thick outline, shades + lei
const skin = "#FFC2B4";
const skinShade = "#F59B88";
const out = "#2E2A2A";
const stroke = 3.2;
const waveAngle = Math.sin(wave) * 14; // degrees
return (
);
};
const PigClay = ({ size = 220, pose = "wave", wave = 0 }) => {
// Chunky 3D-clay — softer gradients, no hard outline, rounded everything
const waveAngle = Math.sin(wave) * 12;
return (
);
};
const PigSticker = ({ size = 220, pose = "wave", wave = 0 }) => {
// Sticker/emoji style — thick white stroke around whole piece
const waveAngle = Math.sin(wave) * 14;
return (
);
};
const Pig = ({ variant = "flat", ...props }) => {
const time = React.useRef(0);
const [, force] = React.useState(0);
React.useEffect(() => {
let raf;
const loop = (t) => {
time.current = t / 400;
force((n) => (n + 1) % 1000000);
raf = requestAnimationFrame(loop);
};
raf = requestAnimationFrame(loop);
return () => cancelAnimationFrame(raf);
}, []);
const wave = time.current;
if (variant === "clay") return ;
if (variant === "sticker") return ;
if (variant === "pixel" && window.PigPixel) return ;
if (variant === "line" && window.PigLine) return ;
if (variant === "retro" && window.PigRetro) return ;
return ;
};
Object.assign(window, { Pig, PigFlat, PigClay, PigSticker });