Generate animated particle svgs for VSCode extension "vscode-power-mode".

vscode-powermode-particles.js

const count = 10;
const size = 5;
const duration = 1000;

const random = (a, b) => Math.random() * (b - a) + a;

let svg = Array(count).fill().map(() => {
    const sizeR = Math.round(size * random(.6, 1.2), 2);
    const startX = Math.round(100 - size / 2 + size * random(-1, 1), 2);
    const startY = Math.round(100 - size / 2 + size * random(-1, 1), 2);
    const opacityStart = Math.round(random(.6, 1), 2);
    const opacityMid = Math.round(opacityStart + random(.3, .5), 2);
    const opacityTime = Math.round(random(.3, .8), 2);
    const endX = Math.round(startX + Math.sign(Math.random() - .5) * (Math.random() > .5 ? (200 - startX) : startX) * Math.pow(Math.random(), 1.5), 2);
    const midY = Math.round(startY - startY * (Math.pow(Math.random(), 2) * .8 + .2), 2);
    const endY = Math.round(startY + (200 - startY) * random(.5, 1), 2);
    return '' +
        `<rect x="${startX}" y="${startY}" width="${sizeR}" height="${sizeR}" fill-opacity="0">` +
        `<animate attributeName="fill-opacity" dur="${duration / 1000}s" values="${opacityStart};${opacityMid};0" keyTimes="0;${opacityTime};1"/>` +
        `<animate attributeName="x" dur="${duration / 1000}s" values="${startX};${endX}" keyTimes="0;1"/>` +
        `<animate attributeName="y" dur="${duration / 1000}s" calcMode="spline" values="${startY};${midY};${endY}" keyTimes="0;.5;1" keySplines="0 .2 .2 1;.8 0 1 .8"/>` +
        `</rect>`;
}).join('');
svg = `<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">${svg}</svg>`;
svg = `data:image/svg+xml;base64,${btoa(svg).replace(/=*$/, '')}`;
console.log(svg);