JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<canvas id="a" width="800px" height="600px"></canvas>

CSS

body {
  background: #FFF;
}
canvas {
  width:800px;
  height:600px;
}

JavaScript

var canvas = new fabric.Canvas('a',{
	backgroundColor: 'rgb(100,100,200)',
});
var repeats = 1;

var curve = {
	start: [50,-100],
  end: [150, -100],
  point1: [95, -150],
  point2: []
}

  
var colors = ['#FEE', '#FDD', '#FCC', '#EBB', '#EAA'];
for(var i = 0; i < repeats; i++) {
	var path = new fabric.Path('M 0 0 '+
  'L '+(50-i*5) + ' '+(-110+rand(20))+' '+
  //'L 100 ' + (100+rand(20)) + ' '+
  //'L ' +(150+i*5+rand(4))+' -150 '+
  //'L 200 -140 '+
  cstr(curve) + 
  //'C 200 100 300 100 300 100 300 200 ' +
  //'C 300 -100 300 -160 400 -100 800 0 ' +
  //'L 800 0 '+ // end
  //'L 800 600 '+
  //'L 0 600 '+
  'z');
path.set({ left: 0, top: 100+i*20, fill: colors[i%colors.length] });
canvas.add(path);
}
 function rand(max) {
 	return Math.floor(max*Math.random());
 }
function cstr(curveObj) {
	return 'C ' + curveObj.start.join(' ') + ' ' + curveObj.point1.join(' ') + ' ' + curveObj.end.join(' ') + ' ' + curveObj.point2.join(' ') + ' ';
}