Little library that helps you do performant, abstract SVG animations
const svg = `<svg width="256" height="256" xmlns="http://www.w3.org/2000/svg"><g transform="translate(60 60)" stroke="#000" fill="none" fill-rule="evenodd"><circle cx="68" cy="68" r="68"/><circle cx="68" cy="68" r="64"/><circle cx="68" cy="68" r="60"/><circle cx="68" cy="68" r="56"/><circle cx="68" cy="68" r="52"/><circle cx="68" cy="68" r="48"/><circle cx="68" cy="68" r="44"/><circle cx="68" cy="68" r="40"/><circle cx="68" cy="68" r="36"/><circle cx="68" cy="68" r="32"/><circle cx="68" cy="68" r="28"/><circle cx="68" cy="68" r="24"/><circle cx="68" cy="68" r="20"/><circle cx="68" cy="68" r="16"/><circle cx="68" cy="68" r="12"/><circle cx="68" cy="68" r="8"/></g></svg>`
const veczor = new Veczor(myCanvas, mySVG);
veczor.dashGap = Math.random() * 10;
veczor.dashLength = Math.random() * 100;
veczor.color = '#f04';
veczor.fit();
veczor.center();
function loop() {
veczor.velocity += 0.05;
requestAnimationFrame(loop);
}
loop();