<html>
<body>
</body>
</html>
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
const fr = 29;
const lfo = new LFO(1, 3, 1);

function LFO(min, max, step = 1) {
  const damp = 0.0137;
  this.max = max;
  this.min = min;
  this.step = step;
  this.run = () => {
    return (
      this.min + this.max * Math.sin(radians(Math.PI * frameCount * (this.step * damp)))
    );
  };
}

function drawShape() {
  const n = lfo.run();
  const gr = 1.61803;
  for (let i = 1; i < 360; i += 3) {
    const c1 = color(n + i % 255, n + i % 164, n + i % 64);
    push();
    translate(centerX, centerY);
    rotate(i * gr + n);
    stroke(c1);
    fill(c1);
    scale(n);
    bezier(i, i, n, n, i, i * n, mouseX * mouseY, 0);
    pop();
  }
}

function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
  frameRate(fr);
  smooth();
}

function draw() {
  background(255, 0.25);
  drawShape();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js