<div class="this-calls-for-some">
  <div class="confetti"></div>
  <div class="confetti"></div>
  <div class="confetti"></div>
  <div class="confetti"></div>
  <div class="confetti"></div>
  <div class="confetti"></div>
  <div class="confetti"></div>
  <div class="confetti"></div>
  <div class="confetti"></div>
  <div class="confetti"></div>
</div>

<div class="birthday-banner">
  <h1>It is your birthday.</h1>
</div>

<form class="cake-flavor-picker" name="flavorPicker">
  <h3>Pick your cake</h3>
  <fieldset id="cakeFlavors">
    <label for="pick-chocolate"><input type="radio" value="pick-chocolate" id="pick-chocolate" name="cakeFlavors"> Chocolate</label>
    <label for="pick-yellow"><input type="radio" value="pick-yellow" id="pick-yellow" name="cakeFlavors"> Yellow Cake</label>
    <label for="pick-red-velvet"><input type="radio" value="pick-red-velvet" id="pick-red-velvet" name="cakeFlavors"> Red Velvet</label></fieldset>
</form>

<div class="birthday-cake">
  <div class="birthday-cake__plate"></div>
  <div class="birthday-cake__layer birthday-cake__layer--bottom"></div>
  <div class="birthday-cake__layer birthday-cake__layer--middle"></div>
  <div class="birthday-cake__layer birthday-cake__layer--top"></div>
  <div class="birthday-cake__candle"></div>
  <div class="birthday-cake__candle-flame">
    <div class="birthday-cake__candle-inner-flame birthday-cake__candle-inner-flame--red"></div>
    <div class="birthday-cake__candle-inner-flame birthday-cake__candle-inner-flame--orange"></div>
    <div class="birthday-cake__candle-inner-flame birthday-cake__candle-inner-flame--yellow"></div>
  </div>

</div>
/* Resources:
Candle flames:
https://codepen.io/yamanda/pen/RpNMaY

Cake layers:
https://codepen.io/WithAnEs/pen/OVZRvg

Confetti:
https://forum.webflow.com/t/add-falling-confetti-with-css/103687
*/

// Cake flavors
$chocolate: #5f3030;
$yellow-cake: #f1d888;
$red-velvet: #851b0a;

// Flame colors
$flame-red: #be180a;
$flame-orange: #ff5733;
$flame-yellow: #ffc300;

@mixin positionLayer($bottom: 0, $left: 0) {
  border-radius: 50%;
  position: absolute;
  bottom: $bottom;
  left: $left;
}

@mixin flavorCake($cake-flavor) {
  background: $cake-flavor;
  box-shadow: 0 2px 0px lighten($cake-flavor, 5%),
    0 4px 0px darken($cake-flavor, 8.2%), 0 6px 0px darken($cake-flavor, 8.4%),
    0 8px 0px darken($cake-flavor, 8.6%), 0 10px 0px darken($cake-flavor, 8.8%),
    0 12px 0px darken($cake-flavor, 9%), 0 14px 0px darken($cake-flavor, 9.2%),
    0 16px 0px darken($cake-flavor, 9.4%), 0 18px 0px darken($cake-flavor, 9.6%),
    0 20px 0px darken($cake-flavor, 9.8%), 0 22px 0px darken($cake-flavor, 10%),
    0 24px 0px darken($cake-flavor, 10.2%),
    0 26px 0px darken($cake-flavor, 10.4%),
    0 28px 0px darken($cake-flavor, 10.6%),
    0 30px 0px darken($cake-flavor, 10.8%);
}

body {
  background: #333;
  display: grid;
  place-items: center center;
  height: 100vh;
}

.birthday-banner {
  background: #fff;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}

.cake-flavor-picker {
  text-align: center;
  padding: 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  h3 {
    margin: 0 0 20px;
  }
  fieldset {
    border: none;
    padding: 0;
    margin: 0;
  }
  label {
    padding: 0 10px 0 0;
  }
}

.birthday-cake {
  width: 100%;
  max-width: 500px;
  height: 370px;
  position: relative;

  &__plate {
    background: linear-gradient(to top, #939393 0%, #bababa 50%, #ffffff 100%);
    @include positionLayer();
    width: 100%;
    height: 200px;
  }

  &__layer {
    @include flavorCake($chocolate);
    width: calc(100% - 20px);
    height: 200px;
    &--bottom {
      @include positionLayer(50px, 10px);
    }

    &--middle {
      @include positionLayer(80px, 10px);
      z-index: 2;
    }
    &--top {
      @include positionLayer(110px, 10px);
      z-index: 3;
    }
  }
  &--chocolate {
    .birthday-cake__layer {
      @include flavorCake($chocolate);
    }
  }
  &--yellow {
    .birthday-cake__layer {
      @include flavorCake($yellow-cake);
    }
  }
  &--red-velvet {
    .birthday-cake__layer {
      @include flavorCake($red-velvet);
    }
  }
}

.birthday-cake__candle {
  width: 30px;
  height: 100px;
  background: #4233ff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 220px;
  z-index: 4;
  border-radius: 12px;
  &::before {
    content: "";
    background: #756bf6;
    border-radius: 50%;
    position: absolute;
    width: 100%;
    height: 16px;
  }

  &-flame {
    transform-origin: center bottom;
    animation-name: flicker;
    animation-duration: 3ms;
    animation-delay: 200ms;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    z-index: 5;
    position: absolute;
    bottom: 325px;
    left: 50%;
  }

  &-inner-flame {
    position: absolute;
    bottom: 0;
    transform: rotate(-45deg) scale(1.5, 1.5);
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-top-left-radius: 50%;
    &--red {
      background: $flame-red;
      box-shadow: 0px 0px 10px 1px $flame-red;
      width: 20px;
      height: 20px;
      left: calc(50% - 10px);
    }
    &--orange {
      background: $flame-orange;
      box-shadow: 0px 0px 10px 1px $flame-orange;
      width: 16px;
      height: 16px;
      left: calc(50% - 8px);
    }
    &--yellow {
      background: $flame-yellow;
      box-shadow: 0px 0px 10px 1px $flame-yellow;
      width: 12px;
      height: 12px;
      left: calc(50% - 6px);
    }
  }
}

@keyframes flicker {
  0% {
    transform: rotate(-1deg);
  }
  20% {
    transform: rotate(1deg);
  }
  40% {
    transform: rotate(-1deg);
  }
  60% {
    transform: rotate(1deg) scaleY(1.04);
  }
  80% {
    transform: rotate(-2deg) scaleY(0.92);
  }
  100% {
    transform: rotate(1deg);
  }
}

.confetti {
  width: 15px;
  height: 15px;
  background-color: #f2d74e;
  position: absolute;
  left: 50%;
  animation: confetti 5s ease-in-out -2s infinite;
  transform-origin: left top;
}
.confetti:nth-child(1) {
  background-color: #f2d74e;
  left: 10%;
  animation-delay: 0;
}
.confetti:nth-child(2) {
  background-color: #95c3de;
  left: 20%;
  animation-delay: -5s;
}
.confetti:nth-child(3) {
  background-color: #ff9a91;
  left: 30%;
  animation-delay: -3s;
}
.confetti:nth-child(4) {
  background-color: #f2d74e;
  left: 40%;
  animation-delay: -2.5s;
}
.confetti:nth-child(5) {
  background-color: #95c3de;
  left: 50%;
  animation-delay: -4s;
}
.confetti:nth-child(6) {
  background-color: #ff9a91;
  left: 60%;
  animation-delay: -6s;
}
.confetti:nth-child(7) {
  background-color: #f2d74e;
  left: 70%;
  animation-delay: -1.5s;
}
.confetti:nth-child(8) {
  background-color: #95c3de;
  left: 80%;
  animation-delay: -2s;
}
.confetti:nth-child(9) {
  background-color: #ff9a91;
  left: 90%;
  animation-delay: -3.5s;
}
.confetti:nth-child(10) {
  background-color: #f2d74e;
  left: 100%;
  animation-delay: -2.5s;
}

@keyframes confetti {
  0% {
    transform: rotateZ(15deg) rotateY(0deg) translate(0, 0);
  }
  25% {
    transform: rotateZ(5deg) rotateY(360deg) translate(-5vw, 20vh);
  }
  50% {
    transform: rotateZ(15deg) rotateY(720deg) translate(5vw, 60vh);
  }
  75% {
    transform: rotateZ(5deg) rotateY(1080deg) translate(-10vw, 80vh);
  }
  100% {
    transform: rotateZ(15deg) rotateY(1440deg) translate(10vw, 110vh);
  }
}
View Compiled
const radiosBtns = document.flavorPicker.cakeFlavors;
const chocolate = document.querySelector("#pick-chocolate");
const yellow = document.querySelector("#pick-yellow");
const redVelvet = document.querySelector("#pick-red-velvet");
const birthdayCake = document.querySelector(".birthday-cake");

function selectCake() {
  if (chocolate.checked === true) {
    birthdayCake.classList.add("birthday-cake--chocolate");
    birthdayCake.classList.remove(
      "birthday-cake--yellow",
      "birthday-cake--red-velvet"
    );
  } else if (yellow.checked === true) {
    birthdayCake.classList.add("birthday-cake--yellow");
    birthdayCake.classList.remove(
      "birthday-cake--chocolate",
      "birthday-cake--red-velvet"
    );
  } else if (redVelvet.checked === true) {
    birthdayCake.classList.add("birthday-cake--red-velvet");
    birthdayCake.classList.remove(
      "birthday-cake--chocolate",
      "birthday-cake--yellow"
    );
  }
}

document.addEventListener("DOMContentLoaded", function () {
  for (var i = 0; i < radiosBtns.length; i++) {
    radiosBtns[i].addEventListener("change", function () {
      selectCake();
    });
  }

  // select chocolate by default
  chocolate.checked = true;
  // trigger on change event
  if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    chocolate.dispatchEvent(evt);
  } else {
    chocolate.fireEvent("onchange");
  }
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.