AI CSS Animations

Bakery Deck Oven

A tray of pale dough slides into a hairline deck oven, the lift door drops, the timer hand sweeps once, then the door rises and the loaves come out risen and baked in the accent color.

Also known as: baking animation, isometric oven, hairline animation.

HTML

<div class="hln-bakery-oven" role="img" aria-label="Loaves bake in an oven and come out risen"><svg viewBox="-47 -34.77 100 54.55" aria-hidden="true"><g><polygon points="-38,13 6,35 6,34 -38,12"/><polygon points="42,17 6,35 6,34 42,16"/><polygon points="-2,-6 42,16 6,34 -38,12"/></g><g><polygon points="-1.5,0.75 0,1.5 0,-7.5 -1.5,-8.25"/><polygon points="1.5,0.75 0,1.5 0,-7.5 1.5,-8.25"/><polygon points="0,-9 1.5,-8.25 0,-7.5 -1.5,-8.25"/></g><g><polygon points="25,14 26.5,14.75 26.5,5.75 25,5"/><polygon points="28,14 26.5,14.75 26.5,5.75 28,5"/><polygon points="26.5,4.25 28,5 26.5,5.75 25,5"/></g><g><polygon points="-15,7.5 -13.5,8.25 -13.5,-0.75 -15,-1.5"/><polygon points="-12,7.5 -13.5,8.25 -13.5,-0.75 -12,-1.5"/><polygon points="-13.5,-2.25 -12,-1.5 -13.5,-0.75 -15,-1.5"/></g><g><polygon points="11.5,20.75 13,21.5 13,12.5 11.5,11.75"/><polygon points="14.5,20.75 13,21.5 13,12.5 14.5,11.75"/><polygon points="13,11 14.5,11.75 13,12.5 11.5,11.75"/></g><g><polygon points="-17,-1.5 13,13.5 13,10.5 -17,-4.5"/><polygon points="30,5 13,13.5 13,10.5 30,2"/><polygon points="0,-13 30,2 13,10.5 -17,-4.5"/></g><line x1="-15" y1="-2" x2="11" y2="11" class="hln-bakery-oven-l"/><polygon points="-2,-11 26,3 26,-12 -2,-26"/><line x1="-2" y1="-26" x2="-15" y2="-19.5" class="hln-bakery-oven-l"/><line x1="26" y1="3" x2="13" y2="9.5" class="hln-bakery-oven-l"/><line x1="-2" y1="-11" x2="-15" y2="-4.5" class="hln-bakery-oven-l"/><g class="hln-bakery-oven-tray"><g><polygon points="-6,-2.2 6,3.8 6,3 -6,-3"/><polygon points="12,0.8 6,3.8 6,3 12,0"/><polygon points="0,-6 12,0 6,3 -6,-3"/></g><g class="hln-bakery-oven-loaf"><path d="M-2.76,-3.25 A2.26,3 0 0 1 1.76,-3.25 A2.26,1.13 0 0 1 -2.76,-3.25 Z"/><line x1="-1.2" y1="-6" x2="0.2" y2="-5.3" class="hln-bakery-oven-l"/></g><g class="hln-bakery-oven-loaf"><path d="M0.74,-1.5 A2.26,3 0 0 1 5.26,-1.5 A2.26,1.13 0 0 1 0.74,-1.5 Z"/><line x1="2.3" y1="-4.25" x2="3.7" y2="-3.55" class="hln-bakery-oven-l"/></g><g class="hln-bakery-oven-loaf"><path d="M4.24,0.25 A2.26,3 0 0 1 8.76,0.25 A2.26,1.13 0 0 1 4.24,0.25 Z"/><line x1="5.8" y1="-2.5" x2="7.2" y2="-1.8" class="hln-bakery-oven-l"/></g></g><path fill-rule="evenodd" d="M-16,-5 L14,10 L14,-9 L-16,-24 Z M-15,-4.5 L13,9.5 L13,-5.5 L-15,-19.5 Z"/><polygon points="30,2 14,10 14,-9 30,-17"/><polygon points="0,-32 30,-17 14,-9 -16,-24"/><g class="hln-bakery-oven-door"><polygon points="-15,-4.5 13,9.5 13,-5.5 -15,-19.5"/><polygon points="-12,-7 10,4 10,-4 -12,-15" class="hln-bakery-oven-l"/><line x1="-9" y1="-3.5" x2="7" y2="4.5"/></g><g><polygon points="-17.5,-23.75 13.5,-8.25 13.5,-18.25 -17.5,-33.75"/><polygon points="31,-17 13.5,-8.25 13.5,-18.25 31,-27"/><polygon points="0,-42.5 31,-27 13.5,-18.25 -17.5,-33.75"/></g><line x1="-13" y1="-27.5" x2="-11.5" y2="-26.75" class="hln-bakery-oven-l"/><line x1="-10" y1="-26" x2="-8.5" y2="-25.25" class="hln-bakery-oven-l"/><line x1="-7" y1="-24.5" x2="-5.5" y2="-23.75" class="hln-bakery-oven-l"/><line x1="-4" y1="-23" x2="-2.5" y2="-22.25" class="hln-bakery-oven-l"/><line x1="-1" y1="-21.5" x2="0.5" y2="-20.75" class="hln-bakery-oven-l"/><line x1="2" y1="-20" x2="3.5" y2="-19.25" class="hln-bakery-oven-l"/><line x1="5" y1="-18.5" x2="6.5" y2="-17.75" class="hln-bakery-oven-l"/><line x1="8" y1="-17" x2="9.5" y2="-16.25" class="hln-bakery-oven-l"/><path d="M13.74,-33 L13.74,-28 A2.26,1.13 0 0 0 18.26,-28 L18.26,-33 Z"/><ellipse cx="16" cy="-33" rx="2.26" ry="1.13"/><polygon points="19.4,-2.7 19.47,-3.31 19.66,-3.96 19.97,-4.6 20.38,-5.22 20.87,-5.78 21.42,-6.25 22,-6.6 22.58,-6.82 23.13,-6.91 23.62,-6.84 24.03,-6.64 24.34,-6.3 24.53,-5.85 24.6,-5.3 24.53,-4.69 24.34,-4.04 24.03,-3.4 23.62,-2.78 23.13,-2.22 22.58,-1.75 22,-1.4 21.42,-1.18 20.87,-1.09 20.38,-1.16 19.97,-1.36 19.66,-1.7 19.47,-2.15"/><g transform="matrix(-1 0.5 0 -1 22 -4)"><g class="hln-bakery-oven-hand"><line x1="0" y1="0" x2="0" y2="2"/></g></g><polygon points="24,3 20,5 20,3.5 24,1.5" class="hln-bakery-oven-l"/><polygon points="24,0 20,2 20,0.5 24,-1.5" class="hln-bakery-oven-l"/></svg></div>

CSS

.hln-bakery-oven {
  --c: var(--hln-color, #ff4f2e);
  font-size: var(--hln-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 0.75em;
  background: #f6f5f1;
  overflow: hidden;
  --u: 1px;
}
.hln-bakery-oven svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #ffffff;
  stroke: #1c1d21;
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hln-bakery-oven svg * {
  vector-effect: non-scaling-stroke;
}
.hln-bakery-oven-l {
  stroke: #9a9ca3;
}
.hln-bakery-oven-tray {
  animation: hln-bakery-oven-tray 7s linear infinite;
}
.hln-bakery-oven-door {
  animation: hln-bakery-oven-door 7s linear infinite;
}
.hln-bakery-oven-hand {
  transform-origin: 0 0;
  animation: hln-bakery-oven-hand 7s linear infinite;
}
.hln-bakery-oven-loaf {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: hln-bakery-oven-loaf 7s linear infinite;
}
@keyframes hln-bakery-oven-tray {
  0%, 8% { transform: translate(calc(var(--u) * -8), calc(var(--u) * 4)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  20%, 66% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.3, 0, .25, 1.08); }
  80%, 100% { transform: translate(calc(var(--u) * -8), calc(var(--u) * 4)); }
}
@keyframes hln-bakery-oven-door {
  0%, 20% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -13)); animation-timing-function: cubic-bezier(.5, 0, .3, 1.15); }
  27%, 58% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  65%, 100% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -13)); }
}
@keyframes hln-bakery-oven-hand {
  0%, 27% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  58%, 100% { transform: rotate(360deg); }
}
@keyframes hln-bakery-oven-loaf {
  0% { transform: scale(0.7, 0.55); fill: #fff; opacity: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  6%, 40% { transform: scale(0.7, 0.55); fill: #fff; opacity: 1; animation-timing-function: cubic-bezier(.3, 1.45, .5, 1); }
  50%, 88% { transform: scale(1); fill: var(--c); opacity: 1; animation-timing-function: ease-in; }
  96%, 100% { transform: scale(1); fill: var(--c); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hln-bakery-oven * {
    animation-play-state: paused !important;
    animation-delay: calc(var(--delay, 0s) - 5.8s) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hln-bakery-oven, .hln-bakery-oven *, .hln-bakery-oven::before, .hln-bakery-oven::after, .hln-bakery-oven *::before, .hln-bakery-oven *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

  • Color: set --hln-color on the element or a parent. Currently previewing #3b82f6.
  • Base size: set --hln-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
  • Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
  • Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar hairline animations

Parcel to Doorstep
Sorting Belt Diverter
Stamping Press Line
City Block Night Shift