html, body {
  margin: 0;
  padding: 0;
  text-align: center;
}
function setup() {
  createCanvas(250, 250);
  rectMode(CENTER)
  background(sin(frameCount * 0.01) * 255);
}

function draw() {
  noFill()
  translate(width / 2, height / 2);

  for (let i = 0; i <= height; i++) {
    let interpolate = map(i, 0, height / (sin(frameCount * 0.025) * 8), 0, 1); //8
    push();
    let rVal = abs(sin(frameCount * 0.01) * 0);
    let gVal = 0;
    let lerpC = lerpColor(
      color(abs(sin(frameCount * 0.01) * 255), 255),
      color(rVal, gVal, abs(sin(frameCount * 0.01) * 255)),
      interpolate
    ); 
    stroke(lerpC);
    
    rect(-width / (sin(frameCount * 0.01) * 2), i, width * 1.5, i / 2);
    rect(-width / (sin(frameCount * 0.01) * 2), -i, width * 1.5, -i / 2);
   
    pop();

    push();

    if ((frameCount / 25) % 10 == 0) {
      rVal = 255//abs(sin(frameCount * 0.1)) * 0//255 
      gVal = 255;
      lerpC = lerpColor(
        color(abs(sin(frameCount * 0.01)) * 255, 100),
        color(gVal, rVal, abs(sin(frameCount * 0.01) * 255)),
       interpolate
     ); 
      stroke(lerpC);
      // line(-width / (sin(frameCount * 0.01) * 2), i, width * 1.125, i / 2);
      // line(-width / (sin(frameCount * 0.01) * 2), -i, width * 1.125, -i / 2);
     
    }
    pop();
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.