JSFiddle - React, Tailwind, and code Playground

by SwagColoredKitteh

HTML

<canvas id="canvas" width="480" height="480"></canvas>

Babel + JSX

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

function drawLandscape(roughness, peaks) {
	let landscape = [];
  for(let i = 0; i < 2 + peaks; i++) {
  	landscape.push(Math.random() * 2 - 1);
  }
  for(let i = 0; i < 6; i++) {
  	let newLandscape = [];
  	for(let j = 0; j < landscape.length - 1; j++) {
    	newLandscape.push(landscape[j]);
      newLandscape.push((landscape[j] + landscape[j + 1]) / 2 + (Math.random() - 0.5) / Math.pow(2, 1 + i * (1 / roughness)));
    }
    newLandscape.push(landscape[landscape.length - 1]);
    landscape = newLandscape;
  }
  ctx.beginPath();
  ctx.moveTo(0, landscape[0] * canvas.height / 2 + canvas.height / 2);
  for(let i = 1; i < landscape.length; i++) {
  	const h = landscape[i];
  	ctx.lineTo(i * canvas.width / (landscape.length - 1), h * canvas.height / 2 + canvas.height / 2);
  }
  ctx.lineTo(canvas.width, canvas.height);
  ctx.lineTo(0, canvas.height);
  ctx.closePath();
}

ctx.save();
ctx.rotate(Math.PI);
ctx.translate(-canvas.width, -canvas.height);
ctx.globalAlpha = 0.01;
ctx.fillStyle = "#00DEDE";
for(let i = 0; i < 100; i++) {
	drawLandscape(0.01 + i * 0.02, 3);
  ctx.fill();
}
ctx.restore();
ctx.fillStyle = "#995500";
ctx.shadowColor = "#00FF00";
ctx.shadowBlur = 3;
drawLandscape(1.2, 0);
ctx.fill();
ctx.beginPath();
ctx.arc(50, 50, 30, 0, 2 * Math.PI);
ctx.fillStyle = "#FFFF99";
ctx.shadowColor = "#FFFF00";
ctx.fill();