Mirror of static site repo git.pfy.ch/pfych/static
Something went wrong. Try again.
2.8 kB · 87 lines
HTML
at master
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788<html> <body style="margin: 0"> <canvas id="canvas" width="88" height="31" style="image-rendering: pixelated" ></canvas> </body> <script> // 76x26 const logo = "iVBORw0KGgoAAAANSUhEUgAAAEwAAAAaCAYAAAAdQLrBAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB50lEQVRYCdVXi26EMAwb0/7/lzcZ4ZPnSx+0KXBIU9vEdpxcQdr2te75LUhvhfhdYfrs8tUFGuiEJkBFDT0zhvWOx73QQ9csvolOXNVQZCKKJZZvSqH+sIefpnwOYNhgTvk8lRU3LM/dA5WyB6av4wPbnbcUvZJsmq8Rz6jG2HzldQrqd9SzavzrmQcF9LRCHrE9fHBqOGpGGOZYL1qd5/Vco4XXGi+uiyqotX+JHEA3QH4PzjHgQi+KU1dXre2cUk7jqlXa77r4hmHjRUBinCti+njBkoZysI9wjnFtz+tZsT3ayvU9ey3qnPnoF0W86oeeu/qLPvp39Itb4ob9HPnS2xXlEevRKXHf4mdu2Bt5IlBromcIE6XnqHcNrOW6NtAWd2n+zoH5UB59s/gr3DkweMge2vKhnxnYcjPHr+hDRBi1+XfA9iXCaj59XxtYa0BXmXUffvahRIONYs7rOmvTLSMuqFzkSnzHuY7yIqzmyXVchCGWq3JK+BZmqwGQi4SVQzMRjjmsEUfz5JdwzLe0FEd914wwxFK/iFExB2lOBVfsWfvKmkN91L5hQ4ITpMcPC709aWATs76OevX/knz12CFuFWIfcbtgmjfMG0EuiiGe+VxRI9PvPrCa6Vouy8jH3C40/AdInUY6Yxg1wwAAAABJRU5ErkJggg=="; const img = new Image(); img.src = `data:image/png;base64, ${logo}`;
const dBlue = "#86a8e7"; const lBlue = "#91eae4"; const squareSize = 10;
const { width, height } = canvas; const ctx = canvas.getContext("2d"); let lastDrawTime = performance.now(); let shift = 0; let imagePos = [0, 0]; let flip = [1, 1];
const renderBg = (delta) => { for (let y = -squareSize; y < height; y += squareSize) { const oddRow = y % (squareSize * 2); for (let x = -squareSize; x < width; x += squareSize) { const oddCol = x % (squareSize * 2);
ctx.fillStyle = oddRow ? oddCol ? dBlue : lBlue : oddCol ? lBlue : dBlue;
ctx.fillRect(x + shift, y + shift, squareSize, squareSize); } }
if (shift > squareSize) { shift = 0; } else { shift += 0.01 * delta; } };
const renderLogo = (delta) => { const moveDistance = 0.02 * delta; imagePos[0] += moveDistance * flip[0]; imagePos[1] += moveDistance * flip[1];
if (imagePos[0] + 38 >= width) { flip[0] = -1; } else if (imagePos[0] <= 0) { flip[0] = 1; }
if (imagePos[1] + 13 >= height) { flip[1] = -1; } else if (imagePos[1] <= 0) { flip[1] = 1; }
ctx.drawImage(img, ...imagePos, 38, 13); };
const draw = (ms) => { const delta = ms - lastDrawTime; ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, width, height);
renderBg(delta); renderLogo(delta);
lastDrawTime = performance.now(); requestAnimationFrame(draw); };
requestAnimationFrame(draw); </script></html>