Design Atlas
한국어
◆ Game UI & game feel

Skill Tree

스킬 트리

A branching web of nodes and connecting lines that shows which abilities must be unlocked before others become available.

Also known as: 탤런트 트리Talent tree성장 트리
···
html
<svg class="stsvg" id="svg" viewBox="0 0 300 180" preserveAspectRatio="none"><line x1="150" y1="150" x2="90" y2="100" class="stline" id="l1"/><line x1="150" y1="150" x2="210" y2="100" class="stline" id="l2"/><line x1="90" y1="100" x2="60" y2="45" class="stline" id="l3"/><line x1="90" y1="100" x2="120" y2="45" class="stline" id="l4"/><line x1="210" y1="100" x2="240" y2="45" class="stline" id="l5"/></svg>
<div class="stnode locked" id="n0" style="left:50%;top:83.3%">R</div>
<div class="stnode locked" id="n1" style="left:30%;top:55.6%">A</div>
<div class="stnode locked" id="n2" style="left:70%;top:55.6%">B</div>
<div class="stnode locked" id="n3" style="left:20%;top:25%">C</div>
<div class="stnode locked" id="n4" style="left:40%;top:25%">D</div>
<div class="stnode locked" id="n5" style="left:80%;top:25%">E</div>
css
.stsvg{position:absolute;inset:0;width:100%;height:100%}
.stline{stroke:var(--line);stroke-width:2;transition:stroke .4s}
.stline.on{stroke:var(--accent)}
.stnode{position:absolute;width:clamp(20px,8vmin,32px);height:clamp(20px,8vmin,32px);margin:-16px 0 0 -16px;border-radius:50%;
  display:grid;place-items:center;font:800 clamp(9px,3vmin,12px) monospace;color:var(--muted);
  background:var(--surface);border:2px solid var(--line);transition:all .35s cubic-bezier(.3,1.4,.4,1)}
.stnode.ready{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.stnode.unlocked{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.08)}
js
const order=[['n0',null],['n1','l1'],['n2','l2'],['n3','l3'],['n4','l4'],['n5','l5']];
const nodes=order.map(function(o){ return document.getElementById(o[0]); });
function setReady(i){
  if(i<nodes.length) nodes[i].classList.add('ready');
}
setReady(0);
let i=0;
function unlockNext(){
  const [nid,lid]=order[i];
  const node=document.getElementById(nid);
  node.classList.remove('ready');
  node.classList.add('unlocked');
  if(lid) document.getElementById(lid).classList.add('on');
  i++;
  if(i<order.length) setReady(i);
  if(i>=order.length){
    setTimeout(function(){
      order.forEach(function(o){
        document.getElementById(o[0]).classList.remove('unlocked');
        if(o[1]) document.getElementById(o[1]).classList.remove('on');
      });
      i=0; setReady(0);
      setTimeout(unlockNext, 800);
    }, 1200);
  } else {
    setTimeout(unlockNext, 750);
  }
}
setTimeout(unlockNext, 600);

A skill tree is a graph of nodes (abilities) connected by lines (prerequisites). A common three-state pattern: locked nodes dim, unlocked nodes bright, and nodes that are unlockable right now — prerequisites met, points available — get an extra border or glow. Without that third state, players can't tell what's learnable without clicking to find out.

Lines are usually SVG lines or divs rotated and sized to match an angle and length. Animating a brief light-travel along the line feeding into a node right as it unlocks visually completes the "this flowed in from there" causality.

Large trees rarely fit one screen, which forces zoom or scroll — and it's easy to lose your place once you do. Splitting the tree into color-coded regions by category is a common way to keep a sense of where you are.

When to use

RPG character progression, tech trees, upgrade systems — any progression screen where choices have prerequisites.