Cloudinary

<div class="usage" data-motif="tiles"><div class="head"><b>CLOUDINARY · CREDITS</b><span id="amount">0</span></div><div class="art"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="rail"><span id="fill"></span></div><div class="readout"><span id="volume">0</span><strong id="cost">$0</strong></div><input id="usage-slider" type="range" min="0" max="700" step="1" value="0" aria-label="Monthly usage"><small>Free 25 · Plus 225/$99 · Advanced 600/$249</small></div>

.usage{width:min(94vw,760px);height:min(88vh,325px);padding:clamp(8px,2.2vmin,17px);border:1px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(4px,1.4vmin,9px);font:600 clamp(12px,2.5vmin,17px)/1.2 var(--font-sans,system-ui);overflow:hidden}.head,.readout{display:flex;align-items:center;justify-content:space-between;gap:8px}.head b{font-size:1.1em;color:var(--accent)}.head span{font-family:ui-monospace,monospace;color:var(--muted)}.art{flex:1;min-height:35px;display:flex;align-items:center;justify-content:center;gap:clamp(3px,1.2vmin,10px);padding:3px 7px}.art i{display:block;flex:1;max-width:52px;height:35%;border:2px solid var(--line);background:var(--bg);transition:background .3s,height .3s,transform .3s}.art i.on{background:var(--accent);border-color:var(--accent)}.rail{height:7px;border-radius:7px;background:var(--line);overflow:hidden}.rail span{display:block;height:100%;width:0;background:var(--accent-2);transition:width .35s}.readout strong{font:800 clamp(15px,4.5vmin,27px)/1 ui-monospace,monospace;color:var(--accent-2)}.readout strong.unknown{font-size:clamp(11px,2.6vmin,16px)}.usage input{width:100%;height:18px;accent-color:var(--accent)}.usage small{color:var(--muted);font-size:clamp(10px,2.2vmin,13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-motif=people] .art i{flex:none;width:clamp(15px,5vmin,36px);height:clamp(15px,5vmin,36px);border-radius:50%;box-shadow:0 9px 0 -4px var(--line)}[data-motif=key] .art i{height:55%;border-radius:40% 40% 4px 4px;transform:rotate(-12deg)}[data-motif=mail] .art i{height:48%;border-radius:3px;clip-path:polygon(0 0,100% 0,100% 85%,50% 52%,0 85%)}[data-motif=route] .art i{height:14%;border-radius:20px;transform:translateY(calc((var(--n,0) - 3) * 5px))}[data-motif=route] .art i:nth-child(2n){--n:7}[data-motif=errors] .art i{height:var(--h,45%);border-radius:2px 2px 0 0}[data-motif=errors] .art i:nth-child(3n){--h:85%}[data-motif=events] .art i{height:var(--h,65%);border-radius:30px}[data-motif=events] .art i:nth-child(2n){--h:28%}[data-motif=search] .art{flex-direction:column;align-items:stretch;gap:3px}[data-motif=search] .art i{height:6px;max-width:none;width:var(--w,88%);border:0;border-radius:10px}[data-motif=search] .art i:nth-child(3n){--w:58%}[data-motif=tiles] .art{display:grid;grid-template-columns:repeat(4,min(9vw,42px));grid-template-rows:repeat(2,1fr);justify-content:center}[data-motif=tiles] .art i{width:100%;height:100%;border-radius:4px}

const slider=document.getElementById('usage-slider'),amount=document.getElementById('amount'),volume=document.getElementById('volume'),costEl=document.getElementById('cost'),fill=document.getElementById('fill'),shapes=[...document.querySelectorAll('.art i')];const steps=[0,25,150,225,400,600,700],cap=700,free=25,unit="credits";let index=0,timer;function draw(n){const cost=(n<=25?0:n<=225?99:n<=600?249:null);slider.value=String(n);amount.textContent=n.toLocaleString()+' '+unit;volume.textContent=n<=free?Math.round(n/free*100)+'% of free tier':'+'+(n-free).toLocaleString()+' over free';costEl.textContent=cost===null?"price unpublished":'$'+cost.toLocaleString('en-US',{maximumFractionDigits:2});costEl.classList.toggle('unknown',cost===null);fill.style.width=Math.min(100,n/free*100)+'%';fill.style.background=n>free?'var(--accent-3)':'var(--accent-2)';shapes.forEach((shape,i)=>shape.classList.toggle('on',i<Math.max(0,Math.ceil(n/cap*shapes.length))))}draw(steps[0]);timer=setInterval(()=>{index=(index+1)%steps.length;draw(steps[index])},1100);slider.addEventListener('input',()=>{clearInterval(timer);draw(Number(slider.value))})