Move a pencil while drawing ?

[lauhub]

Move a pencil while drawing ?

[maxwellito]

Hello,

Apologies about the delay.

The library doesn't allow such a thing, but it's something you could hack.
The problem is, this can only work on oneByOne animation, otherwise there might be more than one line being drawn at the same time code.
The .map property of the Vivus instance will have a list of all the path elments to animate. Let's hook the rendering (trace method) to add your code. Here is an example

const yourAnimation = new Vivus(...);

yourAnimation.traceOriginal = yourAnimation.trace;
yourAnimation.trace = function () {
  this.traceOriginal();
  var path = this.map.filter(x => x.progress !== 0 && x.progress !== 1)[0];

  if (!path) return;
 
  var length = path.length * path.progress;
  var point = path.el.getPointAtLength(length);
  
  // Do your magic here
  console.log('The coordinates', point);
}

I tested it on the demo page, it works well

Be aware, the coordinates are relative to the viewbox of the SVG.