---

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Логотип кофейни MOON BEAN</title>
</head>
<body>

<canvas id="canvas" width="700" height="500"></canvas>

<script>
    const canvas = document.querySelector("canvas");
    const context = canvas.getContext("2d");

    const image = new Image();

    image.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(`
        <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80">
            <ellipse cx="40" cy="40" rx="25" ry="34" fill="#8b5a2b" transform="rotate(25 40 40)"/>
            <path d="M27 63 C38 49 42 31 53 17" stroke="#3e2415" stroke-width="5" fill="none"/>
        </svg>
    `);

    function drawLogo() {
        context.clearRect(0, 0, canvas.width, canvas.height);

        context.fillStyle = "#111827";
        context.fillRect(0, 0, canvas.width, canvas.height);

        context.shadowColor = "rgba(0, 0, 0, 0.6)";
        context.shadowBlur = 25;
        context.shadowOffsetY = 10;

        context.fillStyle = "#f5e6c8";
        context.beginPath();
        context.arc(350, 250, 190, 0, Math.PI * 2);
        context.fill();

        context.shadowColor = "transparent";
        context.shadowBlur = 0;
        context.shadowOffsetY = 0;

        context.globalAlpha = 0.18;
        context.fillStyle = "#c99855";
        context.beginPath();
        context.arc(350, 250, 165, 0, Math.PI * 2);
        context.fill();
        context.globalAlpha = 1;

        context.fillStyle = "#49311d";
        context.beginPath();
        context.roundRect(275, 215, 150, 95, 20);
        context.fill();

        context.strokeStyle = "#49311d";
        context.lineWidth = 15;
        context.beginPath();
        context.arc(430, 255, 42, -Math.PI / 2, Math.PI / 2);
        context.stroke();

        context.strokeStyle = "#7b5230";
        context.lineWidth = 7;
        context.beginPath();
        context.moveTo(255, 325);
        context.quadraticCurveTo(350, 350, 445, 325);
        context.stroke();

        context.strokeStyle = "#8b5a2b";
        context.lineWidth = 6;
        context.lineCap = "round";

        context.beginPath();
        context.moveTo(310, 200);
        context.bezierCurveTo(285, 170, 335, 150, 310, 120);
        context.stroke();

        context.beginPath();
        context.moveTo(350, 200);
        context.bezierCurveTo(325, 165, 375, 145, 350, 110);
        context.stroke();

        context.beginPath();
        context.moveTo(390, 200);
        context.bezierCurveTo(365, 170, 415, 150, 390, 120);
        context.stroke();

        context.globalAlpha = 0.75;
        context.fillStyle = "#d6a45d";
        context.beginPath();
        context.arc(225, 185, 16, 0, Math.PI * 2);
        context.fill();

        context.beginPath();
        context.arc(475, 180, 10, 0, Math.PI * 2);
        context.fill();
        context.globalAlpha = 1;

        context.save();
        context.translate(210, 285);
        context.rotate(-0.5);
        context.fillStyle = "#764c28";
        context.beginPath();
        context.ellipse(0, 0, 15, 27, 0, 0, Math.PI * 2);
        context.fill();

        context.strokeStyle = "#3f2817";
        context.lineWidth = 3;
        context.beginPath();
        context.moveTo(-4, -20);
        context.quadraticCurveTo(5, 0, -4, 20);
        context.stroke();
        context.restore();

        if (image.complete) {
            context.drawImage(image, 445, 285, 55, 55);
        }

        context.shadowColor = "rgba(0, 0, 0, 0.25)";
        context.shadowBlur = 5;

        context.fillStyle = "#2f241b";
        context.font = "bold 36px Arial";
        context.textAlign = "center";
        context.fillText("MOON BEAN", 350, 395);

        context.shadowColor = "transparent";
        context.shadowBlur = 0;

        context.fillStyle = "#795b3a";
        context.font = "18px Arial";
        context.fillText("COFFEE HOUSE", 350, 425);
    }

    image.onload = drawLogo;
    drawLogo();
</script>

</body>
</html>