.branch-title text-align: center; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1.5px; color: #b97f48; margin-bottom: 24px; background: #fff2e2; display: inline-block; width: 100%; padding: 6px 0; border-radius: 60px;
// generate SVG path string (simple blob shape based on given path) function renderBlobSVG(pathData, idNum) // random pastel fill based on ID to keep distinct friendly look const colors = ["#FFB77C", "#FFA56E", "#F7B787", "#FEC196", "#FDAC6A", "#F6BD8C", "#FEC68B"]; const fillColor = colors[idNum % colors.length]; return `<svg class="blob-svg" viewBox="0 0 100 90" xmlns="http://www.w3.org/2000/svg"> <path d="$pathData" fill="$fillColor" stroke="#D48C54" stroke-width="1.2" stroke-linejoin="round" /> <circle cx="38" cy="42" r="3" fill="#4F2D14" /> <circle cx="62" cy="42" r="3" fill="#4F2D14" /> <path d="M44 54 Q50 62 56 54" stroke="#5D341B" stroke-width="2" fill="none" stroke-linecap="round" /> </svg>`;
/* selected highlight */ .blob-item.selected .blob-svg filter: drop-shadow(0 0 0 3px #ffaa44) drop-shadow(0 8px 18px rgba(0,0,0,0.2)); transform: scale(1.02); blob tree template
/* response panel */ .response-panel background: #fff7ef; border-radius: 48px; margin-top: 32px; padding: 1.4rem 2rem; box-shadow: 0 12px 22px -12px rgba(0,0,0,0.1); border: 1px solid #ffe0bc;
<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" ]; .branch-title text-align: center
@media (max-width: 780px) .blob-container padding: 1rem; .blob-svg width: 65px; height: 65px; .branch min-width: 95px; </style> </head> <body> <div class="blob-container"> <h1> 🌳 Blob Tree Template <small>emotional check-in · workshop tool</small> </h1> <div class="sub">📍 Tap any blob character — how are you feeling today? Which one feels like you?</div>
h1 small font-size: 0.85rem; font-weight: normal; background: #ffecd6; padding: 6px 14px; border-radius: 60px; color: #a1652c; letter-spacing: normal; padding: 6px 0
.blob-number background: white; width: 28px; height: 28px; border-radius: 30px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; margin-top: -12px; margin-bottom: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); color: #5e3a1f; border: 1px solid #ffcd94; background: #fffaf2;