p5.js: How to get shapes based on random points and Bézier curves without crossing?

Question

I would like to generate similar shapes like that with p5.js:

<svg viewBox="0 0 1366 768">
<path class="st0" d="M330,384c-17.84-62.23,459.5,224.5,69.5-130.5c-40.84-37.18,23-111,69-73s192,60.9,197.5-11.55
    s454.5,34.55,210.5,55.55s-482,82-291,127s293.15-178,363.58-79.5s153.42,326.5-46.58,207.5s-250-154-241-45s-214,226-186,100
    S350.5,455.5,330,384z"/>
</svg>

So I started to set up the following:

function setup() {
  createCanvas(windowWidth, windowHeight);
  let numberOfPoints = random(0, 20);

  // ???

}

function draw() {
  fill(0, 0, 0);
  noStroke();
}

* {
  margin: 0;
  padding: 0;
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>

And then I would like to add these instructions:

1. random number of points (0, 20)
2. that connect with Bézier curves
3. without any crossing of the shape
4. to get shapes that look similar to the example

I have already tried a lot, and always failed. One of the failed attempts was that:

let points = [];

function setup() {
  createCanvas(windowWidth, windowHeight);
  let numberOfPoints = random(0, 10);
  for (let i = 0; i < numberOfPoints; i++) {
    points.push(createVector(random(width), random(height)));
  }
}

function draw() {
  fill(0, 0, 0);
  noStroke();
  beginShape();
  for (let i = 0; i < points.length; i++) {
    vertex(points[i].x, points[i].y);
    bezierVertex(points[i].x1, points[i].y1, points[i].x2, points[i].y2, points[i].x3, points[i].y3, points[i].x4, points[i].y4);
  }
  endShape();
}

* {
  margin: 0;
  padding: 0;
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>

Could somebody help me please? I would be super thankful! <3