JIT
Grid - Untitled
Log in
@megabit
Create a white candle with a single flame animated with realistic movement using only CSS and HTML (in one file). The sparks should also be animated with smooth movement.
DeepSeek V3.2 Exp
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animated Candle</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } 
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        overflow: hidden;
        font-family: Arial, sans-serif;
    }

    .candle-container {
        position: relative;
        width: 80vmin;
        height: 80vmin;
        max-width: 400px;
        max-height: 400px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .candle {
        position: relative;
        width: 15%;
        height: 60%;
        background: linear-gradient(to right, #f8f8f8 0%, #ffffff 30%, #f0f0f0 70%, #e8e8e8 100%);
        border-radius: 8px 8px 4px 4px;
        box-shadow: 
            inset -2px 0 4px rgba(0,0,0,0.1),
            inset 2px 0 4px rgba(255,255,255,0.8),
            0 8px 20px rgba(0,0,0,0.3);
    }

    .candle::before {
        content: '';
        position: absolute;
        top: -5%;
        left: 50%;
        transform: translateX(-50%);
        width: 120%;
        height: 8%;
        background: linear-gradient(to bottom, #ff9500, #ff6b00);
        border-radius: 50% 50% 40% 40%;
        box-shadow: 0 0 20px #ff6b00;
    }

    .wick {
        position: absolute;
        top: -2%;
        left: 50%;
        transform: translateX(-50%);
        width: 2%;
        height: 4%;
        background: #2c2c2c;
        border-radius: 2px 2px 0 0;
    }

    .flame {
        position: absolute;
        top: -15%;
        left: 50%;
        transform: translateX(-50%);
        width: 8%;
        height: 20%;
        background: linear-gradient(to top, 
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 230, 0, 0.8) 30%,
            rgba(255, 150, 0, 0.7) 60%,
            rgba(255, 100, 0, 0.6) 100%);
        border-radius: 50% 50% 20% 20%;
        animation: flicker 0.8s ease-in-out infinite alternate;
        filter: blur(1px);
        box-shadow: 
            0 0 20px rgba(255, 200, 0, 0.8),
            0 0 40px rgba(255, 150, 0, 0.6),
            0 0 60px rgba(255, 100, 0, 0.4);
    }

    .flame::before {
        content: '';
        position: absolute;
        top: -10%;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 30%;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        filter: blur(3px);
        animation: flicker-top 0.6s ease-in-out infinite alternate;
    }

    .sparks {
        position: absolute;
        top: -35%;
        left: 50%;
        transform: translateX(-50%);
        width: 200%;
        height: 100%;
    }

    .spark {
        position: absolute;
        width: 2px;
        height: 2px;
        background: rgba(255, 230, 0, 0.8);
        border-radius: 50%;
        animation: spark-float 3s ease-in infinite;
        opacity: 0;
    }

    .spark:nth-child(1) {
        left: 45%;
        animation-delay: 0s;
    }

    .spark:nth-child(2) {
        left: 52%;
        animation-delay: 0.5s;
    }

    .spark:nth-child(3) {
        left: 48%;
        animation-delay: 1s;
    }

    .spark:nth-child(4) {
        left: 55%;
        animation-delay: 1.5s;
    }

    .spark:nth-child(5) {
        left: 42%;
        animation-delay: 2s;
    }

    .spark:nth-child(6) {
        left: 58%;
        animation-delay: 2.5s;
    }

    @keyframes flicker {
        0%, 100% {
            transform: translateX(-50%) scale(1, 1) rotate(1deg);
        }
        25% {
            transform: translateX(-50%) scale(1.1, 0.9) rotate(-0.5deg);
        }
        50% {
            transform: translateX(-50%) scale(0.9, 1.1) rotate(0.5deg);
        }
        75% {
            transform: translateX(-50%) scale(1.05, 0.95) rotate(-1deg);
        }
    }

    @keyframes flicker-top {
        0%, 100% {
            transform: translateX(-50%) scale(1, 1);
            opacity: 0.8;
        }
        50% {
            transform: translateX(-50%) scale(1.2, 0.8);
            opacity: 1;
        }
    }

    @keyframes spark-float {
        0% {
            transform: translateY(0) translateX(0) scale(0);
            opacity: 0;
        }
        10% {
            opacity: 1;
            transform: translateY(-5px) translateX(2px) scale(1);
        }
        30% {
            transform: translateY(-15px) translateX(-3px) scale(1.2);
        }
        50% {
            transform: translateY(-25px) translateX(4px) scale(1);
        }
        70% {
            transform: translateY(-35px) translateX(-2px) scale(0.8);
            opacity: 0.8;
        }
        100% {
            transform: translateY(-50px) translateX(0) scale(0);
            opacity: 0;
        }
    }

    .glow {
        position: absolute;
        top: -10%;
        left: 50%;
        transform: translateX(-50%);
        width: 150%;
        height: 40%;
        background: radial-gradient(ellipse at center, 
            rgba(255, 200, 0, 0.3) 0%,
            rgba(255, 150, 0, 0.2) 30%,
            rgba(255, 100, 0, 0.1) 60%,
            transparent 80%);
        border-radius: 50%;
        animation: glow-pulse 2s ease-in-out infinite alternate;
        filter: blur(10px);
    }

    @keyframes glow-pulse {
        0% {
            opacity: 0.6;
            transform: translateX(-50%) scale(1);
        }
        100% {
            opacity: 0.8;
            transform: translateX(-50%) scale(1.1);
        }
    }

    @media (max-width: 768px) {
        .candle-container {
            width: 90vmin;
            height: 90vmin;
        }
    }
</style>
</head> <body> <div class="candle-container"> <div class="candle"> <div class="wick"></div> <div class="flame"></div> <div class="glow"></div> <div class="sparks"> <div class="spark"></div> <div class="spark"></div> <div class="spark"></div> <div class="spark"></div> <div class="spark"></div> <div class="spark"></div> </div> </div> </div> </body> </html>*
Updated files
v1