JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.4/TweenMax.min.js"></script>
<div><canvas id="canvas"></canvas></div>

CSS

* {
  margin: 0;
  padding: 0;
}

div {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #000000;
  overflow: hidden;
}

canvas {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vmax;
  height: 80vmax;
}

JavaScript

var BackgroundAnimation = (function() {

  function Blob(attr) {
    this.drawStyle = attr.drawStyle;
    this.points = attr.points;
    this.color = attr.color;
  }

  Blob.prototype.render = function(ctx) {
    var firstPoint, ctrlPoint, nextPoint,
        that = this;

    firstPoint = this.points[0];

    ctx.save();
    ctx.strokeStyle = this.color;
    ctx.fillStyle = this.color;
    ctx.lineWidth = 0.3;
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    ctx.beginPath();
    ctx.moveTo(this.points[0].x, this.points[0].y);
    this.points.forEach(function(p, i) {

      nextPoint = that.points[i + 1];
      if (nextPoint) {
        ctrlPoint = {
          x: (p.x + nextPoint.x) / 2,
          y: (p.y + nextPoint.y) / 2
        };
        ctx.quadraticCurveTo(p.x, p.y, ctrlPoint.x, ctrlPoint.y);
      } else {
        ctrlPoint = {
          x: (that.points[that.points.length - 1].x + firstPoint.x) / 2,
          y: (that.points[that.points.length - 1].y + firstPoint.y) / 2
        };
        ctx.quadraticCurveTo(
          that.points[that.points.length - 1].x,
          that.points[that.points.length - 1].y, 
          ctrlPoint.x, ctrlPoint.y
        ) ;
      }
    });	
    ctx.closePath();
    if (this.drawStyle === 'stroke') {
      ctx.stroke();	
    } else if (this.drawStyle === 'fill') {
      ctx.fill();
    }
    ctx.restore();
  };

  var width, height,
      canvas, ctx,
      blobs;

  function init(size, cnvs) {
    width = size.width;
    height = size.height;
    canvas = cnvs;
    ctx = canvas.getContext('2d');

    canvas.width = width;
    canvas.height = width;

    blobs = generateBlobs(10);

    ctx.fillStyle = '#000000';
  }

  function generateBlobs(num) {
    var i, blob, blobs,
        point, x, y,
        angle, radius, 
        drawStyle, color,
        offset,
        divider;

    blobs = [];
    divider = 5;

    for (i = 1; i < num; i += 1) {
      blob = [];
      for (angle = 0; angle <= Math.PI * 2; angle += 0.45)...