JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
  <svg id="svg" viewBox="0 0 1000 1000">
    <defs>

      <!-- This is how we define a gradientin SVG   -->
      <!-- Use Stops to create the path and  -->
      <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(45)">
        <stop offset="0%" style="stop-color:#3B4A72;stop-opacity:0.15" />
        <stop offset="100%" style="stop-color:#45DCA2;stop-opacity:0.15" />
      </linearGradient>

      <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(45)">
        <stop offset="0%" style="stop-color:#3B4A72;stop-opacity:0.25" />
        <stop offset="100%" style="stop-color:#45DCA2;stop-opacity:0.25" />
      </linearGradient>

      <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(45)">
        <stop offset="0%" style="stop-color:#3B4A72;stop-opacity:0.3" />
        <stop offset="100%" style="stop-color:#45DCA2;stop-opacity:0.3" />
      </linearGradient>

      <linearGradient id="grad4" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(45)">
        <stop offset="0%" style="stop-color:#3B4A72;stop-opacity:0.35" />
        <stop offset="100%" style="stop-color:#45DCA2;stop-opacity:0.35" />
      </linearGradient>

      <linearGradient id="grad5" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(45)">
        <stop offset="0%" style="stop-color:#3B4A72;stop-opacity:0.4" />
        <stop offset="100%" style="stop-color:#45DCA2;stop-opacity:0.4" />
      </linearGradient>

      <linearGradient id="grad6" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(45)">
        <stop offset="0%" style="stop-color:#3B4A72;stop-opacity:0.6" />
        <stop offset="100%" style="stop-color:#45DCA2;stop-opacity:0.6" />
      </linearGradient>

      <linearGradient id="grad7" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(45)">
       ...

CSS

body {
  background: #000;
}

#svg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JavaScript

var blob1Points = 10, blob1CX = 500, blob1CY = 500, blob1MinRad = 300, blob1MaxRad = 325, blob1MinDur = 1, blob1MaxDur = 2,
		blob2Points = 10, blob2CX = 500, blob2CY = 500, blob2MinRad = 300, blob2MaxRad = 325, blob2MinDur = 1, blob2MaxDur = 2,
    blob3Points = 10, blob3CX = 500, blob3CY = 500, blob3MinRad = 300, blob3MaxRad = 325, blob3MinDur = 1, blob3MaxDur = 2,
    blob4Points = 10, blob4CX = 500, blob4CY = 500, blob4MinRad = 300, blob4MaxRad = 325, blob4MinDur = 1, blob4MaxDur = 2,
    blob5Points = 10, blob5CX = 500, blob5CY = 500, blob5MinRad = 300, blob5MaxRad = 325, blob5MinDur = 1, blob5MaxDur = 2,
    blob6Points = 10, blob6CX = 500, blob6CY = 500, blob6MinRad = 300, blob6MaxRad = 325, blob6MinDur = 1, blob6MaxDur = 2,
    blob7Points = 10, blob7CX = 500, blob7CY = 500, blob7MinRad = 300, blob7MaxRad = 325, blob7MinDur = 1, blob7MaxDur = 2;






// the one in the back
var blob1 = createBlob({
  element: document.querySelector("#path1"),
  numPoints: blob1Points,
  centerX: blob1CX,
  centerY: blob1CY,
  minRadius: blob1MinRad,
  maxRadius: blob1MaxRad,
  minDuration: blob1MinDur,
  maxDuration: blob1MaxDur
});

var blob2 = createBlob({
  element: document.querySelector("#path2"),
  numPoints: blob2Points,
  centerX: blob2CX,
  centerY: blob2CY,
  minRadius: blob2MinRad,
  maxRadius: blob2MaxRad,
  minDuration: blob2MinDur,
  maxDuration: blob2MaxDur
});

var blob3 = createBlob({
  element: document.querySelector("#path3"),
  numPoints: blob1Points,
  centerX: blob3CX,
  centerY: blob3CY,
  minRadius: blob3MinRad,
  maxRadius: blob3MaxRad,
  minDuration: blob3MinDur,
  maxDuration: blob3MaxDur
});

var blob4 = createBlob({
  element: document.querySelector("#path4"),
  numPoints: blob1Points,
  centerX: blob4CX,
  centerY: blob4CY,
  minRadius: blob4MinRad,
  maxRadius: blob4MaxRad,
  minDuration: blob4MinDur,
  maxDuration: blob4MaxDur
});

var blob5 = createBlob({
  element: document.querySelector("#path5"),
  numPoints: blob5Points,
  centerX:...