How to implement this in svg.js?

Question

JavaScript

<div id="drawing"></div>
    <script>
        var points = {
            'A' : [50, 50],
            'B' : [1200, 50],
            'C' : [625, 500]
        },
            firstPoint = [(getRandom(50, 1200)), (getRandom(50, 500))],
            draw = SVG('drawing').size(1200, 500),
            group = draw.group();
        point = firstPoint;
        for (let i = 0; i<100000; i++) {
            nextPoint(point);
        }
        
        //group.animate({ ease: '<', delay: '1.5s', duration: 5000 }).rotate(180).skew(25, 0);
        
        
        function whatPoint() {
            switch (getRandom(1, 3)) {
                case 1 : return "A";
                case 2 : return "B";
                case 3 : return "C";
            }
        }
        function nextPoint(previousPoint) {
            var what = points[whatPoint()];
            point = [(previousPoint[0] + what[0])/2, (previousPoint[1] + what[1])/2];
            group.add(draw.circle(1).fill("#000").move(point[0], point[1]));
        }
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
    </script>

Tell me, can he put one point at a time and show? And not to be loaded and only then to show all points?

Answer 1

Tell me, can he put one point at a time and show?

You can, but probably not one at a time - let's say 100 at a time. Showed part of the points - setTimeout to show the next part. Like so .