Wireframe animation on canvas is slow I'm recently working on a project that involves animation in the background. It works well on desktop but performance drops drastically on mobile. I'm using Paper.js to import a svg and animate it. This is the demo.

paper.project.importSVG(svg, function(item) {
          var moveSpeed = 70;
          var movementRadius = 15;
          var boundingRec = item.bounds;
          var lines = [];
          var circles = [];
          /*
            Arrange lines and circles into different array
          */
          $.each(item.getItems({
            recursive: true,
          }), function(index, item) {
            if (item instanceof paper.Shape &amp;&amp; item.type == 'circle') {
              item.data.connectedSegments = [];
              item.data.originalPosition = item.position;
              circles.push(item);
            }
            if (item instanceof paper.Path) {
              lines.push(item);
            }
          });

          /*
            Loop through all paths
            Checks if any segment points is within circles
            Anchors the point to the circle if within
          */
          $.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 );
                  return false;
                }
              });
            });
          });

          /*
            Animate the 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) );
              }

              var vector = destination.subtract(circle.position);
              circle.position = circle.position.add(vector.divide(moveSpeed));
              // move connected segments based on circle

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

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


A single SVG animation alone is causing the CPU usage to go up to 90% on mid-tier mobile devices and it go to the point that the interface becomes unusable. Any advice or help is much appreciated.
This might be a small improvement but there is no need to check that destination is inside boundingRec on each frame, you just need to check it when creating a new destination.

Here is a modified codepen in which destination creation is done in a separated function, removing the unneeded check:

function createNewDestination(originalPosition, radius) {
    var destination = null;
    while (!destination || !destination.isInside(boundingRec)) {
        destination = originalPosition.add(paper.Point.random().multiply(radius));
    }
    return destination;
}