Animated Happy Birthday

This project creates a celebratory birthday cake animation using SVG and CSS. The cake is drawn entirely with SVG paths and animated step by step to look like it is being assembled layer by layer. A candle appears on top, followed by a flickering flame animation that adds life to the scene. The dark background helps the cake and flame stand out visually. Overall, the project demonstrates how rich animations can be achieved without JavaScript by combining SVG animations and CSS keyframes.

HTML

<div class="candle">
    <div class="fire"></div>
    <div class="fire"></div>
    <div class="fire"></div>
    <div class="fire"></div>
    <div class="fire"></div>
</div>

The HTML file defines the structure of the animated birthday scene. The main element is an SVG that represents the cake, where each layer is drawn using complex <path> elements. SVG <animate> tags are embedded directly inside these paths to morph shapes over time, creating the illusion of the cake being built vertically.

A candle element is placed above the cake using regular HTML divs, separating structure from decoration. Multiple .fire divs are stacked to simulate a realistic flame effect. The “Happy Birthday!” text is displayed below the cake to complete the greeting. No canvas or external libraries are used, keeping the markup self-contained. The HTML relies heavily on declarative animation rather than scripting. This makes the structure expressive, visual, and easy to preview instantly in a browser.

CSS

.candle {
  background: tan;
  border-radius: 10px;
  position: absolute;
  top: 228px;
  left: 50%;
  margin-left: -2.4px;
  margin-top: -8.33333333px;
  width: 5px;
  height: 35px;
  transform: translateY(-300px);
  backface-visibility: hidden;
  animation: in 500ms 6s ease-out forwards;
}

The CSS is responsible for the candle, flame, and overall visual mood of the scene. The body is styled with a black background to create contrast and a festive nighttime feel. The candle is animated using a vertical translateY animation so it appears to rise into place smoothly. Each flame layer uses different animation durations, creating a natural flickering effect.

Glows and shadows are applied to simulate heat and light from the fire. Keyframe animations control color changes, scaling, and movement of the flames. Typography styling gives the birthday text a soft, elegant appearance. CSS positioning ensures the cake and candle align correctly. Overall, the CSS adds realism and warmth to an otherwise static SVG.

Download Code