JSFiddle - React, Tailwind, and code Playground

by KATT

HTML

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <body>
        <div id="holder"></div>
    </body>
  </body>
</html>

CSS

body {
    background: #fefefe;
    color: #000;
    margin:0;
    padding:0;
    overflow:hidden;
}

JavaScript

var MathHelpers = {
  getCoordinateInCircle: function(index, numberOfSegments, circleRadius) {

    var angle = MathHelpers.getAngleInCircle(index, numberOfSegments);

    var offsetX = circleRadius * Math.cos(angle);
    var offsetY = circleRadius * Math.sin(angle);

    return {
        x: offsetX
      , y: offsetY
    };
  },
  getAngleInCircle: function(index, numberOfSegments, circleRadius) {
    var dAngle = 2 * Math.PI / numberOfSegments;
    var angle = dAngle * index;

    return angle;
  },
  Vector: {
    length: function(p1) {
      return Math.sqrt(Math.pow(p1.x, 2) + Math.pow(p1.y, 2));
    },
    unitVector: function(p1)
    {
        var l = MathHelpers.Vector.length(p1);
        return {
          x: p1.x / l,
          y: p1.y / l
        };
    },
    dotProduct:function(p1,p2) {
      var _p1 = MathHelpers.Vector.unitVector(p1);
      var _p2 = MathHelpers.Vector.unitVector(p2);
      return _p1.x * _p2.x + _p1.y * _p2.y;
    },
    add: function(p1, p2) {
      return {
        x: p1.x + p2.x,
        y: p1.y + p2.y
      };
    },
    sub: function(p1, p2) {
      return {
        x: p2.x - p1.x,
        y: p2.y - p1.y
      };
    },
    mul: function(p1, value) {
      return {
        x: p1.x * value,
        y: p1.y * value
      };
    }
  }
};


var canvas = {
    width: document.body.scrollWidth
  , height: document.body.scrollHeight
};
var paper;
var numberOfDotsInInnerCircle = 40;
var numberOfDotsInOuterCircle = 200;

var outerCircleRadius = 280;
var innerCircleRadius = 200;


var getRandomColor = function() {
  return Math.floor(Math.random()*16777215).toString(16);
};
// Adds the offset of the center of the circle to any given coordintes. And rounds the values in order to work in Raphael.
var addOffsetAndRound = function (coordinates) {

  var centerX = canvas.width/2;
  var centerY = canvas.height/2;


  var x = centerX + coordinates.x;
  var y = centerY + coordinates.y;

  return {
    x: Math.round(x),
    y: Math.round(y)
 ...