Flores Amarillas – Animated Yellow Flowers (Sunflowers) HTML Code

61 0 Animations CodeExpert Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Flores Amarillas – Animated Yellow Flowers (Sunflowers) HTML Code

Recommended

13 June 2025

A Code by Metehan

21 June 2025

HTML Light Effects Container with CSS

12 May 2026

Five Nights Game HTML: Office, Cameras, Jumpscare

HTML

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  background: radial-gradient(ellipse at 50% 110%, #2b1f05 0%, #0d0a1f 55%, #05040d 100%);
  font-family: "Georgia", "Times New Roman", serif;
  color: #ffe9a3;
}
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.msg {
  position: fixed; top: 9vh; width: 100%; text-align: center; pointer-events: none;
  opacity: 0; animation: show 2s 3.2s forwards;
}
h1 { font-size: clamp(1.8rem, 5vw, 3.4rem); font-style: italic; text-shadow: 0 0 22px rgba(255, 210, 60, .6); }
p { margin-top: 10px; opacity: .7; font-size: clamp(.9rem, 2.2vw, 1.1rem); }
@keyframes show { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#replay {
  position: fixed; bottom: 18px; right: 18px; padding: 10px 16px; border-radius: 99px;
  border: 1px solid rgba(255, 220, 110, .5); background: rgba(255, 220, 110, .1); color: #ffe9a3;
  font: inherit; cursor: pointer;
}

JS

// Flores Amarillas — animated yellow flower bouquet (canvas)
// Change the text: ?para=Ana  →  "Flores amarillas para Ana"
var cv = document.getElementById('garden'), ctx = cv.getContext('2d');
var W, H, flowers = [], fireflies = [], t = 0;
var para = new URLSearchParams(location.search).get('para');
if (para) document.getElementById('title').textContent = 'Flores amarillas para ' + para + ' 🌻';

function resize() {
  var d = window.devicePixelRatio || 1;
  W = innerWidth; H = innerHeight; cv.width = W * d; cv.height = H * d; ctx.setTransform(d, 0, 0, d, 0, 0);
}
addEventListener('resize', resize); resize();

function Flower(x, h, delay, size, sway) {
  this.x = x; this.h = h; this.delay = delay; this.size = size; this.sway = sway;
  this.grow = 0; this.bloom = 0; this.petals = 12 + (Math.random() * 6 | 0);
  this.leaf = 0.35 + Math.random() * 0.3; this.side = Math.random() < .5 ? -1 : 1;
}
Flower.prototype.draw = function () {
  if (t < this.delay) return;
  this.grow = Math.min(1, this.grow + 0.012);
  if (this.grow >= 1) this.bloom = Math.min(1, this.bloom + 0.018);
  var baseY = H + 10, len = this.h * easeOut(this.grow);
  var wind = Math.sin(t * 0.02 + this.x * 0.01) * this.sway;
  var tipX = this.x + wind * len / 100, tipY = baseY - len;
  // stem
  ctx.strokeStyle = '#3f8f2f'; ctx.lineWidth = Math.max(2, this.size / 9); ctx.lineCap = 'round';
  ctx.beginPath(); ctx.moveTo(this.x, baseY);
  ctx.quadraticCurveTo(this.x + wind * 0.3, baseY - len / 2, tipX, tipY); ctx.stroke();
  // leaf
  if (this.grow > this.leaf) {
    var ly = baseY - len * this.leaf, lx = this.x + wind * 0.3 * this.leaf, ls = this.size * 0.9 * Math.min(1, (this.grow - this.leaf) * 4);
    ctx.fillStyle = '#4fae3a';
    ctx.beginPath(); ctx.ellipse(lx + this.side * ls * 0.6, ly, ls * 0.7, ls * 0.25, this.side * -0.5, 0, Math.PI * 2); ctx.fill();
  }
  if (this.bloom <= 0) return;
  var b = easeOutBack(this.bloom), r = this.size * b;
  ctx.save(); ctx.translate(tipX, tipY); ctx.rotate(wind * 0.004);
  // petals (two layers)
  for (var layer = 0; layer < 2; layer++) {
    for (var i = 0; i < this.petals; i++) {
      var a = i / this.petals * Math.PI * 2 + layer * Math.PI / this.petals + t * 0.002;
      ctx.save(); ctx.rotate(a);
      var g = ctx.createLinearGradient(0, 0, r * 1.25, 0);
      g.addColorStop(0, layer ? '#ffb300' : '#ffd21f'); g.addColorStop(1, layer ? '#ffe36b' : '#fff1a8');
      ctx.fillStyle = g;
      ctx.beginPath(); ctx.ellipse(r * 0.75, 0, r * (layer ? 0.55 : 0.7), r * 0.2, 0, 0, Math.PI * 2); ctx.fill();
      ctx.restore();
    }
  }
  // center with seeds
  ctx.fillStyle = '#5a3307'; ctx.beginPath(); ctx.arc(0, 0, r * 0.42, 0, Math.PI * 2); ctx.fill();
  ctx.fillStyle = '#8a5212';
  for (var s = 0; s < 40; s++) {
    var ang = s * 2.39996, rad = Math.sqrt(s / 40) * r * 0.38;
    ctx.beginPath(); ctx.arc(Math.cos(ang) * rad, Math.sin(ang) * rad, r * 0.03 + 0.4, 0, Math.PI * 2); ctx.fill();
  }
  ctx.restore();
  // glow
  ctx.globalCompositeOperation = 'lighter';
  var gl = ctx.createRadialGradient(tipX, tipY, 0, tipX, tipY, r * 2.2);
  gl.addColorStop(0, 'rgba(255,200,40,' + 0.18 * this.bloom + ')'); gl.addColorStop(1, 'rgba(255,200,40,0)');
  ctx.fillStyle = gl; ctx.fillRect(tipX - r * 2.2, tipY - r * 2.2, r * 4.4, r * 4.4);
  ctx.globalCompositeOperation = 'source-over';
};
function easeOut(x) { return 1 - Math.pow(1 - x, 3); }
function easeOutBack(x) { var c = 1.7; return 1 + (c + 1) * Math.pow(x - 1, 3) + c * Math.pow(x - 1, 2); }

function bouquet() {
  flowers = [];
  var n = Math.max(9, Math.min(17, Math.round(W / 70)));
  for (var i = 0; i < n; i++) {
    var k = (i / (n - 1)) * 2 - 1; // -1..1
    var x = W / 2 + k * Math.min(W * 0.42, 420) + (Math.random() - .5) * 30;
    var h = H * (0.62 - Math.abs(k) * 0.25) + Math.random() * 40;
    flowers.push(new Flower(x, h, Math.abs(k) * 60 + Math.random() * 40, 22 + Math.random() * 14 + (1 - Math.abs(k)) * 12, 14 + Math.random() * 10));
  }
  flowers.sort(function (a, b) { return b.h - a.h; });
  fireflies = [];
  for (var j = 0; j < 40; j++) fireflies.push({ x: Math.random() * W, y: Math.random() * H, p: Math.random() * 6 });
  t = 0;
}

cv.addEventListener('pointerdown', function (e) {
  var f = new Flower(e.clientX, H - e.clientY, t, 18 + Math.random() * 16, 18);
  flowers.push(f);
});
document.getElementById('replay').onclick = bouquet;

function loop() {
  t++;
  ctx.clearRect(0, 0, W, H);
  fireflies.forEach(function (f) {
    f.x += Math.sin(t * 0.01 + f.p) * 0.4; f.y += Math.cos(t * 0.013 + f.p) * 0.3;
    var a = (Math.sin(t * 0.05 + f.p * 3) + 1) / 2;
    ctx.fillStyle = 'rgba(255,230,120,' + a * 0.8 + ')';
    ctx.beginPath(); ctx.arc(f.x, f.y, 1.8, 0, Math.PI * 2); ctx.fill();
  });
  flowers.forEach(function (f) { f.draw(); });
  requestAnimationFrame(loop);
}
bouquet(); loop();

Comments 0

…