Metrics

<div class="demo"><div class="title">REQUESTS / ERRORS</div><div class="scene"><div class="chart"><div class="bar"><i></i><b></b></div><div class="bar"><i></i><b></b></div><div class="bar"><i></i><b></b></div><div class="bar"><i></i><b></b></div><div class="bar"><i></i><b></b></div><div class="bar"><i></i><b></b></div><div class="bar"><i></i><b></b></div></div><div class="legend">■ requests　<span>● errors</span></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:9px}.chart{width:100%;height:68%;display:flex;align-items:flex-end;justify-content:space-around;border-bottom:1px solid var(--line)}.bar{width:10%;height:100%;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;gap:3px}.bar i{width:9px;height:9px;border-radius:50%;background:var(--accent-3);transition:transform .5s}.bar b{width:100%;height:25%;background:var(--accent);border-radius:4px 4px 0 0;transition:height .5s}.legend{font:600 clamp(12px,2.4vmin,15px)/1.2 ui-monospace,monospace;color:var(--accent)}.legend span{color:var(--accent-3)}

const bars=[...document.querySelectorAll(".bar")];let n=0;function tick(){bars.forEach((bar,i)=>{let h=22+((i*17+n*11)%58);bar.querySelector("b").style.height=h+"%";bar.querySelector("i").style.transform="translateY("+(-Math.round(h/5))+"px)"});n++}tick();setInterval(tick,800)