paper.js – Slow animation of the canvas on mobile

I am recently working on a project that involves an animation in the background. It works well on the desktop, but performance drops dramatically on the mobile. I use Paper.js to import a svg and animate it. That's the demo.

paper.project.importSVG (svg, function (item) {
var moveSpeed ​​= 70;
var movementRadius = 15;
var boundingRec = item.bounds;
lines var = [];
circles var = [];
/ *
Organize lines and circles in different tables
* /
$ .each (item.getItems ({
recursive: true,
}), function (index, item) {
if (instance instance of paper.Shape && item.type == & # 39;) {
item.data.connectedSegments = [];
item.data.originalPosition = item.position;
circles.push (article);
}
if (item instanceof paper.Path) {
lines.push (item);
}
});

/ *
Loop by all paths
Check if segment points are in circles
Anchor point to the circle if in
* /
$ .each (lines, function (pathIndex, path) {
$ .each (path.segments, function (segmentIndex, segment) {
$ .each (circles, function (circleIndex, circle) {
if (circle.contains (segment.point)) {
circle.data.connectedSegments.push (segment.point);
returns false;
}
});
});
});

/ *
Animate circles
* /
$ .each (circles, function (circleIndex, circle) {
var originalPosition = circle.data.originalPosition;
var radius = circle.radius * movementRadius;

var destination = originalPosition.add (paper.Point.random (). multiply (radius));

circle.onFrame = function () {
while (! destination.isInside (boundingRec)) {
destination = originalPosition.add (paper.Point.random (). multiply (radius));
}

vector of var = destination.troit (circle.position);
circle.position = circle.position.add (vector.divide (moveSpeed));
// move the connected segments according to the circle

for (var i = 0; i <circle.data.connectedSegments.length; i ++) {
circle.data.connectedSegments[i].together({
x: circle.position.x,
y: circle.position.y,
});
}

if (vector.length <5) {
destination = originalPosition.add (paper.Point.random (). multiply (radius));
}
}
});
});

A single SVG animation drives CPU utilization up to 90% on mid-level mobile devices and renders the interface unusable. Any advice or help is very appreciated.