Skill Tree Progress Map — Free HTML CSS JS Snippet

Skill trees are one of the most satisfying progress patterns borrowed from RPGs and strategy games, and they map cleanly onto real product problems: onboarding checklists that unlock in order, course curricula with prerequisites, certification paths, or feature-gated app tiers. This snippet builds a genuinely interactive, branching skill tree — seven nodes connected by lines in a tree shape, where completing a node visibly unlocks the nodes connected beneath it — using nothing but an SVG overlay, absolutely positioned buttons, and a small state machine in vanilla JavaScript.

The three-state node model

Every node lives in one of three states: locked, unlocked, or completed. A locked node is desaturated with filter: grayscale(1), shows a padlock icon, and its <button> element has the native disabled attribute set so it cannot be clicked or focused — this gets you free keyboard-accessibility semantics instead of hand-rolling aria-disabled and manual event blocking. An unlocked node is the only interactive, clickable state: it gets an indigo ring, a soft box-shadow pulse animation (@keyframes pulse-glow) to draw the eye, and the lock icon is hidden. A completed node fills solid with the accent colour, swaps in a checkmark icon, and plays a one-shot squash-and-glow pop animation the moment it finishes. The whole UI is driven by one plain JavaScript object, state, mapping node id to one of those three strings — the render() function is the single place that reads state and reconciles the DOM, so there's never a risk of the visuals drifting out of sync with the underlying data.

Drawing branch lines that actually fill with the `pathLength` trick

The connecting lines between nodes are real SVG <line> elements layered in a <svg> positioned absolutely behind the node buttons, using a fixed viewBox="0 0 500 420" so the coordinate system stays predictable regardless of how the container is resized on screen. Each connection is actually two overlapping lines: a permanent light-grey .edge-base line, and a coloured .edge-fill line on top of it that starts fully hidden. The fill trick is the pathLength="1" SVG attribute — setting it forces the browser to treat the line's total length as exactly 1 unit regardless of its real pixel length, so stroke-dasharray: 1; stroke-dashoffset: 1 reliably hides the entire line and animating stroke-dashoffset to 0 via a CSS transition reliably reveals the entire line, no matter whether that particular edge is short or long. Without pathLength, you'd have to calculate each line's real length in JavaScript with getTotalLength() to get the dash values right — pathLength sidesteps that arithmetic entirely and is the technique production dashboards use for progress-line animations.

Sequencing the unlock cascade

The tree topology is described with a tiny PARENTS lookup object (each child node lists its parent ids) and an EDGES array pairing every connected node id for line rendering. childrenOf(id) derives the reverse relationship on the fly. When a click lands on an unlocked node, completeNode() flips its state to completed, re-renders (which fills in its own icon and any inbound line), fires the pop animation via a temporary .just-completed class removed on animationend, and then — after a short setTimeout beat so the completion animation reads clearly before the next thing happens — walks childrenOf(id) and promotes any still-locked children to unlocked, which simultaneously fills their inbound edge line and starts their pulse glow. That deliberate two-step timing (complete now, unlock a beat later) is what makes the cascade feel like a real chain reaction instead of everything popping at once.

Reset and extension

The reset button calls initialState() again and re-renders, instantly returning every node to its starting locked/unlocked configuration — useful for demos, and for any real onboarding flow where a user might want to redo a track. To extend the tree with more nodes, add an entry to PARENTS, an edge pair to EDGES, a positioned <button data-node> in the HTML, and a matching SVG line pair — the render logic needs no changes because it iterates the data structures generically.