pimdewit / veczor

Having fun with vector graphics

Veczor

Little library that helps you do performant, abstract SVG animations

DEMO DEMO DEMO DOCS DOCS DOCS

DEMO DEMO DEMO DOCS DOCS DOCS

Example visuals

Example setup

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();