JSFiddle - React, Tailwind, and code Playground

by heaversm

HTML

<script src="//cdn.jsdelivr.net/snap.svg/0.2.0/snap.svg-min.js"></script>
<svg id="svg"></svg>

JavaScript

var mainModule = {
  s: Snap("#svg"),
  drawingConfig: {
    circles: {
      amount: 20,
      sizeMin: 10,
      sizeMax: 20,
      proximity: 100,
      circleGroup: null,
      circleArray: [],
      animTime: 2000
    },
    canvas: {
      width: 800,
      height: 600
    }
  },

  init: function(){
    //this.sizeCanvas();
    this.makeCircles();
  },

  sizeCanvas: function(){
    $('#svg').width(800).height(600);
  },

  makeCircles: function(){
    this.drawingConfig.circles.circleGroup = this.s.g();

    for (var i=0; i<this.drawingConfig.circles.amount;i++){
      var circleX = this.randomNumber(0, this.drawingConfig.canvas.width);
      var circleY = this.randomNumber(0, this.drawingConfig.canvas.height);
      var circleRadius = this.randomNumber(this.drawingConfig.circles.sizeMin,this.drawingConfig.circles.sizeMax);
      var circleFill = '#'+Math.floor(Math.random()*16777215).toString(16);
      var circleShape = this.s.circle(circleX, circleY, circleRadius);
      circleShape.attr({
        fill: circleFill
      });
      this.drawingConfig.circles.circleGroup.add(circleShape);

      var circleIncline = this.setIncline();
      var circleObj = { incline: circleIncline, shape: circleShape };

      this.drawingConfig.circles.circleArray.push(circleObj);

    }

    this.update();


  },

  setIncline: function(){
    return { incX: this.randomNumber(-5,5), incY: this.randomNumber(-5,5) }
  },

  update: function(){

    var lines = Snap.selectAll('line');
    lines.remove();

    for (var i=0; i<this.drawingConfig.circles.amount; i++){
      var circle = this.drawingConfig.circles.circleArray[i];
      var circleX = circle.shape.node.cx.animVal.value;
      var circleY = circle.shape.node.cy.animVal.value;
      this.move(circle,circleX,circleY);

      for (var j=0;j<i;j++){
        if (i != j){
          var circle2 = this.drawingConfig.circles.circleArray[j];
          var circle2X = circle2.shape.node.cx.animVal.value;
          var...