Animated Donut | Learning Axis

HTML

CSS

body {
      margin: 0;
      background: #fcecc9;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      transform: scale(90%);
    }
    .donut {
      position: relative;
      width: 200px;
      height: 200px;
      background: radial-gradient(circle at center, #c47f27 30%, #a85712 80%);
      border-radius: 50%;
      box-shadow: inset -10px -10px 20px rgba(0, 0, 0, 0.2),
                  inset 10px 10px 15px rgba(255, 255, 255, 0.3);
      animation: spin 12s linear infinite;
    }
    .donut::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
      background: #fcecc9;
      border-radius: 50%;
      z-index: 2;
    }
    .frosting {
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
      height: 100px;
      background: radial-gradient(circle at center, #ff4da6 20%, #ff3385 90%);
      border-top-left-radius: 100px;
      border-top-right-radius: 100px;
      clip-path: ellipse(100px 50px at center);
      z-index: 1;
    }
    .sprinkle {
      position: absolute;
      width: 8px;
      height: 3px;
      border-radius: 10px;
      background: red;
      transform: rotate(45deg);
      animation: sprinkle-fall 4s infinite ease-in-out;
    }
    @keyframes spin {
      0% { transform: rotate(0); }
      100% { transform: rotate(360deg); }
    }
    @keyframes sprinkle-fall {
      0% { transform: translateY(0) rotate(0deg); opacity: 1; }
      100% { transform: translateY(100px) rotate(180deg); opacity: 0; }
    }