// Fin — Fin45 mascot. Gold round-owl with black over-ear headphones.
// All parts are SVG primitives composed in z-order so any pose / expression /
// accessory can be reconfigured without re-drawing the silhouette.
const FIN = {
gold: '#D4A24C',
goldDeep: '#B68334',
goldLight: '#E8C079',
ink: '#141414',
inkSoft: '#2A2723',
paper: '#FAFAF7',
mute: '#6B6864',
beak: '#C77A1F',
};
const STROKE = 10; // body / accessory stroke
const STROKE_FINE = 6; // small parts
// ---------- atomic parts ----------------------------------------------------
function FinHalo({ on = true, intensity = 1 }) {
if (!on) return null;
// intensity scales radius + opacity (1 = default, 1.3 = bigger/brighter)
const r = 430 * (0.92 + 0.18 * intensity);
return (
);
}
function FinDefs() {
return (
);
}
// Round owl body silhouette. Two small ear tufts poke up; small feet at
// bottom. Drawn as one path so the outline reads as one continuous form.
function FinBody({ feet = true, tufts = true }) {
return (
{/* ear tufts — sit above headphone band so they read as owl horns */}
{tufts && (
)}
{/* body */}
{/* facial disk (subtle lighter oval — owl cue) */}
{/* feet */}
{feet && (
)}
);
}
function FinHeadphones() {
return (
{/* band — drawn as wide ink stroke arcing over head */}
{/* thin highlight along band */}
{/* left earcup */}
{/* right earcup */}
);
}
// ---------- expression parts -----------------------------------------------
// Eyes: 'open' | 'wide' | 'lookup' | 'lookdown' | 'wink-l' | 'wink-r' | 'smile'
function FinEyes({ state = 'open' }) {
const L = { cx: 432, cy: 470 };
const R = { cx: 592, cy: 470 };
// pupil offset by direction
const off = {
open: [0, 6],
wide: [0, 0],
lookup: [4, -14],
lookdown: [0, 18],
'wink-l': [0, 6],
'wink-r': [0, 6],
smile: [0, 6],
}[state] || [0, 6];
const closedL = state === 'wink-l' || state === 'smile';
const closedR = state === 'wink-r' || state === 'smile';
const r = state === 'wide' ? 100 : 78;
const pr = state === 'wide' ? 56 : 42;
return (
{/* whites */}
{!closedL && (
)}
{!closedR && (
)}
{/* pupils */}
{!closedL && (
)}
{!closedR && (
)}
{/* closed-lid crescents */}
{closedL && (
)}
{closedR && (
)}
);
}
// Brows: 'neutral' | 'angry' | 'raised' | 'asym' | 'sad'
function FinBrows({ state = 'neutral' }) {
const sw = 18;
const paths = {
neutral: [
'M 358 360 Q 432 332 504 360',
'M 520 360 Q 592 332 666 360',
],
angry: [
'M 358 380 Q 432 348 502 370',
'M 522 370 Q 592 348 666 380',
],
raised: [
'M 358 330 Q 432 304 504 330',
'M 520 330 Q 592 304 666 330',
],
asym: [
'M 358 360 Q 432 332 504 360',
'M 520 376 Q 592 356 666 384',
],
sad: [
'M 358 348 Q 432 372 504 360',
'M 520 360 Q 592 372 666 348',
],
}[state];
return (
);
}
// Beak: 'closed' | 'small' | 'wide' | 'pursed' | 'smile'
function FinBeak({ state = 'closed' }) {
const cx = 512;
const cy = 590;
if (state === 'wide') {
// wide open shouting — show ink interior + tongue
return (
{/* upper beak ridge */}
);
}
if (state === 'small') {
return (
);
}
if (state === 'pursed') {
return (
);
}
if (state === 'smile') {
return (
);
}
if (state === 'frown') {
// closed, downturned corners
return (
);
}
// closed (default — diamond beak)
return (
);
}
// Tiny blush dots (used on a couple of friendlier poses)
function FinBlush({ on = false }) {
if (!on) return null;
return (
);
}
// ---------- accessories / hands --------------------------------------------
// All hands are gold mitten-blobs with ink stroke; positioned per pose.
function CupHand() {
// cupped hand outside the right earcup — for "listening"
// Palm faces forward, fingers arch up like a "hear better" cup.
return (
{/* palm */}
{/* fingertip arches along the top edge */}
{/* knuckle creases */}
);
}
function Megaphone() {
// megaphone in right hand extending out right side
return (
{/* sound bolts */}
{/* handle */}
{/* arm holding handle */}
{/* megaphone body */}
{/* fist on left arm — pumped */}
);
}
function PointHand() {
// pointing hand in front of body, finger forward
return (
);
}
function HipHand() {
// hand on hip — left side, paired with PointHand for "pointing" pose
return (
);
}
function Newspaper() {
// Fin holding a small newspaper / report in front, both hands gripping
return (
{/* paper */}
{/* masthead */}
The Fin Wire
{/* article lines */}
{/* chart block */}
{/* hands gripping edges */}
);
}
function CheekHands() {
// two hands on cheeks — for shocked pose
return (
{/* finger creases */}
);
}
function ChinHand() {
// hand under beak — for thinking pose
return (
{/* arm coming up from lower body */}
{/* index pointing up to chin */}
);
}
// ---------- pose registry --------------------------------------------------
const POSES = {
listening: {
brows: 'asym',
eyes: 'open',
beak: 'smile',
blush: false,
accessoryFront: () => ,
},
megaphone: {
brows: 'angry',
eyes: 'wide',
beak: 'wide',
accessoryFront: () => ,
},
pointing: {
brows: 'raised',
eyes: 'wink-l',
beak: 'smile',
blush: true,
accessoryFront: () => (<>),
},
reading: {
brows: 'neutral',
eyes: 'lookdown',
beak: 'pursed',
accessoryFront: () => ,
},
shocked: {
brows: 'raised',
eyes: 'wide',
beak: 'wide',
accessoryFront: () => ,
},
thinking: {
brows: 'asym',
eyes: 'lookup',
beak: 'pursed',
accessoryFront: () => ,
},
};
// ---------- public mascot --------------------------------------------------
function Fin({ pose = 'listening', glow = true, bg = FIN.ink, size = 512, style }) {
const cfg = POSES[pose] || POSES.listening;
const showFeet = cfg.feet !== false;
const showTufts = cfg.tufts !== false;
const haloOn = glow && cfg.halo !== false;
const haloI = cfg.haloIntensity || 1;
return (
);
}
// Compact head-only Fin (logo glyph). Crops body + feet, headphones tight.
function FinGlyph({ size = 200, bg = 'transparent', monochrome = null, style }) {
// monochrome: pass a hex to render Fin in single ink color (for tight space)
const gold = monochrome || FIN.gold;
const ink = monochrome ? monochrome : FIN.ink;
return (
);
}
Object.assign(window, { Fin, FinGlyph, FIN, POSES });