Untitled

<!DOCTYPE html>
<html>
<head>
<style>

body{
 background-color: black;
}
</style>

</head>
<body>

<canvas id="myCanvas" width="800" height="700" style="background: black;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var cx = c.width/2; var cy = c.height/2;
function line(x1,y1,x2,y2,color){
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.closePath();
  ctx.stroke();
  ctx.strokeStyle = color;
}
function conflict(radius,_cx,_cy) {
  var width = 0;
  var id = setInterval(frame, 10);
  function frame() {
    if (width == 2000) {
      clearInterval(id);
      ctx.clearRect(0, 0, c.width, c.height);
    } else {
      ctx.clearRect(0, 0, c.width, c.height);
      width+=10;
      for(var j=0;j<20;j++) {
        var r = radius+(Math.sin(width)*50)+(j*2);
        for(var i = 0;i<360;i+=10) {
          var x1 = _cx+(Math.cos(i*Math.PI/180)*r);
          var y1 = _cy+(Math.sin(i*Math.PI/180)*r);
          line(x1,y1,x1-50,y1+((j%2)*10),"#6360F9");

        }
      }

    }
  }
}
conflict(70,cx,cy);


</script>

</body>
</html>