badge.js
var c = document.body.appendChild(document.createElement('canvas'));
var w = 1050, h = 1500;
c.width = w;
c.height = h;
var ctx = c.getContext('2d');
ctx.fillStyle = '#000';
function wave(t, n, f) {
var val = 0;
for (var k = 1; k < n; k ++) {
val += Math.sin(Math.PI * 4 * ((2 * k) - 1) * f * t) / ((2 * k) - 1);
}
return (4 / Math.PI) * val;
}
function draw(n, f, a) {
ctx.clearRect(0,0,w,h);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, h/2);
for (var t = 0; t < 1.05; t += 0.002) {
var y = wave(t * Math.PI, n, f)
ctx.lineTo(t * w * 1.26, (h/2) + (y * h/4));
}
ctx.lineTo(w, 0);
ctx.fill();
}
function drawAt(n) {
draw(n, 0.2);
}
drawAt(0.5);
var i = 0;
var iter = 2;
setInterval(() => {
if (i < 100) {
drawAt(0.5 * i);
}
i += iter;
iter *= 2;
}, 500);