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%;
}

#path8 {
  fill: transparent;
  stroke: #444;
  stroke-width: 1.4px;
}



#path9 {
fill: transparent;
stroke: #fff;
  stroke-width: 1;
}

JavaScript

var blob1Points = 20, blob1CX = 500, blob1CY = 500, blob1MinRad = 300, blob1MaxRad = 325, blob1MinDur = 1.00, blob1MaxDur = 2.00,
		blob2Points =  8, blob2CX = 500, blob2CY = 500, blob2MinRad = 290, blob2MaxRad = 315, blob2MinDur = 1.00, blob2MaxDur = 2.00,
    blob3Points = 16, blob3CX = 500, blob3CY = 500, blob3MinRad = 280, blob3MaxRad = 305, blob3MinDur = 1.00, blob3MaxDur = 2.00,
    blob4Points =  4, blob4CX = 500, blob4CY = 500, blob4MinRad = 270, blob4MaxRad = 295, blob4MinDur = 1.00, blob4MaxDur = 2.00,
    blob5Points = 20, blob5CX = 500, blob5CY = 500, blob5MinRad = 260, blob5MaxRad = 285, blob5MinDur = 1.00, blob5MaxDur = 2.00,
    blob6Points = 12, blob6CX = 500, blob6CY = 500, blob6MinRad = 250, blob6MaxRad = 275, blob6MinDur = 1.00, blob6MaxDur = 2.00,
    blob7Points = 15, blob7CX = 500, blob7CY = 500, blob7MinRad = 150, blob7MaxRad = 180, blob7MinDur = 0.75, blob7MaxDur = 1.00;




// 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"),
...