Динамичная граница в форме волны

// инициировать  canvas 
const canvas = document.querySelector("canvas"); 
const ctx = canvas.getContext("2d"); 
let cw = (canvas.width = 600), 
  cx = cw / 2; 
let ch = (canvas.height = 400), 
  cy = ch / 2; 
ctx.fillStyle = "white" 
 
// определить углы прямоугольника 
let corners = [[100, 100], [500, 100], [500, 300], [100, 300]]; 
 
let amplitud = 20;// амплитуда колебаний 
let speed = 0.01;// скорость колебаний 
let points = []; // массив точек для рисования кривой 
 
class Point { 
  constructor(x, y, hv) { 
    // точка колеблется вокруг этой точки (cx, cy) 
    this.cx = x; 
    this.cy = y; 
    // текущий угол колебаний 
    this.a = Math.random() * 2 * Math.PI; 
    this.hv = hv;// переменная, чтобы знать, является ли колебание горизонтальным или вертикальным 
 
    this.update(); 
  } 
 
  // функция для обновления значения угла 
  update() { 
    this.a += speed; 
 
    if (this.hv == 0) { 
      this.x = this.cx; 
      this.y = this.cy + amplitud * Math.cos(this.a); 
    } else { 
      this.x = this.cx + amplitud * Math.cos(this.a); 
      this.y = this.cy; 
    } 
  } 
} 
 
 
// функция, чтобы разделить линию, которая идет от a до b в n сегментах 
// Я использую полученные точки, чтобы создать новый точечный объект и вставить эту новую точку в массив точек 
function divide(n, a, b) { 
  for (var i = 0; i <= n; i++) { 
    let p = { 
      x: (b[0] - a[0]) * i / n + a[0], 
      y: (b[1] - a[1]) * i / n + a[1], 
      hv: b[1] - a[1] 
    }; 
    points.push(new Point(p.x, p.y, p.hv)); 
  } 
} 
 
divide(10, corners[0], corners[1]);points.pop(); 
divide(5, corners[1], corners[2]);points.pop(); 
divide(10, corners[2], corners[3]);points.pop(); 
divide(5, corners[3], corners[0]);points.pop(); 
 
 
// это функция, которая берет массив точек и рисует изогнутую линию через эти точки 
function drawCurves() { 
  //найти первую середину и перейти к ней 
  let p = {}; 
  p.x = (points[points.length - 1].x + points[0].x) / 2; 
  p.y = (points[points.length - 1].y + points[0].y) / 2; 
  ctx.beginPath(); 
  ctx.moveTo(p.x, p.y); 
  //кривой через остальное, останавливаясь в каждой средней точке 
  for (var i = 0; i < points.length - 1; i++) { 
    let mp = {}; 
    mp.x = (points[i].x + points[i + 1].x) / 2; 
    mp.y = (points[i].y + points[i + 1].y) / 2; 
    ctx.quadraticCurveTo(points[i].x, points[i].y, mp.x, mp.y); 
  } 
  //кривая через последнюю точку, обратно к первой средней точке 
  ctx.quadraticCurveTo( 
    points[points.length - 1].x, 
    points[points.length - 1].y, 
    p.x, 
    p.y 
  ); 
  ctx.stroke(); 
  ctx.fill(); 
} 
 
function Draw() { 
  window.requestAnimationFrame(Draw); 
  ctx.clearRect(0, 0, cw, ch); 
  points.map(p => { 
    p.update(); 
  }); 
  drawCurves(); 
} 
 
Draw();

canvas{border:1px solid; background:#6ab150}

<canvas></canvas>