// gm-hand.jsx — Infográficos hand-drawn (estilo papel quadriculado), na marca Nicolas Lima.
// Biblioteca rica + base de papel + exemplo completo + regras. Sobrescreve GMInfographics.
// Carregar DEPOIS de gm-info.jsx.
const { T, F, Section, SecHead, Lead, Note, Mono, Card } = window;
const HND = "'Caveat', 'Bricolage Grotesque', cursive";
/* ── papel ─────────────────────────────────────────────────────────────── */
const paperGrid = (dark) => ({
background: dark ? "#16110E" : "#F1E7D2",
backgroundImage: `linear-gradient(${dark ? "rgba(242,216,167,0.09)" : "rgba(194,104,62,0.16)"} 1px, transparent 1px), linear-gradient(90deg, ${dark ? "rgba(242,216,167,0.09)" : "rgba(194,104,62,0.16)"} 1px, transparent 1px)`,
backgroundSize: "22px 22px",
});
const paperDot = (dark) => ({
background: dark ? "#16110E" : "#F1E7D2",
backgroundImage: `radial-gradient(${dark ? "rgba(242,216,167,0.16)" : "rgba(194,104,62,0.26)"} 1.4px, transparent 1.6px)`,
backgroundSize: "20px 20px",
});
/* ── helpers de geometria ──────────────────────────────────────────────── */
function scallop(cx, cy, r, n) {
let d = "";
for (let i = 0; i <= n; i++) { const a = (i / n) * 2 * Math.PI; const x = cx + r * Math.cos(a), y = cy + r * Math.sin(a); d += i === 0 ? `M${x.toFixed(1)} ${y.toFixed(1)}` : ` A ${(r * 0.2).toFixed(1)} ${(r * 0.2).toFixed(1)} 0 0 1 ${x.toFixed(1)} ${y.toFixed(1)}`; }
return d + "Z";
}
function wedge(cx, cy, r, a0, a1) {
const p = (a) => [cx + r * Math.cos(a), cy + r * Math.sin(a)]; const [x0, y0] = p(a0), [x1, y1] = p(a1); const large = a1 - a0 > Math.PI ? 1 : 0;
return `M${cx} ${cy} L${x0.toFixed(1)} ${y0.toFixed(1)} A ${r} ${r} 0 ${large} 1 ${x1.toFixed(1)} ${y1.toFixed(1)} Z`;
}
const HATCHES = [["coral", "#E8553A"], ["amber", "#E8A33D"], ["cyan", "#0E9AAC"], ["dcyan", "#54C8D0"], ["olive", "#7F8B45"], ["terra", "#D9714A"], ["teal", "#16786E"], ["ink", "#211913"], ["sand", "#F2D8A7"]];
const DEFS_HAND = `` + HATCHES.map(([id, c], i) => ``).join("") + ``;
function dlSvg(btn, name) {
const tile = btn.closest("[data-eltile]");
if (!tile) return;
const svgs = tile.querySelectorAll("svg");
let out;
if (svgs.length === 1) {
const c = svgs[0].cloneNode(true);
c.setAttribute("xmlns", "http://www.w3.org/2000/svg");
c.setAttribute("width", "160"); c.setAttribute("height", "160");
c.insertAdjacentHTML("afterbegin", DEFS_HAND);
out = new XMLSerializer().serializeToString(c);
} else {
const body = tile.querySelector("[data-elbody]") || tile;
const clone = body.cloneNode(true);
clone.querySelectorAll("button").forEach((b) => b.remove());
const r = body.getBoundingClientRect();
const w = Math.max(40, Math.round(r.width)), h = Math.max(40, Math.round(r.height));
out = ``;
}
const blob = new Blob([out], { type: "image/svg+xml" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a"); a.href = url; a.download = "nl-" + (name || "elemento").replace(/[^\w-]+/g, "-") + ".svg"; a.click();
setTimeout(() => URL.revokeObjectURL(url), 900);
}
function SharedDefs() {
return (
);
}
/* ── elementos hand-drawn ──────────────────────────────────────────────── */
const ink = (d) => (d ? "#F2D8A7" : "#211913");
const sub = (d) => (d ? "#9C8674" : "#6B5D4F");
const SK = (d, w = 2.4) => ({ fill: "none", stroke: ink(d), strokeWidth: w, strokeLinecap: "round", strokeLinejoin: "round" });
function IBadge({ dark, w = 116, pct = "64%", hatch = "amber" }) {
return (
);
}
function IFlag({ dark, w = 108, pct = "48%" }) {
return (
);
}
function IRibbon({ dark, w = 210, text = "Infográfico" }) {
return (
);
}
function IArrows({ dark }) {
const s = SK(dark, 2.6);
return (
);
}
function INum({ dark, n = 1, hatch = "cyan", w = 70 }) {
return (
);
}
function ISpeech({ dark, text = "Detalhe!", w = 130 }) {
return (
);
}
function IPie({ dark, w = 130 }) {
const segs = [[0.34, "coral", "34%"], [0.26, "cyan", "26%"], [0.22, "amber", "22%"], [0.18, "olive", "18%"]];
let a = -Math.PI / 2; const cx = 65, cy = 60, r = 46;
return (
);
}
function IBars({ dark, w = 150 }) {
const data = [["A", 64, "coral"], ["B", 42, "cyan"], ["C", 90, "amber"], ["D", 30, "olive"]];
const max = 90, base = 96, h = 70;
return (
);
}
function IVenn({ dark, w = 140 }) {
return (
);
}
function IPyramid({ dark, w = 130 }) {
const rows = [["coral", 30, 52], ["amber", 52, 72], ["cyan", 72, 92], ["olive", 92, 112]];
return (
);
}
function IPin({ dark, w = 70 }) {
return (
);
}
function IIcons({ dark }) {
const s = SK(dark, 2.3);
return (
);
}
function IDivider({ dark, w = 180 }) {
const s = SK(dark, 2.2);
return (
);
}
/* ── seção ─────────────────────────────────────────────────────────────── */
function GMInfographics() {
const Tile = ({ label, dark, children, h = 124, noDl }) => (
{children}
{!noDl && }
{label}
);
const Doc = ({ k, children }) => (
{k}
{children}
);
const Full = ({ dark }) => (
{[1, 2, 3].map((n) => )}
menos latência ↑
);
return (
{/* base de papel */}
A base: papel
Creme quente #F1E7D2 no claro; espresso #16110E no escuro. Nunca branco puro — o papel tem que ter calor.Linhas a cada 22px, em clay translúcido (claro) ou areia translúcida (escuro). Sutil: guia o olho, não compete.Quadriculado para infográficos densos e técnicos; pontilhado para peças mais leves e respiradas. Escolha um por peça.Caneta de 2.4px, pontas arredondadas, levemente trêmulo. Preenchimento é sempre hachura (riscado), nunca chapado — é o que dá o ar "à mão".
{/* biblioteca */}
Biblioteca hand-drawn
{[1, 2, 3].map((n) => )}
{/* no escuro */}
Os mesmos elementos no escuro
{/* exemplo completo */}
Infográfico completo · claro ⇄ escuro
Claro
Escuro
{/* regras */}
1. Uma pergunta por peça — o infográfico responde UMA coisa. 2. Fluxo de leitura claro — guie com setas e números; o olho deve saber por onde começar. 3. Hachura com função — cada cor/textura significa algo, não é enfeite. 4. Respiro do papel — deixe a grade aparecer; não encha tudo. 5. Manuscrito só nos rótulos — Caveat em números e legendas curtas; o corpo segue Hanken.
Diagrama é estrutura limpa e geométrica (seção 04). Infográfico é narrativa visual: combina dado, imagem, ícone e texto à mão para contar uma história — mais solto, mais humano, mais memorável.
Escolha o bloco que responde sua pergunta, encaixe sobre o papel quadriculado e troque os dados. Combine 2–3 por peça (ex.: faixa de título + pizza com chamadas + bloco de estatística) — um só assunto por infográfico.
