2c:null 2d:["$","title",null,{"children":"What Goes Up ... | Fabian Iwand | Observable"}] 32:T670,animation = (options = {}) => { const { width: w = 600, height: h = w, pixelRatio: dpr = window.devicePixelRatio || 1, count: n = 70, // number of ellipses lineWidth: lw = 1.5, bgColor: bg = '#fff', fillColor: fill = '#fff', strokeColor: stroke = '#000', // Params: t = global animation offset, ti = relative ellipse offset t = (t) => 1 - t, // eased global offset x = (t, ti) => w/2, // ellipse (x) offset, in px y = (t, ti) => mix(-.1, 1.5, ti) * h, // ellipse (y) offset, in px r = (t, ti) => mix(.1, .3, ease((ti-t+1) % 1, 2)) * h, // ellipse x (r)adius, in px s = (t, ti) => mix(.55, .4, 1 - ease((ti+t) % 1, 4)), // ellipse y radius (s)cale relative to x radius a = (t, ti) => mix(-.02, .07, ease((ti+t) % 1, 3)), // ellipse rotation (a)ngle, in radians } = options; const c = DOM.context2d(w, h, dpr); c.lineWidth = lw; c.strokeStyle = stroke; c.canvas.style.maxWidth = '100%'; return _t => { c.fillStyle = bg; c.fillRect(0, 0, w, h); c.fillStyle = fill; const o = t(_t); for(let i = 0; i < n; i++) { const ti = i/n, _r = r(o, ti), ellipse = (l = 0) => c.ellipse( x(o, ti), y(o, ti), l + _r, l + _r * s(o, ti), a(o, ti) * Math.PI, 0, Math.PI * 2 ); // We get a vastly better performance by drawing a fill instead of a stroke. if(lw > 0) c.fillStyle = stroke; c.beginPath(); ellipse(lw*2); c.fill(); c.fillStyle = fill; c.beginPath(); ellipse(lw); c.fill(); } return c.canvas; }; }33:T6f6,function easeInput(range = [], options = {}) { const [min = 0, max = 1, ival = 0] = range, {step = .001, label = null, value = [min, max, ival]} = options; const __ns__ = DOM.uid('scope').id; const css = ` #${__ns__} { font: 13px/1.2 var(--sans-serif); display: flex; align-items: baseline; flex-wrap: wrap; max-width: 100%; width: auto; } @media only screen and (min-width: 30em) { #${__ns__} { flex-wrap: nowrap; width: 360px; } } #${__ns__} .label { width: 120px; padding: 5px 0 4px 0; margin-right: 6.5px; flex-shrink: 0; } #${__ns__} .form { display: flex; width: 100%; } #${__ns__} .range { flex-shrink: 1; width: 100%; } #${__ns__} .range-slider { width: 100%; } #${__ns__} .interval { margin-left: 6.5px; } #${__ns__} .interval input { margin-bottom: 5px; width: 100%; box-sizing: border-box; } `; const $ival = html``, $ivalLabel = html`${$ival}
intervals`, $range = rangeInput({min, max, value: [value[0], value[1]], step}), $label = html`

${DOM.text(label)}`, $output1 = html``, $output2 = html``, $view = html`

${$label}

${$range}

${$output1} … ${$output2}

${$ivalLabel}

${html`