Webleb - fragmentos de código

HTML

<!DOCTYPE html>

<head>

<title>Generative Garden</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

background: #0a1929;

overflow: hidden;

font-family: sans-serif;

}

.light-column {

position: fixed;

top: 0;

width: 33.33vw;

height: 100vh;

background: linear-gradient(to bottom, transparent, rgba(100, 255, 218, 0.05), transparent);

pointer-events: none;

animation: pulseLight 8s infinite alternate ease-in-out;

z-index: 1;

}

.light-column:nth-child(1) { left: 0; animation-delay: 0s; }

.light-column:nth-child(2) { left: 33.33vw; animation-delay: 2s; }

.light-column:nth-child(3) { left: 66.66vw; animation-delay: 4s; }

@keyframes pulseLight {

0% { opacity: 0.3; transform: scaleX(0.9); }

100% { opacity: 0.8; transform: scaleX(1.1); }

}

#scene {

display: flex;

width: 100vw;

height: 100vh;

position: relative;

z-index: 2;

}

.panel {

flex: 1;

height: 100vh;

overflow: hidden;

position: relative;

}

#sketch-1, #sketch-2, #sketch-3 {

width: 100%;

height: 100%;

display: block;

}

#fog {

position: fixed;

inset: 0;

background: radial-gradient(circle at 50% 100%, rgba(20, 50, 80, 0.2), transparent 70%);

pointer-events: none;

mix-blend-mode: overlay;

z-index: 3;

}

</style>

</head>

<body>

<defs>

</filter>

</defs>

</svg>

</div>

const palette = [

"#00ffaa",

"#ff006f",

"#ff9d00",

"#ffa3fd",

"#f2f794",

"#d9c0fa"

];

function flowerSketch(seed, containerId) {

return p => {

let pts = [];

let ends = [];

p.setup = () => {

p.randomSeed(seed);

const container = document.getElementById(containerId);

p.createCanvas(container.clientWidth, container.clientHeight);

p.noLoop();

generate();

};

p.windowResized = () => {

const container = document.getElementById(containerId);

p.resizeCanvas(container.clientWidth, container.clientHeight);

generate();

};

function generate() {

p.clear();

pts = [];

ends = [];

let n = 25;

for (let i = 0; i < n; i++) {

pts.push({

x: p.random(p.width * 0.2, p.width * 0.8),

y: p.height + 10,

len: p.random(p.height * 0.4, p.height * 0.7),

t: p.random(0.003),

s: p.random(0.02)

});

}

drawBackground();

drawFlowers();

}

function drawBackground() {

for (let i = 0; i < 20; i++) {

let col = p.color(p.random(palette));

col.setAlpha(40);

p.fill(col);

p.noStroke();

p.circle(

p.random(p.width),

p.random(p.height),

p.random(100, 300)

);

}

function drawFlowers() {

pts.forEach(pt => {

p.push();

p.translate(pt.x, pt.y);

p.rotate(p.PI);

let prevX = 0;

let prevY = 0;

for (let i = 0; i < pt.len; i++) {

let x = i * 0.5;

let y = p.sin(i * pt.t) * 30 * p.noise(i * pt.s, pt.t) + p.random(-1, 1);

p.stroke(p.random(palette));

p.strokeWeight(p.map(i, 0, pt.len, 3, 0.5));

p.line(prevX, prevY, x, y);

prevX = x;

prevY = y;

}

ends.push({ x: prevX + pt.x, y: prevY + pt.y });

p.pop();

});

ends.forEach(end => {

p.push();

p.translate(end.x, end.y);

p.rotate(p.PI);

for (let i = 0; i < 6; i++) {

p.rotate(p.PI / 3);

p.stroke(p.random(palette));

p.strokeWeight(1);

p.noFill();

p.beginShape();

for (let a = 0; a < p.PI; a += 0.1) {

let r = p.sin(a) * 20;

let xx = p.cos(a) * r;

let yy = p.sin(a) * r;

p.vertex(xx, yy);

}

p.endShape();

}

p.fill(p.random(palette));

p.noStroke();

p.circle(0, 0, 10);

p.pop();

});

}

};

}

new p5(flowerSketch(100, 'sketch-1'), 'sketch-1');

new p5(flowerSketch(200, 'sketch-2'), 'sketch-2');

new p5(flowerSketch(300, 'sketch-3'), 'sketch-3');

</script>

</body>

</html>

Web

Recomendado

Código HTML Canvas de WebGL para Super Mario 64

Sitio web del bufete de abogados: Tailwind CSS, Servicios legales

Plantilla HTML para sitio web de alquiler de bicicletas

HTML

CSS

JS

Recomendado

Código HTML Canvas de WebGL para Super Mario 64

Sitio web del bufete de abogados: Tailwind CSS, Servicios legales

Plantilla HTML para sitio web de alquiler de bicicletas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS