Birthday Cake Animation

Project Overview: Birthday Cake Animation

This project is a visually engaging web-based animation of a birthday cake. Its primary purpose is to serve as a digital greeting card, featuring a cake that "assembles" itself layer by layer, followed by a candle dropping into place and a flickering flame appearing at the top. It uses a combination of SVG graphics and CSS styling to create a smooth, celebratory transition.

The project works by layering two different types of animation. First, the cake itself is drawn using SVG (Scalable Vector Graphics). Instead of using JavaScript to move parts around, it utilizes the <animate> tag directly inside the SVG code to morph the shapes of the cake layers from flat lines into 3D-looking tiers. This creates a "filling" effect where the cake appears to grow or be poured into place.

Once the cake layers are finished, CSS animations take over to handle the candle and the fire. The candle is a simple styled div that uses a "drop-in" animation. The flame is composed of several overlapping elements that scale and change color rapidly to simulate the natural flickering of a real fire. All these parts are timed using delays so that the sequence feels like a choreographed performance.

Key Code Snippets

1. SVG Path Morphing
The cake layers are created by animating the d attribute (the path data) of an SVG shape. This snippet shows how a layer transitions between different shapes to look like it is being filled.

<animate id="bizcocho_1" attributeName="d" begin="2s" dur="0.8s" fill="freeze" 
         values="M173.667,21.571...; M173.667,475.571..." />

2. The Flickering Fire Animation
This CSS keyframe creates the flickering effect by changing the background color, the glow (box-shadow), and the size (scale) of the flame elements.

@keyframes fuego {
  0%, 100% {
    background: rgba(254, 248, 97, 0.5);
    box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
    transform: translateY(0) scale(1);
  }
  50% {
    background: rgba(255, 50, 0, 0.1);
    transform: translateY(-20px) scale(0);
  }
}

3. Candle Entry
The candle uses a simple CSS animation called in to move from a hidden position above the cake down to its final resting spot.

.velas {
  /* ... other styles ... */
  animation: in 500ms 6s ease-out forwards;
}

@keyframes in {
  to { transform: translateY(0); }
}