AI CSS Animations

Greenhouse Bloom

Water drips from the ridge pipe of a see-through hairline greenhouse, three seedlings grow and leaf out on springs, and the middle one opens an accent flower before the bed resets.

Also known as: plant growing animation, isometric greenhouse, hairline animation.

HTML

<div class="hln-greenhouse" role="img" aria-label="Seedlings grow inside a greenhouse and one flowers"><svg viewBox="-45 -23 110 60" aria-hidden="true"><g><polygon points="-34,12 20,39 20,37 -34,10"/><polygon points="54,22 20,39 20,37 54,20"/><polygon points="0,-7 54,20 20,37 -34,10"/></g><g><polygon points="-24,10 20,32 20,30.5 -24,8.5"/><polygon points="44,20 20,32 20,30.5 44,18.5"/><polygon points="0,-3.5 44,18.5 20,30.5 -24,8.5"/></g><polyline points="0,-3.5 0,-13 44,9 44,18.5" fill="none"/><polyline points="-24,8.5 -24,-1 -12,-16 0,-13" fill="none"/><line x1="-12" y1="-16" x2="32" y2="6"/><line x1="7.33" y1="0.17" x2="7.33" y2="-9.34" class="hln-greenhouse-l"/><line x1="7.33" y1="-9.34" x2="-4.67" y2="-12.33" class="hln-greenhouse-l"/><line x1="14.66" y1="3.83" x2="14.66" y2="-5.67" class="hln-greenhouse-l"/><line x1="14.66" y1="-5.67" x2="2.66" y2="-8.67" class="hln-greenhouse-l"/><line x1="21.99" y1="7.5" x2="21.99" y2="-2" class="hln-greenhouse-l"/><line x1="21.99" y1="-2" x2="9.99" y2="-5" class="hln-greenhouse-l"/><line x1="29.32" y1="11.16" x2="29.32" y2="1.66" class="hln-greenhouse-l"/><line x1="29.32" y1="1.66" x2="17.32" y2="-1.34" class="hln-greenhouse-l"/><line x1="36.65" y1="14.83" x2="36.65" y2="5.32" class="hln-greenhouse-l"/><line x1="36.65" y1="5.32" x2="24.65" y2="2.32" class="hln-greenhouse-l"/><line x1="-10" y1="-13" x2="30" y2="7" class="hln-greenhouse-l"/><g class="hln-greenhouse-drop" style="--delay: 0s"><line x1="-2" y1="-7.5" x2="-2" y2="-5.5" class="hln-greenhouse-l"/></g><g class="hln-greenhouse-drop" style="--delay: -0.3s"><line x1="10" y1="-1.5" x2="10" y2="0.5" class="hln-greenhouse-l"/></g><g class="hln-greenhouse-drop" style="--delay: -0.15s"><line x1="22" y1="4.5" x2="22" y2="6.5" class="hln-greenhouse-l"/></g><g><polygon points="-12,6.5 24,24.5 24,21.5 -12,3.5"/><polygon points="32,20.5 24,24.5 24,21.5 32,17.5"/><polygon points="-4,-0.5 32,17.5 24,21.5 -12,3.5"/></g><g class="hln-greenhouse-grow" style="--delay: 0s"><line x1="-2" y1="4.5" x2="-2" y2="-7.5"/><path class="hln-greenhouse-leaf" style="--delay: -0.05s" d="M-2,0.5 Q-4.2,-3.1 -7,-2 Q-5,1.1 -2,0.5 Z"/><path class="hln-greenhouse-leaf" style="--delay: -0.1s" d="M-2,-2 Q0.2,-5.6 3,-4.5 Q1,-1.4 -2,-2 Z"/><path class="hln-greenhouse-leaf" style="--delay: -0.15s" d="M-2,-4.5 Q-4.2,-8.1 -7,-7 Q-5,-3.9 -2,-4.5 Z"/></g><g class="hln-greenhouse-bud" style="--delay: 0s"><circle cx="-2" cy="-8.5" r="1.3"/></g><g class="hln-greenhouse-grow" style="--delay: -0.25s"><line x1="10" y1="10.5" x2="10" y2="-4.5"/><path class="hln-greenhouse-leaf" style="--delay: -0.3s" d="M10,6.5 Q7.8,2.9 5,4 Q7,7.1 10,6.5 Z"/><path class="hln-greenhouse-leaf" style="--delay: -0.35s" d="M10,4 Q12.2,0.4 15,1.5 Q13,4.6 10,4 Z"/><path class="hln-greenhouse-leaf" style="--delay: -0.4s" d="M10,1.5 Q7.8,-2.1 5,-1 Q7,2.1 10,1.5 Z"/></g><g class="hln-greenhouse-bloom"><g class="hln-greenhouse-a"><circle cx="10" cy="-6.4" r="1.7"/><circle cx="11.81" cy="-5.09" r="1.7"/><circle cx="11.12" cy="-2.96" r="1.7"/><circle cx="8.88" cy="-2.96" r="1.7"/><circle cx="8.19" cy="-5.09" r="1.7"/></g><circle cx="10" cy="-4.5" r="1"/></g><g class="hln-greenhouse-grow" style="--delay: -0.5s"><line x1="22" y1="16.5" x2="22" y2="4.5"/><path class="hln-greenhouse-leaf" style="--delay: -0.55s" d="M22,12.5 Q19.8,8.9 17,10 Q19,13.1 22,12.5 Z"/><path class="hln-greenhouse-leaf" style="--delay: -0.6s" d="M22,10 Q24.2,6.4 27,7.5 Q25,10.6 22,10 Z"/><path class="hln-greenhouse-leaf" style="--delay: -0.65s" d="M22,7.5 Q19.8,3.9 17,5 Q19,8.1 22,7.5 Z"/></g><g class="hln-greenhouse-bud" style="--delay: -0.5s"><circle cx="22" cy="3.5" r="1.3"/></g><polyline points="-24,-1 20,21 20,30.5" fill="none"/><line x1="-24" y1="8.5" x2="-24" y2="-1"/><polyline points="44,9 32,6 20,21" fill="none"/><line x1="44" y1="18.5" x2="44" y2="9"/><polyline points="-24,-1 -12,-16" fill="none"/><line x1="-16.67" y1="12.17" x2="-16.67" y2="2.66" class="hln-greenhouse-l"/><line x1="-16.67" y1="2.66" x2="-4.67" y2="-12.33" class="hln-greenhouse-l"/><line x1="-9.34" y1="15.83" x2="-9.34" y2="6.33" class="hln-greenhouse-l"/><line x1="-9.34" y1="6.33" x2="2.66" y2="-8.67" class="hln-greenhouse-l"/><line x1="-2.01" y1="19.5" x2="-2.01" y2="10" class="hln-greenhouse-l"/><line x1="-2.01" y1="10" x2="9.99" y2="-5" class="hln-greenhouse-l"/><line x1="5.32" y1="23.16" x2="5.32" y2="13.66" class="hln-greenhouse-l"/><line x1="5.32" y1="13.66" x2="17.32" y2="-1.34" class="hln-greenhouse-l"/><line x1="12.65" y1="26.83" x2="12.65" y2="17.33" class="hln-greenhouse-l"/><line x1="12.65" y1="17.33" x2="24.65" y2="2.32" class="hln-greenhouse-l"/><line x1="32" y1="24.5" x2="32" y2="6" class="hln-greenhouse-l"/><polygon points="35,23 29,26 29,18.5 35,15.5" fill="none"/></svg></div>

CSS

.hln-greenhouse {
  --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-greenhouse svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #ffffff;
  stroke: #1c1d21;
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hln-greenhouse svg * {
  vector-effect: non-scaling-stroke;
}
.hln-greenhouse-l {
  stroke: #9a9ca3;
}
.hln-greenhouse-a {
  fill: var(--c);
}
.hln-greenhouse-drop {
  animation: hln-greenhouse-drop 8s linear infinite;
  animation-delay: var(--delay);
}
.hln-greenhouse-grow,
.hln-greenhouse-leaf,
.hln-greenhouse-bud,
.hln-greenhouse-bloom {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.hln-greenhouse-grow {
  animation: hln-greenhouse-grow 8s linear infinite;
  animation-delay: var(--delay);
}
.hln-greenhouse-leaf {
  transform-origin: 0 100%;
  animation: hln-greenhouse-leaf 8s linear infinite;
  animation-delay: var(--delay);
}
.hln-greenhouse-leaf:nth-of-type(odd) {
  transform-origin: 100% 100%;
}
.hln-greenhouse-bud {
  transform-origin: 50% 50%;
  animation: hln-greenhouse-bud 8s linear infinite;
  animation-delay: var(--delay);
}
.hln-greenhouse-bloom {
  transform-origin: 50% 50%;
  animation: hln-greenhouse-bloom 8s linear infinite;
}
@keyframes hln-greenhouse-drop {
  0% { opacity: 0; transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: ease-in; }
  3% { opacity: 1; transform: translate(calc(var(--u) * 0), calc(var(--u) * 2)); animation-timing-function: ease-in; }
  10% { opacity: 0; transform: translate(calc(var(--u) * 0), calc(var(--u) * 10)); }
  10.1%, 12% { opacity: 0; transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: ease-in; }
  15% { opacity: 1; transform: translate(calc(var(--u) * 0), calc(var(--u) * 2)); animation-timing-function: ease-in; }
  22%, 100% { opacity: 0; transform: translate(calc(var(--u) * 0), calc(var(--u) * 10)); }
}
@keyframes hln-greenhouse-grow {
  0%, 16% { transform: scaleY(0); opacity: 1; animation-timing-function: cubic-bezier(.3, 1.25, .5, 1); }
  34%, 86% { transform: scaleY(1); opacity: 1; animation-timing-function: ease-in; }
  94% { transform: scaleY(0.6); opacity: 0; }
  95%, 100% { transform: scaleY(0); opacity: 1; }
}
@keyframes hln-greenhouse-leaf {
  0%, 28% { transform: scale(0); animation-timing-function: cubic-bezier(.3, 1.45, .5, 1); }
  38%, 86% { transform: scale(1); animation-timing-function: ease-in; }
  94%, 100% { transform: scale(0); }
}
@keyframes hln-greenhouse-bud {
  0%, 34% { transform: scale(0); opacity: 1; animation-timing-function: cubic-bezier(.3, 1.45, .5, 1); }
  42%, 86% { transform: scale(1); opacity: 1; animation-timing-function: ease-in; }
  93%, 100% { transform: scale(0); opacity: 0; }
}
@keyframes hln-greenhouse-bloom {
  0%, 42% { transform: scale(0) rotate(-40deg); opacity: 1; animation-timing-function: cubic-bezier(.3, 1.6, .5, 1); }
  52%, 86% { transform: scale(1) rotate(0deg); opacity: 1; animation-timing-function: ease-in; }
  93%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hln-greenhouse * {
    animation-play-state: paused !important;
    animation-delay: calc(var(--delay, 0s) - 5.5s) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hln-greenhouse, .hln-greenhouse *, .hln-greenhouse::before, .hln-greenhouse::after, .hln-greenhouse *::before, .hln-greenhouse *::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