plexus G | Frontend Forever

plexus G

About this Code

Hello reader, I am breezy. Nice to meet you again in this free code sharing website. In this post I am going to explain about plexus G. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

console.log("Event Fired")
window.onload = function() {
    var el = document.getElementById("plexus");

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  
    var points = [{"x":138,"y":34},{"x":114,"y":48},{"x":97,"y":72},{"x":90,"y":100},{"x":89,"y":121},{"x":92,"y":149},{"x":101,"y":176},{"x":120,"y":197},{"x":145,"y":208},{"x":174,"y":210},{"x":201,"y":208},{"x":228,"y":194},{"x":245,"y":172},{"x":254,"y":145},{"x":256,"y":117},{"x":252,"y":90},{"x":241,"y":64},{"x":220,"y":44},{"x":194,"y":33},{"x":167,"y":30},{"x":69,"y":211},{"x":48,"y":192},{"x":33,"y":167},{"x":25,"y":141},{"x":24,"y":111},{"x":29,"y":85},{"x":40,"y":57},{"x":58,"y":37},{"x":81,"y":21},{"x":107,"y":10},{"x":134,"y":4},{"x":162,"y":0},{"x":190,"y":1},{"x":218,"y":6},{"x":245,"y":16},{"x":270,"y":28},{"x":291,"y":32},{"x":313,"y":13},{"x":338,"y":2},{"x":365,"y":0},{"x":392,"y":8},{"x":412,"y":28},{"x":420,"y":54},{"x":416,"y":81},{"x":397,"y":100},{"x":369,"y":101},{"x":349,"y":83},{"x":353,"y":56},{"x":375,"y":43},{"x":362,"y":32},{"x":335,"y":36},{"x":311,"y":49},{"x":308,"y":72},{"x":317,"y":98},{"x":321,"y":125},{"x":318,"y":153},{"x":305,"y":181},{"x":287,"y":202},{"x":265,"y":219},{"x":240,"y":230},{"x":212,"y":239},{"x":185,"y":242},{"x":156,"y":242},{"x":133,"y":239},{"x":102,"y":230},{"x":146,"y":342},{"x":104,"y":346},{"x":77,"y":354},{"x":56,"y":372},{"x":52,"y":398},{"x":66,"y":423},{"x":92,"y":434},{"x":118,"y":438},{"x":146,"y":442},{"x":176,"y":441},{"x":204,"y":442},{"x":233,"y":439},{"x":261,"y":432},{"x":286,"y":422},{"x":303,"y":402},{"x":303,"y":375},{"x":287,"y":353},{"x":259,"y":345},{"x":232,"y":344},{"x":202,"y":342},{"x":174,"y":342},{"x":51,"y":221},{"x":29,"y":237},{"x":16,"y":262},{"x":13,"y":289},{"x":27,"y":313},{"x":49,"y":329},{"x":17,"y":355},{"x":2,"y":378},{"x":0,"y":406},{"x":12,"y":433},{"x":32,"y":450},{"x":58,"y":461},{"x":85,"y":469},{"x":114,"y":474},{"x":141,"y":475},{"x":170,"y":476},{"x":199,"y":475},{"x":228,"y":473},{"x":254,"y":469},{"x":282,"y":462},{"x":306,"y":452},{"x":331,"y":437},{"x":348,"y":414},{"x":356,"y":388},{"x":354,"y":358},{"x":344,"y":334},{"x":324,"y":313},{"x":298,"y":302},{"x":271,"y":296},{"x":243,"y":293},{"x":214,"y":293},{"x":185,"y":292},{"x":157,"y":292},{"x":130,"y":291},{"x":103,"y":292},{"x":75,"y":285},{"x":64,"y":262},{"x":76,"y":239}];
    var maxDistance = 110;

var getDistance = function(point1, point2) {
        return Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2));
    }

var refreshPoints = function() {
        var lines = []
        for (var i = points.length - 1; i >= 0; i--) {
            for (var j = 0, _length = points.length; j < _length; j++) {
                var distance = getDistance(points[j], points[i]);
                if ((points[i].x == points[j].x && points[i].y == points[j].y) || distance > maxDistance)
                    continue;
                var line = document.createElementNS('http://www.w3.org/2000/svg', "line")
                line.setAttribute('x1', points[i].x); 
                line.setAttribute('y1', points[i].y);
                line.setAttribute('x2', points[j].x); 
                line.setAttribute('y2', points[j].y);
                line.setAttribute("class", "plexus-line")
                line.style.strokeDasharray = distance + " " + distance;
                line.style.strokeDashoffset = distance;
                line.style.transitionDelay = line.style.WebkitTransitionDelay = ((i * 50 % 1500) / 1000) + "s"
                el.appendChild(line);
                lines.push(line);
            };
        };
        window.requestAnimationFrame(function() {
            for (var i = lines.length - 1; i >= 0; i--) {
                lines[i].style.strokeDashoffset = 0
            };
        })
    }

refreshPoints()
}

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Leave a Comment

You need to login first to comment.