JSFiddle - React, Tailwind, and code Playground

by justinwinter

HTML

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

CSS

html,body {
  margin: 0;
  padding: 0;
}
.outer {
  width: 1000px;
}
canvas {
/*   width:100%; */
/*   border: 1px solid #444; */
/*   width: 80%; */
}
body {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5284fc+0,ff286e+100 */
background: #5284fc; /* Old browsers */
background: -moz-linear-gradient(45deg, #5284fc 0%, #ff286e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #5284fc 0%,#ff286e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #5284fc 0%,#ff286e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5284fc', endColorstr='#ff286e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

JavaScript

var c = document.getElementById('waves'),
    ctx = c.getContext('2d'),
    cw = c.width = window.innerWidth,
    ch = c.height = window.innerHeight,
    midH = ch / 2,
    peakMaxH = 40,
    peakMaxV = 100,
    peaks = { va: peakMaxV, vb: -peakMaxV, ha: peakMaxH, hb: -peakMaxH },
    lines = [];

class WibbleLine {
  constructor(ctx, num_points, width, vPos, anim_duration) {
    this.ctx = ctx;
    this.canvasWidth = width;
    this.vertBasis = vPos;
    this.points = [];
    this.peakMaxH = 40;
    this.peakMaxV = 100;
    this.animDuration = anim_duration;
    this.peaks = { va: this.peakMaxV, vb: -this.peakMaxV, ha: this.peakMaxH, hb: -this.peakMaxH };
    
    this.createLine(num_points);  
    // this.drawLine();
    // this.anim();
  }
   
  createLine(num_points) {    
    var gap = this.canvasWidth / num_points;
    
    for(var i = 0; i < num_points + 4; i++) {
      this.points.push(i * gap);
    }
    
    // console.log(this.points);
  }
  
  drawLine() {
    this.ctx.beginPath(); 
    this.ctx.moveTo(this.points[0], ch);
    this.ctx.strokeStyle = '#5284fc';
    this.ctx.lineWidth = 1;
    this.ctx.fillStyle = 'rgba(78,129,252,0.1)';
        
    // Draw curves
    for(var i = 1; i < this.points.length-1; i+=4) {
      this.ctx.quadraticCurveTo(
        this.points[i], this.vertBasis + this.peaks.va, 
        this.points[i+1], this.vertBasis);
      this.ctx.quadraticCurveTo(
        this.points[i+2], this.vertBasis + this.peaks.vb, 
        this.points[i+3], this.vertBasis);      
    }
    
    this.ctx.lineTo(this.canvasWidth, this.vertBasis * 2);
    this.ctx.lineTo(0, this.vertBasis * 2);

    this.ctx.stroke();
    this.ctx.fill();
    this.ctx.closePath();
  }
  
}

addLine(3, ch/2, 8);
addLine(4, (ch/2) * 1.1, 11);
addLine(5, (ch/2) * 1.2, 6);
addLine(4, (ch/2) * 1.3, 7);
addLine(6, (ch/2) * 1.4, 8);
addLine(4, (ch/2) * 1.5, 9);
addLine(12, (ch/2) * 1.6, 10);

function addLine(segments, vy, anim) {
  var el1 = new WibbleLine(ctx, segments,...