Native histograms

<div class="demo"><div class="title">LATENCY DISTRIBUTION</div><div class="scene"><div class="hist"><div class="fixed"><b>fixed</b><i></i><i></i><i></i><i></i></div><div class="adaptive"><b>native</b><i></i><i></i><i></i><i></i><i></i><i></i></div></div><div class="hist-note">empty ranges omitted</div></div></div>

.demo{width:min(94vw,690px);height:min(88vh,320px);box-sizing:border-box;padding:clamp(9px,2.5vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);font:600 clamp(12px,2.4vmin,16px)/1.25 var(--font-sans,"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);overflow:hidden}.title{color:var(--accent);font:700 clamp(12px,2.4vmin,16px)/1.2 var(--font-sans,"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif);letter-spacing:.04em}.scene{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.scene{flex-direction:column;gap:8px}.hist{width:96%;height:70%;display:grid;grid-template-columns:1fr 1fr;gap:10px}.hist>div{display:flex;align-items:flex-end;gap:3px;padding:6px;border:1px solid var(--line);border-radius:7px;position:relative;box-sizing:border-box}.hist b{position:absolute;top:5px;left:7px;color:var(--muted);font:700 clamp(12px,2.4vmin,15px)/1 var(--font-sans)}.hist i{flex:1;height:20%;background:var(--accent);border-radius:3px 3px 0 0;transition:height .5s}.hist .adaptive i{background:var(--accent-2)}.hist-note{color:var(--muted);font-size:clamp(12px,2.4vmin,15px)}

let n=0;const fixed=[25,60,35,15],native=[15,30,64,44,25,11];function draw(){document.querySelectorAll(".fixed i").forEach((b,i)=>b.style.height=(fixed[i]+(n%3)*6)+"%");document.querySelectorAll(".adaptive i").forEach((b,i)=>b.style.height=(native[i]+((n+i)%3)*5)+"%");n++}draw();setInterval(draw,750)