Counterfactual baseline

<div class="cf"><div class="title">ACTUAL VS NO-CAMPAIGN <b id="diff">+0</b></div><svg viewBox="0 0 400 160" preserveAspectRatio="none" aria-label="Actual sales above estimated baseline"><path id="area" fill="var(--accent)" opacity=".22"></path><path id="actual" fill="none" stroke="var(--accent)" stroke-width="5"></path><path d="M15 126 L95 113 L175 102 L255 89 L335 77 L390 66" fill="none" stroke="var(--muted)" stroke-width="3" stroke-dasharray="8 6"></path></svg><div class="legend"><span>● ACTUAL</span><span>┄ ESTIMATED BASELINE</span></div></div>

.cf{width:min(87%,600px);font:850 clamp(10px,max(2vmin,1vw),14px)/1.2 sans-serif}.title,.legend{display:flex;justify-content:space-between;gap:10px}.title{border-bottom:2px solid var(--fg);padding-bottom:9px}.title b{color:var(--accent)}svg{display:block;width:100%;height:clamp(95px,25vmin,185px);margin-top:clamp(8px,2vmin,16px)}.legend{border-top:1px solid var(--line);padding-top:8px;font-size:clamp(10px,max(1.5vmin,1vw),12px);color:var(--muted)}.legend span:first-child{color:var(--accent)}

let up=false;function draw(){const base=[126,113,102,89,77,66],x=[15,95,175,255,335,390],actual=base.map((v,i)=>v-(up?i*9:0));document.querySelector('#actual').setAttribute('d',x.map((v,i)=>(i?'L':'M')+v+' '+actual[i]).join(' '));document.querySelector('#area').setAttribute('d',x.map((v,i)=>(i?'L':'M')+v+' '+actual[i]).join(' ')+' '+x.slice().reverse().map((v,j)=>'L'+v+' '+base[base.length-1-j]).join(' ')+' Z');document.querySelector('#diff').textContent=up?'+45 INDEX':'+0'}draw();setInterval(()=>{up=!up;draw()},1700);