vrdhn/st.html

## st.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sierpiński triangle</title>
    <link rel="stylesheet" href="style.css">
    <script>
      document.addEventListener('DOMContentLoaded', (event) => {
	  const canvas = document.getElementById('canvas');
	  var ctx = canvas.getContext("2d");
	  const height   = 600;
	  const width    = 600;
	  canvas.width = width;
	  canvas.height = height;
	  const x_pts = [ 0, width/2 , width ];
	  const y_pts = [ height, 0, height ];
	  var x = Math.random() * height;
	  var y = Math.random() * width;
	  const colors =  ["blue", "red", "yellow" ];
	  for( var j  = 0 ; j < 100000; j ++ ) {
	      const n = Math.floor(Math.random() * 3);
	      ctx.fillStyle =colors[n];
	      x = (x + x_pts[n])/2;
	      y = (y + y_pts[n])/2;
	      ctx.fillRect(x,y,1,1);
	  }
      });
    </script>
  </head>
  <body>
    <canvas id="canvas" width="600" height="600"></canvas>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Sierpiński triangle</title>
	<link rel="stylesheet" href="style.css">
	<script>
	document.addEventListener('DOMContentLoaded', (event) => {
	const canvas = document.getElementById('canvas');
	var ctx = canvas.getContext("2d");
	const height = 600;
	const width = 600;
	canvas.width = width;
	canvas.height = height;
	const x_pts = [ 0, width/2 , width ];
	const y_pts = [ height, 0, height ];
	var x = Math.random() * height;
	var y = Math.random() * width;
	const colors = ["blue", "red", "yellow" ];
	for( var j = 0 ; j < 100000; j ++ ) {
	const n = Math.floor(Math.random() * 3);
	ctx.fillStyle =colors[n];
	x = (x + x_pts[n])/2;
	y = (y + y_pts[n])/2;
	ctx.fillRect(x,y,1,1);
	}
	});
	</script>
	</head>
	<body>
	<canvas id="canvas" width="600" height="600"></canvas>
	</body>
	</html>