JSFiddle - React, Tailwind, and code Playground

by dufia

HTML

<div class='canvasDisco sample'></div>
    <div class='canvasDisco2 sample2'></div>

CSS

body {
    		margin: 0;
    	}
    	.sample {
    		height: 50%;
    		width: 100%;
    		position: absolute;
    		background: white;
    	}

    	.sample2 {
    		height: 50%;
    		width: 100%;
    		position: absolute;
    		top: 50%;
    		background: white
    	}

JavaScript

function canvasDisco(options) {

      var defaults = {
        speed : 50,
        duration : 1000,
        size : 100,
        opacity : 1,
        colors : ['#335395', '#3498DB', '#FCE67E', '#DC5536', '#22304F'],
        shape : 'right-triangle'
      }

      if (typeof(options.opacity) == "undefined") options.opacity = 1;
      if (!options.colors) options.colors = '#000'

      var state = {
        rows: []
      };

      height = options.el.height();
      width = options.el.width();

      var canvasWrapper = document.createElement("div");
      canvasWrapper.setAttribute('id', 'canvasDiscoWrapper');
      canvasWrapper.style.height = height + 'px';
      canvasWrapper.style.width = width + 'px';
      canvasWrapper.style.position = 'absolute';
      canvasWrapper.style.overflow = 'hidden';
      canvasWrapper.style.top = '0';
      canvasWrapper.style.left = '0';

      var canvas = document.createElement("canvas");
      canvas.style.height = height + 100 + 'px';
      canvas.style.width = width + 100 + 'px';
      canvas.style.position = 'absolute';
      canvas.style.top = '-50px';
      canvas.style.left = '-50px';
      canvas.setAttribute('id', 'canvasDisco');
      canvas.setAttribute('height', height + 100 + 'px');
      canvas.setAttribute('width', width + 100 + 'px');

      var ctx = canvas.getContext("2d");
      ctx.imageSmoothingEnabled = true;
      ctx.lineWidth = 1;
      

      function getNumberOfRows(shape, size) {
        if (shape == 'right-triangle' || shape == 'square') {
          var rowsRaw = ((height + 100) / size);
          return Math.floor(rowsRaw, 1);
        }

        if (shape == 'equilateral-triangle') {
          var h = size * Math.cos(Math.PI/6);
          var rowsRaw = ((height + 100) / (h / 2));
          return Math.floor(rowsRaw, 1);
        }
      }

      function getNumberOfCols(shape, size) {
        if (shape == 'right-triangle' || shape == 'square') {
          var colsRaw = ((width + 100) / size);
  ...