Blob Tree Template (TOP | Version)
/* blob SVG style */ .blob-svg width: 85px; height: 85px; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.1)); transition: all 0.2s;
button background: #e7b27d; border: none; padding: 8px 22px; border-radius: 40px; font-weight: bold; color: #2e1d0e; margin-top: 12px; cursor: pointer; transition: 0.1s linear; font-size: 0.8rem;
const branchDiv = document.createElement("div"); branchDiv.className = "branch"; branchDiv.innerHTML = `<div class="branch-title">$branch.label</div>`; blob tree template
.blob-name background: #ffddb0; padding: 8px 20px; border-radius: 44px; font-size: 1rem;
<div class="response-panel" id="responsePanel"> <div class="selection-display"> <span>🌱 Currently selected:</span> <span class="blob-name" id="selectedBlobName">— none yet —</span> </div> <div class="emotion-note" id="emotionNote"> 💭 Tap on a blob to reflect. Each character represents a different mood or social dynamic. </div> <textarea id="reflectionInput" rows="2" placeholder="Write your reflection, journal entry, or share how you relate to this blob..."></textarea> <button id="saveReflectionBtn">📘 save note</button> <div style="font-size: 0.7rem; margin-top: 8px; color:#b48a54;" id="saveMessage"></div> </div> <footer> 🧸 Blob Tree method inspired by Pip Wilson · use for teams, classrooms, therapy </footer> </div> /* blob SVG style */
branchConfig.forEach(branch => const branchBlobs = getBlobsByBranch(branch.key); if (branchBlobs.length === 0) return;
button:hover background: #d69a58; transform: scale(0.97); filter: drop-shadow(0 6px 10px rgba(0
<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" ];