<script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.js"></script>
html,
body {
  margin: 0;
  padding: 0;
}

canvas {
  max-width: 100%;
  max-height: 100%;
}
let noiseMax = 1;
let zoff = 0;
let alpha = 150;
let ox, oy, ot, MAX;

setup = () => {
  createCanvas(windowWidth, windowHeight);
  angleMode(DEGREES);
  ox = width / 2;
  oy = height / 5;
  MAX = max(width / 2, height / 2);
  noFill();
  background(26);
};

draw = () => {
  blendMode(BLEND);
  if (frameCount % 10 == 0) {
    background(26, 15);
  }
  blendMode(SCREEN);
  ot = map(noise(zoff * 0.25), 0, 1, -90, 90);
  push();
  translate(ox, oy);
  rotate(ot);
  let gradientStroke = drawingContext.createLinearGradient(
    -width / 2,
    0,
    width / 2,
    0
  );
  gradientStroke.addColorStop(0, color(150, alpha));
  gradientStroke.addColorStop(0.5, color(150, alpha));
  gradientStroke.addColorStop(1, color(150, alpha));
  drawingContext.strokeStyle = gradientStroke;
  beginShape();
  for (let t = 0; t < 360; t++) {
    let xoff = map(cos(t), -1, 1, 0, noiseMax);
    let yoff = map(sin(t), -1, 1, 0, noiseMax);
    let n = noise(xoff, yoff, zoff);
    let r = map(n, 0, 1, 0, height);
    let x = r * cos(t);
    let y = r * sin(t);
    vertex(x, y);
  }
  endShape(CLOSE);
  zoff += 0.005;
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.