// markflord — ML maker's-mark monogram directions.
// Four constructions of one struck "ML" glyph. Each renders flat (favicon)
// or forged (hero), on light (ink mark) or dark (steel mark). Ember spark constant.
//
// Construction grammar (shared by Spine / Keystone / Anvil):
// chevron-M drawn as a single mitered polyline; its right leg is the SPINE
// that also serves as the L stem; an L foot extends right at the baseline.
// Centerlines: legs x=37 / x=163, apex (100,150), cap top y=47, baseline y=161.
// Bar weight t=34. viewBox 0 0 260 212.
const { useId } = React;
const STROKE = 34;
// ---- finish helpers ---------------------------------------------------------
function Defs({ uid, light }) {
// steel/graphite body gradient + ember spark gradient + emboss filter
const bodyTop = light ? "#4A4334" : "#5A5142";
const bodyMid = light ? "#1A1610" : "#2C261C";
const bodyBot = light ? "#0B0907" : "#16110B";
return (
);
}
// top bevel highlight: a faint lighter copy offset up
function bevelStroke(light) { return light ? "rgba(255,246,232,0.32)" : "rgba(255,246,232,0.22)"; }
// ---- DIRECTION 1 · SPINE ----------------------------------------------------
function MonoSpine({ size = 120, forged = true, light = false }) {
const uid = useId().replace(/:/g, "");
const body = forged ? `url(#${uid}-body)` : (light ? "#0E0C08" : "#F3EEE4");
const ember = forged ? `url(#${uid}-ember)` : "#FF5B1F";
const mPath = "M37,161 L37,47 L100,150 L163,47 L163,161";
return (
);
}
// ---- DIRECTION 2 · KEYSTONE -------------------------------------------------
// L nested in M as a structural joint: a keystone wedge locks the V's apex.
function MonoKeystone({ size = 120, forged = true, light = false }) {
const uid = useId().replace(/:/g, "");
const body = forged ? `url(#${uid}-body)` : (light ? "#0E0C08" : "#F3EEE4");
const ember = forged ? `url(#${uid}-ember)` : "#FF5B1F";
const mPath = "M37,161 L37,47 L100,128 L163,47 L163,161";
return (
);
}
// ---- DIRECTION 3 · ANVIL ----------------------------------------------------
// Baseline reads as an anvil face: foot extends both ways, one end tapers (horn).
function MonoAnvil({ size = 120, forged = true, light = false }) {
const uid = useId().replace(/:/g, "");
const body = forged ? `url(#${uid}-body)` : (light ? "#0E0C08" : "#F3EEE4");
const ember = forged ? `url(#${uid}-ember)` : "#FF5B1F";
const mPath = "M55,158 L55,47 L100,150 L145,47 L145,158";
// anvil base: top face wide, waist, foot — sits under the whole mark
const anvil = "M26,158 L210,158 L210,170 L150,170 L150,184 L196,184 L196,198 L64,198 L64,184 L110,184 L110,170 L26,170 Z";
return (
);
}
// ---- DIRECTION 4 · STRUCK SEAL / INGOT --------------------------------------
function MonoSeal({ size = 120, forged = true, light = false }) {
const uid = useId().replace(/:/g, "");
const ringBody = forged ? `url(#${uid}-body)` : (light ? "#0E0C08" : "#F3EEE4");
const ember = forged ? `url(#${uid}-ember)` : "#FF5B1F";
const markColor = forged ? "#F3EEE4" : (light ? "#F0E9D7" : "#0E0C08"); // struck mark contrasts the disc
const fieldFill = forged ? "#0B0907" : (light ? "#1B150D" : "#0E0C08");
const mPath = "M84,150 L84,82 L116,138 L148,82 L148,150";
return (
);
}
// ---- WORDMARK ---------------------------------------------------------------
function MLWordmark({ color = "#0E0C08", scale = 1, oneword = false }) {
return (
{oneword ? "MARKLORD" : "MARK LORD"}
);
}
// ═══════════════════════════════════════════════════════════════════════════
// BATCH II — STAGGERED & OVERLAID (two distinct letters that layer, not connect)
// Serif-forward per direction. Each: M is the back plate, L is struck over it,
// offset down-right, with a ground-matched knockout halo so it reads as a
// separate layer in front (occlusion + forged shadow, never a fused ligature).
// ═══════════════════════════════════════════════════════════════════════════
// Serif overlay engine — font/weight swappable; `molten` renders the front L hot.
function SerifOverlayMark({ size = 120, forged = true, light = false, font = "'Cinzel', serif", weight = 600, molten = false }) {
const uid = useId().replace(/:/g, "");
const body = forged ? `url(#${uid}-body)` : (light ? "#0E0C08" : "#F3EEE4");
const ember = forged ? `url(#${uid}-ember)` : "#FF5B1F";
const halo = light ? "#F0E9D7" : "#0E0C08";
const lFill = molten ? ember : body;
const bev = bevelStroke(light);
return (
);
}
const MonoEngraved = (p) => ;
const MonoModernSerif = (p) => ;
const MonoSerifMolten = (p) => ;
// Geometric overlay (modern, non-serif) — two slab letters, L struck over M.
function MonoOverlay({ size = 120, forged = true, light = false }) {
const uid = useId().replace(/:/g, "");
const body = forged ? `url(#${uid}-body)` : (light ? "#0E0C08" : "#F3EEE4");
const ember = forged ? `url(#${uid}-ember)` : "#FF5B1F";
const halo = light ? "#F0E9D7" : "#0E0C08";
const mPath = "M40,170 L40,52 L95,150 L150,52 L150,170";
const lPath = "M151,80 H185 V171 H236 V205 H151 Z";
return (
);
}
Object.assign(window, { MonoSpine, MonoKeystone, MonoAnvil, MonoSeal, MonoEngraved, MonoModernSerif, MonoSerifMolten, MonoOverlay, MLWordmark });