A Pen by Ethan Marshall

Thumbnail
This awesome code was written by 321, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 321 ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Ethan Marshall</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <canvas id="canvas"></canvas>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/321/a-pen-by-ethan-marshall-vorxJ */
html,body { margin: 0; padding: 0; height: 100%; width: 100%; }
canvas { position: absolute; }

/*Downloaded from https://www.codeseek.co/321/a-pen-by-ethan-marshall-vorxJ */
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
let height, width, s = 0;
window.onresize = function resize() {
	height = canvas.height = document.body.offsetHeight;
	width = canvas.width = document.body.offsetWidth;
};
window.onresize();
context.fillStyle = '#fff';
context.fillRect(0, 0, width, height);
(function loop() {
	context.save();
  context.translate(width/2, height/2);
	context.fillStyle = 'rgba(0,0,0,0.09)';
  context.fillRect(-width/2, -height/2, width, height);
	let j = 0, k = 0;
  s += 0.001;
  for( let i = 0; i < 512; i++ ) {
		const r = i * ((j / k) / 5);
    context.beginPath();
    context.fillStyle = `hsl(${i%360}, 100%, 50%)`;
    context.globalAlpha = r/(512 * ((2 / 3) / 5) / 2) + 0.1;
    context.translate(Math.sin(i * s) * (i * j++), Math.cos(i * s) * (i * k++));
    context.fillRect(0, 0, r, r);
    context.closePath();
    if( j > 2 ) j = 0;
    if( k > 1 ) k = 0;
	}
  context.restore();
  requestAnimationFrame(loop);
}());

Comments