Spiral js

Colorful spiral canvas

by schrodingers

HTML

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

CSS

body {
  margin: 0;
}

JavaScript

var canvas = document.querySelector('canvas');
var w = canvas.width = window.innerWidth;
var h = canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
// Начальное вращение спирали, "свернутость"
var rotation = 120;

function loop() {
  window.requestAnimationFrame(loop);
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, w, h);
  ctx.save();
  ctx.translate(w / 2, h / 2);
  ctx.globalCompositeOperation = 'lighter';
  for (var i = 0; i < 250; i++) {
    ctx.lineWidth = 10;
    ctx.scale(0.95, 0.95);
    ctx.rotate(rotation * 0.15 * Math.PI / 180);
    ctx.strokeStyle = 'hsl(' + i * 16 + ',100%, 60%)';
    ctx.strokeRect(260, 360, 16, 5);
  }
  // Угловая? скорость вращения
  rotation += 0.15;
  ctx.restore();
}
loop();