// pipi-scribble.jsx — Scribble SVG primitives + Pipi character set
// Style: "bad MS Paint mouse-drawn redraw" — wobbly outlines, flat fills,
// scribbly hatching, intentionally off proportions.
const PIPI = {
// Paper / surfaces
paper: '#F5E7C7', // warm cream (background of every illustration)
paperLt: '#FBF1D9', // lighter cream (card surfaces)
paperDk: '#E8D7AE', // dustier cream (recessed)
// Ink
ink: '#1A1A2E', // near-black outline
inkSoft: '#3A3A52', // softer outline
// Hero colors (flat, MS-Paint primary feel)
yellow: '#FFD93D', // Pipi feathers
yellowD: '#E5B82E', // Pipi shading
pink: '#E8526B', // berry
pinkLt: '#F4A6B0', // cheeks
blue: '#6FA8DC', // sky
blueD: '#3F7CB8', // deep
green: '#6EB76A', // leaf
greenD: '#3F8A4F', // darker leaf
lilac: '#B79DD9', // magic
coral: '#F2A65A', // beak
red: '#C84B3A', // accent
};
// Deterministic 0..1 noise for jitter (seeded so renders are stable)
function pjit(seed, i) {
const v = Math.sin(seed * 9301.137 + i * 4937.71) * 43758.5453;
return (v - Math.floor(v)) - 0.5; // -0.5..0.5
}
// Build a wobbly closed polygon from a list of base points.
// amp = jitter amplitude in px; resolution = subdivide each edge by N
function wobblyPath(points, { amp = 2.5, seed = 1, res = 1, close = true } = {}) {
const pts = [];
for (let i = 0; i < points.length; i++) {
const a = points[i];
const b = points[(i + 1) % points.length];
for (let s = 0; s < res; s++) {
const t = s / res;
const x = a[0] + (b[0] - a[0]) * t;
const y = a[1] + (b[1] - a[1]) * t;
pts.push([
x + pjit(seed, pts.length * 2) * amp,
y + pjit(seed, pts.length * 2 + 1) * amp,
]);
}
if (!close && i === points.length - 1) {
pts.push([b[0] + pjit(seed, pts.length * 2) * amp,
b[1] + pjit(seed, pts.length * 2 + 1) * amp]);
}
}
let d = `M${pts[0][0].toFixed(1)} ${pts[0][1].toFixed(1)}`;
for (let i = 1; i < pts.length; i++) d += ` L${pts[i][0].toFixed(1)} ${pts[i][1].toFixed(1)}`;
if (close) d += ' Z';
return d;
}
function wobblyRectPath(x, y, w, h, { r = 18, amp = 2.5, seed = 1, res = 6 } = {}) {
// 8 corner-stops around a rounded rect, then jittered along edges
const pts = [];
// top edge L→R
for (let i = 0; i <= res; i++) pts.push([x + r + (w - 2 * r) * (i / res), y]);
// right rounded corner
for (let i = 1; i <= res / 2; i++) {
const a = -Math.PI / 2 + (Math.PI / 2) * (i / (res / 2));
pts.push([x + w - r + Math.cos(a) * r, y + r + Math.sin(a) * r]);
}
// right edge
for (let i = 1; i <= res; i++) pts.push([x + w, y + r + (h - 2 * r) * (i / res)]);
// br corner
for (let i = 1; i <= res / 2; i++) {
const a = 0 + (Math.PI / 2) * (i / (res / 2));
pts.push([x + w - r + Math.cos(a) * r, y + h - r + Math.sin(a) * r]);
}
// bottom edge R→L
for (let i = 1; i <= res; i++) pts.push([x + w - r - (w - 2 * r) * (i / res), y + h]);
// bl corner
for (let i = 1; i <= res / 2; i++) {
const a = Math.PI / 2 + (Math.PI / 2) * (i / (res / 2));
pts.push([x + r + Math.cos(a) * r, y + h - r + Math.sin(a) * r]);
}
// left edge
for (let i = 1; i <= res; i++) pts.push([x, y + h - r - (h - 2 * r) * (i / res)]);
// tl corner
for (let i = 1; i <= res / 2; i++) {
const a = Math.PI + (Math.PI / 2) * (i / (res / 2));
pts.push([x + r + Math.cos(a) * r, y + r + Math.sin(a) * r]);
}
return wobblyPath(pts, { amp, seed, res: 1 });
}
function wobblyCirclePath(cx, cy, r, { amp = 2, seed = 1, segs = 24 } = {}) {
const pts = [];
for (let i = 0; i < segs; i++) {
const a = (i / segs) * Math.PI * 2;
pts.push([cx + Math.cos(a) * r, cy + Math.sin(a) * r]);
}
return wobblyPath(pts, { amp, seed, res: 1 });
}
function wobblyLinePath(x1, y1, x2, y2, { amp = 1.8, seed = 1, segs = 8 } = {}) {
let d = '';
for (let i = 0; i <= segs; i++) {
const t = i / segs;
const x = x1 + (x2 - x1) * t + pjit(seed, i * 2) * amp;
const y = y1 + (y2 - y1) * t + pjit(seed, i * 2 + 1) * amp;
d += (i === 0 ? 'M' : 'L') + x.toFixed(1) + ' ' + y.toFixed(1);
}
return d;
}
// Scribble fill — a back-and-forth wobbly zigzag, used for hair, ground, fur
function scribblePath(x, y, w, h, { angle = -0.5, gap = 6, amp = 2, seed = 1 } = {}) {
const lines = Math.ceil(h / gap);
let d = '';
for (let i = 0; i < lines; i++) {
const yy = y + i * gap;
const ltr = i % 2 === 0;
const x1 = ltr ? x : x + w;
const x2 = ltr ? x + w : x;
const segs = 6;
for (let s = 0; s <= segs; s++) {
const t = s / segs;
const xx = x1 + (x2 - x1) * t + pjit(seed, i * 13 + s) * amp;
const yyy = yy + Math.tan(angle) * (xx - x) + pjit(seed, i * 13 + s + 100) * amp;
d += (s === 0 && i === 0 ? 'M' : (s === 0 ? 'L' : 'L')) + xx.toFixed(1) + ' ' + yyy.toFixed(1);
}
}
return d;
}
// ── Components ────────────────────────────────────────────────
// Wobbly box, used everywhere as cards/buttons. Offsets a duplicate outline
// behind it for a "MS Paint misregister" look.
function ScribbleBox({ x = 0, y = 0, w = 100, h = 60, r = 18, fill = PIPI.paperLt,
stroke = PIPI.ink, sw = 3.5, seed = 1, amp = 2,
offset = false, offsetColor = PIPI.ink, children }) {
const d = wobblyRectPath(x, y, w, h, { r, amp, seed });
return (
{offset && (
)}
{children}
);
}
function ScribbleCircle({ cx, cy, r, fill = PIPI.yellow, stroke = PIPI.ink, sw = 3.5,
amp = 2, seed = 1, segs = 24 }) {
return (
);
}
function ScribbleLine({ x1, y1, x2, y2, stroke = PIPI.ink, sw = 3, amp = 1.8, seed = 1, segs = 8 }) {
return (
);
}
// Scribble fill (zigzag hatching) — clipped to an arbitrary path id
function ScribbleFill({ clipId, x, y, w, h, angle = -0.5, gap = 6, amp = 2, seed = 1,
stroke = PIPI.ink, sw = 1.8, opacity = 1 }) {
return (
);
}
// ── PIPI character — a little fluffy yellow chick ────────────
// All positions are in a 200x200 viewBox area, callable at any size.
function Pipi({ size = 200, mood = 'happy', seed = 7 }) {
const s = seed;
// Body
const bodyD = wobblyCirclePath(100, 120, 56, { amp: 3, seed: s, segs: 28 });
// Head (slightly elliptical, wobbly)
const headPts = [];
for (let i = 0; i < 28; i++) {
const a = (i / 28) * Math.PI * 2;
headPts.push([100 + Math.cos(a) * 46, 70 + Math.sin(a) * 42]);
}
const headD = wobblyPath(headPts, { amp: 3, seed: s + 1 });
// Tuft (3 little scribble strands)
const tuftD =
`M${85},${30} L${82},${14} L${90},${22} L${94},${10} L${100},${22} L${108},${12} L${112},${24} L${120},${18} L${118},${30}`;
// Beak
const beakD = `M${88},${74} L${72},${82} L${88},${88} Z`;
// Cheeks
// Eyes — googly, slightly different sizes (MS Paint feel)
const eyeLx = 86, eyeLy = 64, eyeRx = 118, eyeRy = 66;
// Wing
const wingD = wobblyPath([
[54, 116], [40, 130], [50, 150], [70, 154], [78, 140], [72, 122]
], { amp: 2.5, seed: s + 5 });
// Feet
return (
);
}
// Smaller chibi Pipi head only (for nav icons, mini avatars)
function PipiMini({ size = 60, seed = 11 }) {
return (
);
}
// ── Story illustration placeholders (the MS-Paint redraws) ────
// Each story has its own goofy scribbly cover art.
function StoryFairy({ size = 220, seed = 3 }) {
return (
);
}
function StoryMoon({ size = 220, seed = 5 }) {
return (
);
}
function StoryDragon({ size = 220, seed = 9 }) {
return (
);
}
function StorySea({ size = 220, seed = 13 }) {
return (
);
}
function StoryRobot({ size = 220, seed = 17 }) {
return (
);
}
// ── Wordmark "Pipi" ───────────────────────────────────────────
// Hand-drawn-feel letters, intentionally lopsided
function PipiWordmark({ height = 80, color = PIPI.ink, fill = PIPI.yellow }) {
// Letters are drawn manually with wobbly strokes
return (
);
}
// ── Other tiny scribbles ──────────────────────────────────────
function Cloud({ size = 80, seed = 1, fill = '#fff' }) {
return (
);
}
function Heart({ size = 24, fill = PIPI.pink, seed = 1 }) {
return (
);
}
function Sparkle({ size = 24, seed = 1, fill = PIPI.yellow }) {
const r1 = 12, r2 = 4;
return (
);
}
// Squiggle underline doodle
function Squiggle({ width = 80, color = PIPI.ink, seed = 1 }) {
let d = 'M0 5';
const segs = 10;
for (let i = 1; i <= segs; i++) {
const x = (i / segs) * width;
const y = 5 + Math.sin(i * 1.5 + seed) * 4 + pjit(seed, i) * 2;
d += ` L${x.toFixed(1)} ${y.toFixed(1)}`;
}
return (
);
}
Object.assign(window, {
PIPI,
pjit, wobblyPath, wobblyRectPath, wobblyCirclePath, wobblyLinePath, scribblePath,
ScribbleBox, ScribbleCircle, ScribbleLine, ScribbleFill,
Pipi, PipiMini, PipiWordmark,
StoryFairy, StoryMoon, StoryDragon, StorySea, StoryRobot,
Cloud, Heart, Sparkle, Squiggle,
});