JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
        <button name="removeContainer" type="button" id="removeContainer" class="btn btn-primary" data-toggle="modal" data-target="#removeContainerModal">Remove Container</button>
<div id="removeContainerModal" class="modal container-instance" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Remove Container</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="wave-container" id="wave-container">
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary" id="confirmRemove">Remove Selected</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

CSS

body {
  background-color: black;
}

.modal-body {
  background-color: black;
}

JavaScript

/* Modified from https://github.com/CaffeinaLab/SiriWaveJS */

(function() {

  function SiriWave(opt) {
    opt = opt || {};

    this.phase = 0;
    this.run = false;

    // UI vars

    this.ratio = opt.ratio || window.devicePixelRatio || 1;

    this.width = this.ratio * (opt.width || 320);
    this.width_2 = this.width / 2;
    this.width_4 = this.width / 4;

    this.height = this.ratio * (opt.height || 100);
    this.height_2 = this.height / 2;

    this.MAX = (this.height_2) - 4;

    // Constructor opt

    this.amplitude = opt.amplitude || 1;
    this.speed = opt.speed || 0.2;
    this.frequency = opt.frequency || 6;
    this.color = (function hex2rgb(hex) {
      var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
      hex = hex.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
      });
      var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      return result ?
        parseInt(result[1], 16).toString() + ',' + parseInt(result[2], 16).toString() + ',' + parseInt(result[3], 16).toString() :
        null;
    })(opt.color || '#fff') || '255,255,255';

    // Canvas

    this.canvas = document.createElement('canvas');
    this.canvas.width = this.width;
    this.canvas.height = this.height;
    if (opt.cover) {
      this.canvas.style.width = this.canvas.style.height = '100%';
    } else {
      this.canvas.style.width = (this.width / this.ratio) + 'px';
      this.canvas.style.height = (this.height / this.ratio) + 'px';
    };

    this.container = opt.container || document.body;
    this.container.appendChild(this.canvas);

    this.ctx = this.canvas.getContext('2d');

    // Start

    if (opt.autostart) {
      this.start();
    }
  }

  SiriWave.prototype._GATF_cache = {};
  SiriWave.prototype._globAttFunc = function(x) {
    if (SiriWave.prototype._GATF_cache[x] == null) {
      SiriWave.prototype._GATF_cache[x] = Math.pow(4 / (4 + Math.pow(x, 4)), 4);
    }
    return...