Two.js webgl is too slow for many objects

Question

I use Two.js + Vue.js to display my svg in webgl to optimize its rendering, but the render function takes longer than calling svg via Vue

I tried to use Pixi, but it doesn’t have rounding at the paths

Two has this but in webgl mode because of the abundance of objects it draws for a long time and also has limitations for the clip

var two = new Two({
  type: Two.Types.webgl,
  width: 1024,
  height: 1024
})

var morph = (first, second, range) => {
  return first + (second - first) * range
}

var animate = () => {

  // elem getting from code

  // anchors1 and anchors2 are arrays for interpolation with content [{ anchors: ..., x: ..., y: ... }, ...]

  var verts = elem.vertices;

  for (var i = 0, len = verts.length; i < len; i++) {
    v = verts[i];

    v.x += morph(anchors1[i].x, anchors2[i].x, range) - v.x;
    v.y += morph(anchors1[i].y, anchors2[i].y, range) - v.y;

    c1 = anchors1[i].controls;
    c2 = anchors2[i].controls;

    v.controls.left.x += morph(c1.left.x, c2.left.x, range) - v.controls.left.x;
    v.controls.left.y += morph(c1.left.y, c2.left.y, range) - v.controls.left.y;

    v.controls.right.x += morph(c1.right.x, c2.right.x, range) - v.controls.right.x;
    v.controls.right.y += morph(c1.right.y, c2.right.y, range) - v.controls.right.y;
  }
}

// Maximum canvas size ~800px

two.appendTo(document.getElementById("testCanvas"));
two.bind('update', animate).play();

Vue.js (do not look at big functions (animate, hair and etc.), this is fixed)

Two.js