<!-- BASED ON: https://www.pinterest.ie/pin/76913106132938295/ -->
html, body {
  margin: 0;
  padding: 0;
}

canvas {
  width: 500px;
  height: 500px;
  max-width: 100vw;
	max-height: 100vh;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  border: 2px solid #8DA5B2;
}
console.clear();

const palette = [
  "#708d81",
  "#f4d58d",
  "#bf0603",
];

const itemWidth = 100;
const itemHeight = window.innerHeight * .5;
const strokeSize = .333;

let globalRand = 0;
let count = 3;

let img;

function preload() {
  img = loadImage('https://assets.codepen.io/5946/grunge_texture.jpg');
}
function setup() {
  createCanvas(windowWidth,windowHeight);
  background(0);
  noStroke();
  
  // OVALS
  for(let round = 0; round < count; round++) {
    globalRand = random() * 1000;
    if(round > 0) {
      blendMode(SOFT_LIGHT);
    }
    drawOvals(round);
  }
  
  // TEXTURE
  tint(255, 90);
  image(img, 0, 0, width, height);
}
function drawOvals(round) {
  for(x = 0; x < width+itemWidth; x += itemWidth) {
    let rand = noise(x, globalRand);
    rand = (rand-.5)*2*(round+1);
    const y = itemHeight*rand;
    fill(random(palette));
    drawOval(x, y + (height*.5-(itemHeight*2)),itemWidth, itemHeight)
    fill(random(palette));
    drawOval(x, y + (height*.5-itemHeight),itemWidth, itemHeight)
    fill(random(palette));
    drawOval(x, y + (height*.5),itemWidth, itemHeight)
    fill(random(palette));
    drawOval(x, y + (height*.5+itemHeight),itemWidth, itemHeight)
    fill(random(palette));
    drawOval(x, y + (height*.5+(itemHeight*2)),itemWidth, itemHeight)
  }
}
function drawOval(x,y,w,h) {
  push()
  translate(x, y);
  beginShape();

  drawOuterVertices(w, h);
  beginContour();
  drawInnerVertices(w*strokeSize, h - w*(1-strokeSize));
  endContour()
  endShape(CLOSE);
  pop()
}
function drawOuterVertices(w,h) {
  let x = -w*.5;
  let y = -h*.5;
  let half = w*.5;
  // LT
  vertex(x+0, y+half);
  // RT
  bezierVertex(
    x+0, y+-half*.33,
    x+w, y+-half*.33,
    x+w, y+half);
  // RB
  vertex(x+w, y+h - half);
  bezierVertex(
    x+w, y+h + (half*.33),
    x+0, y+h + (half*.33),
    x+0, y+h - half);
  // LB
  vertex(x+0, y+h - half);
  // LT
  vertex(x+0, y+half);
}
function drawInnerVertices(w,h) {
  let x = -w*.5;
  let y = -h*.5;
  
  let half = w*.5;
  // LT
  vertex(x+0, y+half);
  // LB
  vertex(x+0, y+h - half);
  bezierVertex(
    x+0, y+h + (half*.33),
    x+w, y+h + (half*.33),
    x+w, y+h - half);
  // RT
  vertex(x+w, y+half);
  // RT
  bezierVertex(
    x+w, y+-half*.33,
    x+0, y+-half*.33,
    x+0, y+half);
  // LT
  vertex(x+0, y+half);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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