Audience retention curve

<div class="s-demo"><div class="rc"><div class="rc-head">VIEWERS REMAINING <b>BETTER CUT</b></div><svg viewBox="0 0 360 120" preserveAspectRatio="none" aria-label="Two retention curves"><path d="M0 8 L65 26 L120 68 L195 76 L280 94 L360 105" class="rc-old"/><path d="M0 8 L65 23 L120 37 L195 55 L280 74 L360 87" class="rc-new"/><line x1="120" y1="0" x2="120" y2="120" class="rc-cut"/></svg><div class="rc-foot"><span>START</span><span>MOVE THE CUT</span><span>END</span></div><input aria-label="Cut position" type="range" min="40" max="250" value="120"></div></div>

.s-demo{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(8px,3vmin,20px);font:700 clamp(10px,max(2.8vmin,1vw),16px)/1.25 sans-serif;color:var(--fg)}.s-demo *{box-sizing:border-box}@media(min-width:600px){.s-demo>div{transform:scale(1.4)}}.rc{width:min(90vw,570px);background:var(--surface);border:1px solid var(--line);padding:clamp(8px,2vmin,18px)}.rc-head,.rc-foot{display:flex;justify-content:space-between;gap:5px;font-size:clamp(10px,max(1.8vmin,1vw),12px);font-weight:900}.rc-head b{color:var(--accent)}.rc svg{display:block;width:100%;height:clamp(65px,21vmin,140px);margin:5px 0;background:repeating-linear-gradient(to bottom,transparent 0 24%,var(--line) 25%)}.rc path{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:500;animation:rcdraw 5s ease-in-out infinite}.rc-old{stroke:var(--muted);opacity:.55}.rc-new{stroke:var(--accent)}.rc-cut{stroke:var(--fg);stroke-width:2;stroke-dasharray:5 5}.rc-foot{color:var(--muted)}.rc input{width:100%;accent-color:var(--accent);margin:5px 0 0}@keyframes rcdraw{0%{stroke-dashoffset:500}35%,100%{stroke-dashoffset:0}}

const input=document.querySelector('input'),line=document.querySelector('.rc-cut');let v=120,d=12;input.addEventListener('input',()=>{v=Number(input.value);line.setAttribute('x1',v);line.setAttribute('x2',v)});setInterval(()=>{if(document.activeElement===input)return;v+=d;if(v>230||v<70)d=-d;input.value=String(v);line.setAttribute('x1',v);line.setAttribute('x2',v)},550);