let palettes = [ ["#ff6d00", "#ff7900", "#ff8500", "#ff9100", "#ff9e00", "#240046", "#3c096c", "#5a189a", "#7b2cbf", "#9d4edd"], ["#aaaaaa","#bbbbbb","#cccccc","#dddddd","#eeeeee"], ["#03045e","#0077b6","#00b4d8","#90e0ef","#caf0f8"], ["#2b2d42","#8d99ae","#edf2f4","#ef233c","#d90429"], ["#ff6d00","#ff7900","#ff8500","#ff9100","#ff9e00","#240046","#3c096c","#5a189a","#7b2cbf","#9d4edd"], ["#5f0f40","#9a031e","#fb8b24","#e36414","#0f4c5c"], ["#b8d8d8","#7a9e9f","#4f6367","#eef5db","#fe5f55"], ["#da2c38","#226f54","#87c38f","#f4f0bb","#43291f"], ["#75dddd","#508991","#172a3a","#004346","#09bc8a"], ["#c52233","#a51c30","#a7333f","#74121d","#580c1f"], ["#8ecae6", "#219ebc", "#126782", "#023047", "#ffb703", "#fd9e02", "#fb8500"], ["#d6d6d6", "#ffee32", "#ffd100", "#202020", "#333533"], ["#03071e", "#370617", "#6a040f", "#9d0208", "#d00000", "#dc2f02", "#e85d04", "#f48c06", "#faa307", "#ffba08"], ["#007f5f","#2b9348","#55a630","#80b918","#aacc00","#bfd200","#d4d700","#dddf00","#eeef20","#ffff3f"], ["#800016","#a0001c","#c00021","#ff002b","#ffffff","#407ba7","#004e89","#002962","#00043a"], ]; var svg = ` `; var logo; let textGraphics; let bgGraphics; let mask; let palette; function preload() { document.body.style.background = '#201F22'; document.body.style.color = '#201F22'; logo = loadImage("data:image/svg+xml;base64," + btoa(svg)) } function setup() { createCanvas(windowWidth, windowHeight); frameRate(20); noiseSeed(pb.random() * 100000); let maxLength = max(width, height); let diagonal = maxLength * 1.42; bgGraphics = createGraphics(diagonal, diagonal); textGraphics = createGraphics(diagonal, diagonal); mask = createGraphics(diagonal, diagonal); let logoWidth = width <= height ? width * 0.75 : height * 0.5 / 0.826283988; let logoHeight = logoWidth * 0.826283988; let x = width * 0.21 - (width - height) * 0.5 + (width - logoWidth) * 0.5; let y = height * 0.21 - (height - width) * 0.5 + (height - logoHeight) * 0.5; mask.image(logo, x, y, logoWidth, logoHeight); palette = palettes[int(noise(0) * palettes.length)]; background('#201F22'); } function draw() { textGraphics.clear(); bgGraphics.clear(); let angle = noise(1000) * TWO_PI; bgGraphics.push(); bgGraphics.translate(bgGraphics.width * 0.5, bgGraphics.height * 0.5); bgGraphics.rotate(angle); drawPatterns(bgGraphics, ['#201F22', '#28272A', '#272629']); bgGraphics.pop(); textGraphics.push(); textGraphics.translate(textGraphics.width * 0.5, textGraphics.height * 0.5); textGraphics.rotate(angle); drawPatterns(textGraphics, palette); textGraphics.pop(); let img = textGraphics.get(); img.mask(mask.get()); textGraphics.clear(); textGraphics.image(img, 0, 0); let xOffset = width * 0.21 - (width - height) * 0.5; let yOffset = height * 0.21 - (height - width) * 0.5; image(bgGraphics, -xOffset, -yOffset); image(textGraphics, -xOffset, -yOffset); } function drawPatterns(g, palette) { g.noStroke(); divide(g, -g.width * 0.5, -g.height * 0.5, g.width, 5, 0, palette); } function divide(g, x, y, w, num, depth, palette) { let grid = w / num; for (let j = 0; j < num; j++) { for (let i = 0; i < num; i++) { let xpos = x + i * grid; let ypos = y + j * grid; let seedX = xpos / width; let seedY = ypos / height; let factor = 100; g.push(); g.translate(xpos, ypos); if (noise(seedX * factor, seedY * factor, depth) < 0.5 || depth >= 2) { factor = 10000; let seedZ = noise(100) * 10000 + frameCount * 0.05; let c = noise(seedX * factor, seedY * factor, seedZ) * palette.length; g.drawingContext.shadowColor = color(0, 0, 0, 55); g.drawingContext.shadowBlur = grid * 0.3; g.fill(palette[int(c)]); g.rect(0, 0, grid, grid); } else { divide(g, 0, 0, grid, 3, depth + 1, palette); } g.pop(); } } }

0xad0...49b06

0xad0...49b06