body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #25eff9;
}
canvas{
box-shadow: 10px 10px 0px #f725c2;
border-radius: 50px
}
let noiseXrange;
let shiftX=0;
let hue = 0;
function setup() {
createCanvas(310, 310);
}
function draw() {
let hue = 150+(int)(noise(millis()/500)*210);
background('#300524');
shiftX+=0.1;
strokeWeight(4);
stroke(getColor(hue));
let step = 6;
for (let x = 0; x <= width; x += step) {
let noiseX=(shiftX+x)/10;
let y = noise(noiseX);
let barHeight = 300;
line(x-2,height/2,x-2,height/2-barHeight/2+y*barHeight);
}
}
function getColor(hue){
return color('hsla('+hue+', 100%, 50%, 1)');
}
This Pen doesn't use any external CSS resources.