AI CSS Animations

Stamping Press Line

A blank rides the belt under a C-frame press, the ram drops and rebounds on a spring, and the part leaves stamped in the accent color with an embossed ring. Isometric SVG and CSS.

Also known as: factory animation, isometric factory line, hairline isometric.

HTML

<div class="hln-stamping-press" role="img" aria-label="A press stamps a part on a production line"><svg viewBox="-35 -30.91 150 81.82" aria-hidden="true"><g><polygon points="32,12 46,19 46,-13 32,-20"/><polygon points="56,14 46,19 46,-13 56,-18"/><polygon points="42,-25 56,-18 46,-13 32,-20"/></g><line x1="34" y1="9" x2="44" y2="14" class="hln-stamping-press-l"/><line x1="34" y1="5" x2="44" y2="10" class="hln-stamping-press-l"/><polygon points="54,-3 48,0 48,-4 54,-7" class="hln-stamping-press-l"/><line x1="-2" y1="3" x2="-2" y2="-3"/><line x1="-12" y1="8" x2="-12" y2="2"/><line x1="64" y1="36" x2="64" y2="30"/><line x1="54" y1="41" x2="54" y2="35"/><g><polygon points="-14,1 56,36 56,34 -14,-1"/><polygon points="66,31 56,36 56,34 66,29"/><polygon points="-4,-6 66,29 56,34 -14,-1"/></g><line x1="-1.5" y1="-4.75" x2="-11.5" y2="0.25" class="hln-stamping-press-l"/><line x1="2" y1="-3" x2="-8" y2="2" class="hln-stamping-press-l"/><line x1="5.5" y1="-1.25" x2="-4.5" y2="3.75" class="hln-stamping-press-l"/><line x1="9" y1="0.5" x2="-1" y2="5.5" class="hln-stamping-press-l"/><line x1="12.5" y1="2.25" x2="2.5" y2="7.25" class="hln-stamping-press-l"/><line x1="16" y1="4" x2="6" y2="9" class="hln-stamping-press-l"/><line x1="19.5" y1="5.75" x2="9.5" y2="10.75" class="hln-stamping-press-l"/><line x1="23" y1="7.5" x2="13" y2="12.5" class="hln-stamping-press-l"/><line x1="26.5" y1="9.25" x2="16.5" y2="14.25" class="hln-stamping-press-l"/><line x1="30" y1="11" x2="20" y2="16" class="hln-stamping-press-l"/><line x1="33.5" y1="12.75" x2="23.5" y2="17.75" class="hln-stamping-press-l"/><line x1="37" y1="14.5" x2="27" y2="19.5" class="hln-stamping-press-l"/><line x1="40.5" y1="16.25" x2="30.5" y2="21.25" class="hln-stamping-press-l"/><line x1="44" y1="18" x2="34" y2="23" class="hln-stamping-press-l"/><line x1="47.5" y1="19.75" x2="37.5" y2="24.75" class="hln-stamping-press-l"/><line x1="51" y1="21.5" x2="41" y2="26.5" class="hln-stamping-press-l"/><line x1="54.5" y1="23.25" x2="44.5" y2="28.25" class="hln-stamping-press-l"/><line x1="58" y1="25" x2="48" y2="30" class="hln-stamping-press-l"/><line x1="61.5" y1="26.75" x2="51.5" y2="31.75" class="hln-stamping-press-l"/><line x1="65" y1="28.5" x2="55" y2="33.5" class="hln-stamping-press-l"/><g class="hln-stamping-press-plate"><g class="hln-stamping-press-on"><g class="hln-stamping-press-p"><polygon points="-13,-1.5 -4,3 -4,1.5 -13,-3"/><polygon points="4,-1 -4,3 -4,1.5 4,-2.5"/><polygon points="-5,-7 4,-2.5 -4,1.5 -13,-3"/></g><ellipse cx="-4.5" cy="-2.75" rx="3.25" ry="1.63" class="hln-stamping-press-ring" fill="none"/></g></g><g class="hln-stamping-press-ram"><g><polygon points="24.5,0.75 26,1.5 26,-10.5 24.5,-11.25"/><polygon points="27.5,0.75 26,1.5 26,-10.5 27.5,-11.25"/><polygon points="26,-12 27.5,-11.25 26,-10.5 24.5,-11.25"/></g><g><polygon points="24.5,5.25 26,6 26,-6 24.5,-6.75"/><polygon points="27.5,5.25 26,6 26,-6 27.5,-6.75"/><polygon points="26,-7.5 27.5,-6.75 26,-6 24.5,-6.75"/></g></g><g><polygon points="14,-5 28,2 28,-4 14,-11"/><polygon points="46,-7 28,2 28,-4 46,-13"/><polygon points="32,-20 46,-13 28,-4 14,-11"/></g><line x1="14" y1="-8" x2="28" y2="-1" class="hln-stamping-press-l"/><g class="hln-stamping-press-ram"><g><polygon points="16.5,7.75 26.5,12.75 26.5,7.75 16.5,2.75"/><polygon points="35.5,8.25 26.5,12.75 26.5,7.75 35.5,3.25"/><polygon points="25.5,-1.75 35.5,3.25 26.5,7.75 16.5,2.75"/></g><g><polygon points="18.5,8.75 26.5,12.75 26.5,11.75 18.5,7.75"/><polygon points="33.5,9.25 26.5,12.75 26.5,11.75 33.5,8.25"/><polygon points="25.5,4.25 33.5,8.25 26.5,11.75 18.5,7.75"/></g></g><polygon points="69,37.5 81,43.5 69,49.5 57,43.5"/><polygon points="69,37.5 81,43.5 81,38.5 69,32.5"/><polygon points="69,37.5 57,43.5 57,38.5 69,32.5"/><g><polygon points="60.5,43.75 69.5,48.25 69.5,47.05 60.5,42.55"/><polygon points="77.5,44.25 69.5,48.25 69.5,47.05 77.5,43.05"/><polygon points="68.5,38.55 77.5,43.05 69.5,47.05 60.5,42.55"/></g><ellipse cx="69" cy="42.8" rx="3.25" ry="1.63" class="hln-stamping-press-l"/><g><polygon points="61.5,42.55 70.5,47.05 70.5,45.85 61.5,41.35"/><polygon points="78.5,43.05 70.5,47.05 70.5,45.85 78.5,41.85"/><polygon points="69.5,37.35 78.5,41.85 70.5,45.85 61.5,41.35"/></g><ellipse cx="70" cy="41.6" rx="3.25" ry="1.63" class="hln-stamping-press-l"/><g class="hln-stamping-press-plate"><g class="hln-stamping-press-off"><g class="hln-stamping-press-p"><polygon points="-13,-1.5 -4,3 -4,1.5 -13,-3"/><polygon points="4,-1 -4,3 -4,1.5 4,-2.5"/><polygon points="-5,-7 4,-2.5 -4,1.5 -13,-3"/></g><ellipse cx="-4.5" cy="-2.75" rx="3.25" ry="1.63" class="hln-stamping-press-ring" fill="none"/></g></g><polygon points="57,43.5 69,49.5 69,44.5 57,38.5"/><polygon points="81,43.5 69,49.5 69,44.5 81,38.5"/></svg></div>

CSS

.hln-stamping-press {
  --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-stamping-press svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #ffffff;
  stroke: #1c1d21;
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hln-stamping-press svg * {
  vector-effect: non-scaling-stroke;
}
.hln-stamping-press-l {
  stroke: #9a9ca3;
}
.hln-stamping-press-ram {
  animation: hln-stamping-press-ram 5s linear infinite;
}
.hln-stamping-press-plate {
  animation: hln-stamping-press-plate 5s linear infinite;
}
.hln-stamping-press-p {
  animation: hln-stamping-press-p 5s linear infinite;
}
.hln-stamping-press-on {
  animation: hln-stamping-press-on 5s linear infinite;
}
.hln-stamping-press-off {
  animation: hln-stamping-press-off 5s linear infinite;
}
.hln-stamping-press-ring {
  animation: hln-stamping-press-ring 5s linear infinite;
}
@keyframes hln-stamping-press-plate {
  0% { transform: translate(calc(var(--u) * -4), calc(var(--u) * -2)); animation-timing-function: cubic-bezier(.3, 0, .3, 1); }
  6% { transform: translate(calc(var(--u) * 2), calc(var(--u) * 1)); animation-timing-function: cubic-bezier(.4, 0, .2, 1.04); }
  32%, 52% { transform: translate(calc(var(--u) * 30.5), calc(var(--u) * 15.25)); animation-timing-function: cubic-bezier(.5, 0, .7, .6); }
  74% { transform: translate(calc(var(--u) * 66), calc(var(--u) * 33)); animation-timing-function: cubic-bezier(.4, 0, .9, .5); }
  79% { transform: translate(calc(var(--u) * 74), calc(var(--u) * 42.6)); animation-timing-function: cubic-bezier(.3, 1.45, .5, 1); }
  84%, 100% { transform: translate(calc(var(--u) * 74), calc(var(--u) * 42.6)); }
}
@keyframes hln-stamping-press-on {
  0% { opacity: 0; }
  6%, 61.9% { opacity: 1; }
  62%, 100% { opacity: 0; }
}
@keyframes hln-stamping-press-off {
  0%, 61.9% { opacity: 0; }
  62%, 90% { opacity: 1; }
  97%, 100% { opacity: 0; }
}
@keyframes hln-stamping-press-p {
  0%, 40% { fill: #fff; }
  41%, 100% { fill: var(--c); }
}
@keyframes hln-stamping-press-ring {
  0%, 40% { opacity: 0; }
  41%, 100% { opacity: 1; }
}
@keyframes hln-stamping-press-ram {
  0%, 35% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.6, 0, .95, .5); }
  40% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 4.5)); }
  42% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 4.5)); animation-timing-function: cubic-bezier(.3, 1.45, .5, 1); }
  52%, 100% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .hln-stamping-press * {
    animation-play-state: paused !important;
    animation-delay: calc(var(--delay, 0s) - 2.4s) !important;
  }
}

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

3D Printer Laying Layers
Espresso Machine Pour
Robot Arm Pick and Place
Parcel to Doorstep