/* Lumino Doodles — hand-drawn whiteboard icon collection.
Every doodle is a JSX function returning inline SVG paths.
- viewBox: 0 0 64 64
- stroke: currentColor, rough-ish geometry with deliberate wobble
- organized by category: school, shapes, nature, weather, objects, tech, food,
sports, transport, symbols, emoji, arrows, frames, charts, abstract
*/
(function() {
// Helper — generate a slightly wobbly line / curve primitive
// All doodles are designed to look like dry-erase marker lines.
const D = {}; // name -> ({size, stroke}) => JSX
// ---------- SCHOOL ----------
D["pencil"] = ({stroke}) => (
);
D["book"] = ({stroke}) => (
);
D["notebook"] = ({stroke}) => (
);
D["backpack"] = ({stroke}) => (
);
D["apple"] = ({stroke}) => (
);
D["ruler"] = ({stroke}) => (
);
D["graduation-cap"] = ({stroke}) => (
);
D["globe"] = ({stroke}) => (
);
D["lightbulb"] = ({stroke}) => (
);
D["rocket"] = ({stroke}) => (
);
D["trophy"] = ({stroke}) => (
);
D["medal"] = ({stroke}) => (
);
// ---------- NATURE ----------
D["sun"] = ({stroke}) => (
);
D["moon"] = ({stroke}) => (
);
D["star"] = ({stroke}) => (
);
D["cloud"] = ({stroke}) => (
);
D["rain-cloud"] = ({stroke}) => (
);
D["snowflake"] = ({stroke}) => (
);
D["leaf"] = ({stroke}) => (
);
D["tree"] = ({stroke}) => (
);
D["flower"] = ({stroke}) => (
);
D["mountain"] = ({stroke}) => (
);
D["fire"] = ({stroke}) => (
);
D["wave"] = ({stroke}) => (
);
// ---------- SHAPES ----------
D["circle"] = ({stroke}) => (
);
D["square"] = ({stroke}) => (
);
D["triangle"] = ({stroke}) => (
);
D["diamond"] = ({stroke}) => (
);
D["heart"] = ({stroke}) => (
);
D["hexagon"] = ({stroke}) => (
);
D["pentagon"] = ({stroke}) => (
);
D["cloud-shape"] = ({stroke}) => (
);
D["burst"] = ({stroke}) => (
);
D["speech-bubble"] = ({stroke}) => (
);
D["thought-bubble"] = ({stroke}) => (
);
// ---------- TECH ----------
D["computer"] = ({stroke}) => (
);
D["phone"] = ({stroke}) => (
);
D["gear"] = ({stroke}) => (
);
D["wifi"] = ({stroke}) => (
);
D["battery"] = ({stroke}) => (
);
D["robot"] = ({stroke}) => (
);
D["camera"] = ({stroke}) => (
);
D["headphones"] = ({stroke}) => (
);
D["mouse"] = ({stroke}) => (
);
D["code"] = ({stroke}) => (
);
// ---------- OBJECTS ----------
D["key"] = ({stroke}) => (
);
D["lock"] = ({stroke}) => (
);
D["gift"] = ({stroke}) => (
);
D["balloon"] = ({stroke}) => (
);
D["clock"] = ({stroke}) => (
);
D["watering-can"] = ({stroke}) => (
);
D["umbrella"] = ({stroke}) => (
);
D["rocket-ship"] = D["rocket"];
// ---------- FOOD ----------
D["cake"] = ({stroke}) => (
);
D["coffee"] = ({stroke}) => (
);
D["pizza"] = ({stroke}) => (
);
D["ice-cream"] = ({stroke}) => (
);
D["donut"] = ({stroke}) => (
);
// ---------- SPORT / ACTIVITY ----------
D["ball"] = ({stroke}) => (
);
D["paint-brush"] = ({stroke}) => (
);
D["palette"] = ({stroke}) => (
);
D["music"] = ({stroke}) => (
);
D["guitar"] = ({stroke}) => (
);
D["kite"] = ({stroke}) => (
);
// ---------- TRANSPORT ----------
D["car"] = ({stroke}) => (
);
D["bike"] = ({stroke}) => (
);
D["boat"] = ({stroke}) => (
);
D["airplane"] = ({stroke}) => (
);
// ---------- PEOPLE / EMOJI ----------
D["smile"] = ({stroke}) => (
);
D["wink"] = ({stroke}) => (
);
D["surprised"] = ({stroke}) => (
);
D["sad"] = ({stroke}) => (
);
D["cool"] = ({stroke}) => (
);
D["person"] = ({stroke}) => (
);
D["hand"] = ({stroke}) => (
);
D["peace"] = ({stroke}) => (
);
// ---------- ARROWS / MARKS ----------
D["arrow-right"] = ({stroke}) => (
);
D["arrow-left"] = ({stroke}) => (
);
D["arrow-up"] = ({stroke}) => (
);
D["arrow-down"] = ({stroke}) => (
);
D["arrow-curve"] = ({stroke}) => (
);
D["arrow-scribble"] = ({stroke}) => (
);
D["check"] = ({stroke}) => (
);
D["cross"] = ({stroke}) => (
);
D["exclamation"] = ({stroke}) => (
);
D["question"] = ({stroke}) => (
);
D["plus"] = ({stroke}) => (
);
D["underline-squiggle"] = ({stroke}) => (
);
D["star-sparkle"] = ({stroke}) => (
);
D["lightning"] = ({stroke}) => (
);
D["hash"] = ({stroke}) => (
);
D["at"] = ({stroke}) => (
);
// ---------- FRAMES / CONTAINERS ----------
D["frame-cloud"] = ({stroke}) => (
);
D["frame-starburst"] = ({stroke}) => (
);
D["frame-banner"] = ({stroke}) => (
);
D["frame-scroll"] = ({stroke}) => (
);
D["frame-ribbon"] = ({stroke}) => (
);
// ---------- CHARTS / DATA ----------
D["chart-bar"] = ({stroke}) => (
);
D["chart-line"] = ({stroke}) => (
);
D["chart-pie"] = ({stroke}) => (
);
D["target"] = ({stroke}) => (
);
D["flag"] = ({stroke}) => (
);
// ---------- ABSTRACT / DECO ----------
D["squiggle"] = ({stroke}) => (
);
D["zigzag"] = ({stroke}) => (
);
D["spiral"] = ({stroke}) => (
);
D["dots-three"] = ({stroke}) => (
);
D["crosshatch"] = ({stroke}) => (
);
D["rays"] = ({stroke}) => (
);
D["ribbon-wave"] = ({stroke}) => (
);
// ---- Publish ----
window.DOODLES = D;
window.DOODLE_NAMES = Object.keys(D);
// Category map for filtering in UI
window.DOODLE_CATEGORIES = {
"School": ["pencil","book","notebook","backpack","apple","ruler","graduation-cap","globe","lightbulb","rocket","trophy","medal"],
"Nature": ["sun","moon","star","cloud","rain-cloud","snowflake","leaf","tree","flower","mountain","fire","wave"],
"Shapes": ["circle","square","triangle","diamond","heart","hexagon","pentagon","cloud-shape","burst","speech-bubble","thought-bubble"],
"Tech": ["computer","phone","gear","wifi","battery","robot","camera","headphones","mouse","code"],
"Objects": ["key","lock","gift","balloon","clock","watering-can","umbrella"],
"Food": ["cake","coffee","pizza","ice-cream","donut"],
"Activity": ["ball","paint-brush","palette","music","guitar","kite"],
"Transport": ["car","bike","boat","airplane"],
"People": ["smile","wink","surprised","sad","cool","person","hand","peace"],
"Marks": ["arrow-right","arrow-left","arrow-up","arrow-down","arrow-curve","arrow-scribble","check","cross","exclamation","question","plus","underline-squiggle","star-sparkle","lightning","hash","at"],
"Frames": ["frame-cloud","frame-starburst","frame-banner","frame-scroll","frame-ribbon"],
"Data": ["chart-bar","chart-line","chart-pie","target","flag"],
"Abstract": ["squiggle","zigzag","spiral","dots-three","crosshatch","rays","ribbon-wave"],
};
// component — wraps the raw path set with wobble + stroke options
window.Doodle = function Doodle({ name, size = 48, width, height, stroke = 2.2, wobble = 0, style, className }) {
const fn = D[name];
if (!fn) return null;
const w = width ?? size;
const h = height ?? size;
// Deterministic seed per name so wobble is stable for snapshots
const seed = [...name].reduce((a,c)=>((a<<5)-a+c.charCodeAt(0))|0, 0);
const rot = wobble ? ((Math.sin(seed) * 2) * wobble) : 0;
const sx = wobble ? (1 + Math.cos(seed*2) * 0.01 * wobble) : 1;
const sy = wobble ? (1 + Math.sin(seed*3) * 0.01 * wobble) : 1;
return (
);
};
})();