Template - Blob Tree

// 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>`;

/* blob items */ .blob-item display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; cursor: pointer; transition: transform 0.2s ease, filter 0.1s;

function buildTreeUI() const container = document.getElementById("blobTreeGrid"); container.innerHTML = ""; blob tree template

// branch display mapping (order + titles) const branchConfig = [ key: "canopy", label: "🌿 CANOPY · high energy & visibility" , key: "middle-left", label: "🌘 LEFT MID · inner tension & quietness" , key: "middle-right", label: "☀️ RIGHT MID · expressive & reactive" , key: "lower-ground", label: "🍂 LOWER · withdrawn, grounded or tired" , key: "top-solo", label: "✨ TOP · spotlight / leadership" ];

.blob-item:hover transform: scale(1.02); // generate SVG path string (simple blob shape

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;

body font-family: 'Segoe UI', 'Quicksand', system-ui, -apple-system, 'Helvetica Neue', sans-serif; background: linear-gradient(145deg, #f9f3e6 0%, #fff0e0 100%); margin: 0; min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; const fillColor = colors[idNum % colors.length]

const branchDiv = document.createElement("div"); branchDiv.className = "branch"; branchDiv.innerHTML = `<div class="branch-title">$branch.label</div>`;