Flower Field - MeggiTools

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flower Field</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: #87CEEB;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="flowerCanvas"></canvas>
    <script>
        const canvas = document.getElementById('flowerCanvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        function drawPetal(x, y, radius, angle, color) {
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(angle);
            ctx.beginPath();
            ctx.ellipse(0, 0, radius, radius / 2, 0, 0, 2 * Math.PI);
            ctx.fillStyle = color;
            ctx.fill();
            ctx.restore();
        }
        function drawFlower(x, y, radius, petalCount, colors) {
            for (let i = 0; i < petalCount; i++) {
                drawPetal(x, y, radius, (i * 2 * Math.PI) / petalCount, colors[i % colors.length]);
            }
            ctx.beginPath();
            ctx.arc(x, y, radius / 5, 0, 2 * Math.PI);
            ctx.fillStyle = '#FFD700';
            ctx.fill();
        }
        function animateFlowers() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (let i = 0; i < 50; i++) {
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                const radius = 20 + Math.random() * 10;
                const petalCount = 5 + Math.floor(Math.random() * 3);
                const colors = ['#FF6347', '#FF69B4', '#FFD700'];
                drawFlower(x, y, radius, petalCount, colors);
            }
            requestAnimationFrame(animateFlowers);
        }
        animateFlowers();
    </script>
</body>
</html>