Skip to content
This repository has been archived by the owner on Aug 20, 2022. It is now read-only.
/ veczor Public archive

Having fun with vector graphics

License

Notifications You must be signed in to change notification settings

pimdewit/veczor

Repository files navigation

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

Veczor, by Pim de Wit Veczor, by Pim de Wit Veczor, by Pim de Wit

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