Web developer and autodidact with an interest in creative coding.
video = svg`<svg width=400 height=300>
${colorFilter}
<foreignObject width=400 height=300 filter=url(#color)>
<video width=400 autoplay loop muted crossorigin=anonymous>
<source src="${videoSrc}">
</video>
</foreignObject>
</svg>
`
colorFilter = !scale
? '<filter id=color />'
: filter('color', scales[scale], {
invert: options.includes('invert'),
steps: options.includes('quantize') ? 5 : null,
})
videoSrc = options.includes('cors') ? 'https://i.imgur.com/bG8t8iJ.mp4' : FileAttachment('video.mp4').url()
// Use a global playback offset to avoid restarts when changing options.
video.querySelector('video').addEventListener('play', function() {
this.currentTime = Date.now()/1000 % this.duration;
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
