live - 60fps 1920 x 1080
<!DOCTYPE html>
<html>
<head>
<title>Fractal Tree</title>
<style>
:root { --bg-color: #060a08; --branch-1: #4ade80; --branch-2: #a3e635; }
* { margin: 0; padding: 0; }
body { height: 100vh; background: var(--bg-color); overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const cv = document.getElementById('c'), ctx = cv.getContext('2d');
const css = getComputedStyle(document.documentElement);
const bg = (css.getPropertyValue('--bg-color') || '#060a08').trim();
function hex(h){h=(h||'').trim().replace('#','');if(h.length===3)h=h.split('').map(c=>c+c).join('');const n=parseInt(h,16);return[(n>>16)&255,(n>>8)&255,n&255];}
const b1 = hex(css.getPropertyValue('--branch-1') || '#4ade80');
const b2 = hex(css.getPropertyValue('--branch-2') || '#a3e635');
let w, h; const DEPTH = 10;
function build() { w = cv.width = innerWidth; h = cv.height = innerHeight; }
addEventListener('resize', build); build();
function branch(x, y, len, ang, depth, t, sway) {
const nx = x + Math.cos(ang) * len, ny = y + Math.sin(ang) * len;
const f = depth / DEPTH;
ctx.strokeStyle = `rgb(${b1[0]+(b2[0]-b1[0])*(1-f)|0},${b1[1]+(b2[1]-b1[1])*(1-f)|0},${b1[2]+(b2[2]-b1[2])*(1-f)|0})`;
ctx.lineWidth = f * 9 + 0.6;
ctx.globalAlpha = 0.35 + f * 0.65;
ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(nx, ny); ctx.stroke();
if (depth <= 1) return;
const wind = Math.sin(t + depth * 0.5) * sway * (1 - f + 0.15);
const spread = 0.42;
branch(nx, ny, len * 0.76, ang - spread + wind, depth - 1, t, sway);
branch(nx, ny, len * 0.76, ang + spread + wind, depth - 1, t, sway);
}
function step(t) {
ctx.fillStyle = bg; ctx.fillRect(0, 0, w, h);
branch(w / 2, h, Math.min(w, h) * 0.19, -Math.PI / 2, DEPTH, t, 0.09);
ctx.globalAlpha = 1;
}
if (matchMedia('(prefers-reduced-motion: reduce)').matches) step(0);
else { let t = 0; (function loop(){ t += 0.02; step(t); requestAnimationFrame(loop); })(); }
</script>
</body>
</html>About this animation
A recursive tree branches into ever-finer twigs and sways in a gentle breeze, its limbs glowing from trunk to tip.
Related
