<div id="stick"></div>
body{
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(180deg, #ff93ce, #99e5ff);

}

canvas{
  border-radius: 200px
}

#stick {
  width: 40px;
  height: 50%;
  background: white;
  position: absolute;
  bottom: 0%;
  z-index: -1;
} 
let size;
let additionalSize;

function setup() {
  createCanvas(300, 300);
  noStroke();
  additionalSize = 150;
  size = height+additionalSize;
}

function draw() {
  let c1 = color('#ed74d4');
  let c2 = color('#fcf525');

  let gradientSteps = 14;
  let gradientStripHeight = size/gradientSteps;

  for(let i = 0; i < gradientSteps; i++){
    let t = map(i,0,gradientSteps,0.0,1.0);
    let interpolatedColor = lerpColor(c1,c2,t);
    fill(interpolatedColor);
    rect(0,50*sin(millis()/200)+i*gradientStripHeight-additionalSize/2,width,gradientStripHeight);

  } 

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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