Every story and comment from the Hacker News API, in a layout borrowed from 2001.
A comment on Ask HN: An SVG animation tool for idiots?. Parent comment
<canvas id="my-canvas"></canvas> <div style="display: none;"> <img id="asset-foo" src="/img/foo.svg" /> <!-- ... --> </div> <script defer type="application/javascript"> window.addEventListener("DOMContentLoaded", () => { const canvas = document.getElementById("my-canvas") const context = canvas.getContext("2d") const fooAsset = document.getElementById("asset-foo") // ... const frame = () => { canvas.clearRect(0, 0, canvas.width, canvas.height) // NB: this will fail if image could not be loaded by the browser context.drawImage(fooAsset, x, y, w, h) // ... requestAnimationFrame(frame) } requestAnimationFrame(frame) }) </script>
(I'll shut down the ngrok in a few hours)
The design is inspired by star trek's LCARS (the computer interface in The Next Generation) ^^
(I'll shut down the ngrok in a few hours)