JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <canvas id="myCanvas" resize></canvas>
</body>
</html>

CSS

canvas {
  width: 100%;
  height: 100%;
}

JavaScript

// Only executed our code once the DOM is ready.
paper.install(window);
// Setup directly from canvas id:
paper.setup('myCanvas');

tool = new Tool();

var width, height, center;
var points = 10;
var smooth = true;
var path = new Path();
var mousePos = view.center.divide(2);
var pathHeight = mousePos.y;
path.fillColor = 'black';
initializePath();

function initializePath() {
  center = view.center;
  width = view.size.width;
  height = view.size.height / 2;
  path.segments = [];
  path.add(view.bounds.bottomLeft);
  for (var i = 1; i < points; i++) {
    var point = new Point(width / points * i, center.y);
    path.add(point);
  }
  path.add(view.bounds.bottomRight);
  path.fullySelected = true;
}

view.onFrame = function(event) {
  pathHeight += (center.y - mousePos.y - pathHeight) / 10;
  for (var i = 1; i < points; i++) {
    var sinSeed = event.count + (i + i % 10) * 100;
    var sinHeight = Math.sin(sinSeed / 200) * pathHeight;
    var yPos = Math.sin(sinSeed / 100) * sinHeight + height;
    path.segments[i].point.y = yPos;
    if(event.count % 1000 == 1) {
    	//console.log('pathHeight', pathHeight);
    	//console.log('sinSeed', sinSeed);
      //console.log('sinHeight', sinHeight);
      //console.log('yPos', yPos);
    }
  }
  if (smooth) {
    path.smooth({
      type: 'continuous'
    });
  }
}

tool.onMouseMove = function(event) {
  mousePos = event.point;
}

tool.onMouseDown = function(event) {
  smooth = !smooth;
  if (!smooth) {
    // If smooth has been turned off, we need to reset
    // the handles of the path:
    for (var i = 0, l = path.segments.length; i < l; i++) {
      var segment = path.segments[i];
      segment.handleIn = segment.handleOut = null;
    }
  }
}

// Reposition the path whenever the window is resized:
view.onResize = function(event) {
  initializePath();
}