<!-- 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);
}
This Pen doesn't use any external CSS resources.