Blob Tree Template Link
let currentSelectedId = null; let savedNotes = {};
<script> // ----- BLOB TREE DATA (classic blob tree archetypes + emotions) // Organized by branches: Top, Upper Middle, Lower, Ground / playful moods const blobData = [ id: 1, name: "Joyful Jumper", emotion: "happy, energetic, proud", branch: "canopy", svg: "M42,22 C52,18 66,20 72,30 C78,40 74,54 66,62 C58,70 42,72 32,64 C22,56 18,44 22,34 C26,24 32,26 42,22Z" , id: 2, name: "Helping Blob", emotion: "supportive, caring, team player", branch: "canopy", svg: "M40,26 C50,22 64,26 68,36 C72,46 68,56 60,62 C52,68 38,68 30,60 C22,52 20,40 26,32 C32,24 36,28 40,26Z" , id: 3, name: "Dreamy Daydreamer", emotion: "calm, introspective, detached", branch: "canopy", svg: "M44,30 C54,28 66,32 68,44 C70,56 62,66 50,66 C38,66 28,58 26,48 C24,38 34,32 44,30Z" , id: 4, name: "Anxious Blob", emotion: "worried, overwhelmed, stressed", branch: "middle-left", svg: "M38,28 C46,24 60,26 66,36 C72,46 68,58 58,64 C48,70 34,68 28,58 C22,48 26,36 38,28Z" , id: 5, name: "Lonely One", emotion: "isolated, excluded, sad", branch: "middle-left", svg: "M36,32 C44,30 58,34 62,44 C66,54 60,64 50,66 C40,68 30,62 28,52 C26,42 30,34 36,32Z" , id: 6, name: "Playful Buddy", emotion: "silly, lighthearted, funny", branch: "middle-right", svg: "M46,26 C56,22 68,26 70,38 C72,50 64,60 54,62 C44,64 34,58 32,48 C30,38 38,28 46,26Z" , id: 7, name: "Rebellious Blob", emotion: "defiant, angry, frustrated", branch: "middle-right", svg: "M40,30 C52,24 64,28 68,40 C72,52 64,64 52,66 C40,68 28,62 26,50 C24,38 32,32 40,30Z" , id: 8, name: "Tired Blob", emotion: "exhausted, low energy, numb", branch: "lower-ground", svg: "M44,34 C54,32 64,38 64,48 C64,58 54,64 44,64 C34,64 28,56 28,48 C28,38 34,34 44,34Z" , id: 9, name: "Curious Climber", emotion: "adventurous, hopeful, exploring", branch: "lower-ground", svg: "M48,28 C58,26 68,32 68,44 C68,56 58,64 48,64 C38,64 30,56 30,44 C30,32 38,28 48,28Z" , id: 10, name: "Blob Leader", emotion: "confident, guiding, respected", branch: "top-solo", svg: "M44,24 C56,20 70,24 72,38 C74,52 66,62 54,64 C42,66 30,60 28,48 C26,36 34,26 44,24Z" , id: 11, name: "Invisible Blob", emotion: "ignored, unseen, left out", branch: "lower-ground", svg: "M40,36 C48,34 60,38 62,48 C64,58 56,66 46,66 C36,66 28,58 28,48 C28,38 32,36 40,36Z" , id: 12, name: "Social Blob", emotion: "connected, talkative, joyful", branch: "canopy", svg: "M42,26 C52,22 66,24 70,36 C74,48 66,60 56,64 C46,68 34,64 30,54 C26,44 32,30 42,26Z" ]; blob tree template
h1 small font-size: 0.85rem; font-weight: normal; background: #ffecd6; padding: 6px 14px; border-radius: 60px; color: #a1652c; letter-spacing: normal; let currentSelectedId = null; let savedNotes = {};
Just save the code as an .html file and open it in any browser. No server needed. Perfect for classroom morning check-ins, therapy groups, team meetings, or personal journaling. let currentSelectedId = null