AI CSS Animations

3D Printer Laying Layers

An isometric hairline 3D printer: the print head sweeps across, a new layer appears behind it, and the gantry steps up one layer height at a time. The nozzle tip is the one accent.

Also known as: hairline skill, isometric 3d printer animation, 3d printing css animation.

HTML

<div class="hln-printer-layers" role="img" aria-label="A 3D printer building an object layer by layer">
  <svg viewBox="-110 -60 220 120" aria-hidden="true">
    <g transform="translate(-3.9 -.2) scale(.78)">
      <g><polygon points="-44.24,17 -44.16,16.59 -43.92,16.19 -43.53,15.82 -43,15.5 -3,-4.5 -2.36,-4.76 -1.62,-4.96 -0.83,-5.08 0,-5.12 0.83,-5.08 1.62,-4.96 2.36,-4.76 3,-4.5 53,20.5 53.53,20.82 53.92,21.19 54.16,21.59 54.24,22 54.24,28 54.16,28.41 53.92,28.81 53.53,29.18 53,29.5 13,49.5 12.36,49.76 11.62,49.96 10.83,50.08 10,50.12 9.17,50.08 8.38,49.96 7.64,49.76 7,49.5 -43,24.5 -43.53,24.18 -43.92,23.81 -44.16,23.41 -44.24,23"/><polygon points="53,20.5 53.53,20.82 53.92,21.19 54.16,21.59 54.24,22 54.16,22.41 53.92,22.81 53.53,23.18 53,23.5 13,43.5 12.36,43.76 11.62,43.96 10.83,44.08 10,44.12 9.17,44.08 8.38,43.96 7.64,43.76 7,43.5 -43,18.5 -43.53,18.18 -43.92,17.81 -44.16,17.41 -44.24,17 -44.16,16.59 -43.92,16.19 -43.53,15.82 -43,15.5 -3,-4.5 -2.36,-4.76 -1.62,-4.96 -0.83,-5.08 0,-5.12 0.83,-5.08 1.62,-4.96 2.36,-4.76 3,-4.5"/></g>
      <g><polygon points="-29.12,17.5 -29.08,17.29 -28.96,17.09 -28.76,16.91 -28.5,16.75 0.5,2.25 0.82,2.12 1.19,2.02 1.59,1.96 2,1.94 2.41,1.96 2.81,2.02 3.18,2.12 3.5,2.25 36.5,18.75 36.76,18.91 36.96,19.09 37.08,19.29 37.12,19.5 37.12,21 37.08,21.21 36.96,21.41 36.76,21.59 36.5,21.75 7.5,36.25 7.18,36.38 6.81,36.48 6.41,36.54 6,36.56 5.59,36.54 5.19,36.48 4.82,36.38 4.5,36.25 -28.5,19.75 -28.76,19.59 -28.96,19.41 -29.08,19.21 -29.12,19"/><polygon points="36.5,18.75 36.76,18.91 36.96,19.09 37.08,19.29 37.12,19.5 37.08,19.71 36.96,19.91 36.76,20.09 36.5,20.25 7.5,34.75 7.18,34.88 6.81,34.98 6.41,35.04 6,35.06 5.59,35.04 5.19,34.98 4.82,34.88 4.5,34.75 -28.5,18.25 -28.76,18.09 -28.96,17.91 -29.08,17.71 -29.12,17.5 -29.08,17.29 -28.96,17.09 -28.76,16.91 -28.5,16.75 0.5,2.25 0.82,2.12 1.19,2.02 1.59,1.96 2,1.94 2.41,1.96 2.81,2.02 3.18,2.12 3.5,2.25"/></g>
      <line class="hln-printer-layers-l" x1="4" y1="4.5" x2="-24" y2="18.5"/>
      <line class="hln-printer-layers-l" x1="11" y1="8" x2="-17" y2="22"/>
      <line class="hln-printer-layers-l" x1="18" y1="11.5" x2="-10" y2="25.5"/>
      <line class="hln-printer-layers-l" x1="25" y1="15" x2="-3" y2="29"/>
      <line class="hln-printer-layers-l" x1="32" y1="18.5" x2="4" y2="32.5"/>
      <g><polygon points="-23,7.5 -19,9.5 -19,-42.5 -23,-44.5"/><polygon points="-15,7.5 -19,9.5 -19,-42.5 -15,-44.5"/><polygon points="-19,-46.5 -15,-44.5 -19,-42.5 -23,-44.5"/></g>
      <g class="hln-printer-layers-ly0"><g><polygon points="-10,18.5 4,25.5 4,23.3 -10,16.3"/><polygon points="18,18.5 4,25.5 4,23.3 18,16.3"/><polygon points="4,9.3 18,16.3 4,23.3 -10,16.3"/></g></g>
      <g class="hln-printer-layers-ly1"><g><polygon points="-10,16.3 4,23.3 4,21.1 -10,14.1"/><polygon points="18,16.3 4,23.3 4,21.1 18,14.1"/><polygon points="4,7.1 18,14.1 4,21.1 -10,14.1"/></g></g>
      <g class="hln-printer-layers-ly2"><g><polygon points="-10,14.1 4,21.1 4,18.9 -10,11.9"/><polygon points="18,14.1 4,21.1 4,18.9 18,11.9"/><polygon points="4,4.9 18,11.9 4,18.9 -10,11.9"/></g></g>
      <g class="hln-printer-layers-ly3"><g><polygon points="-10,11.9 4,18.9 4,16.7 -10,9.7"/><polygon points="18,11.9 4,18.9 4,16.7 18,9.7"/><polygon points="4,2.7 18,9.7 4,16.7 -10,9.7"/></g></g>
      <g class="hln-printer-layers-ly4"><g><polygon points="-10,9.7 4,16.7 4,14.5 -10,7.5"/><polygon points="18,9.7 4,16.7 4,14.5 18,7.5"/><polygon points="4,0.5 18,7.5 4,14.5 -10,7.5"/></g></g>
      <g class="hln-printer-layers-ly5"><g><polygon points="-10,7.5 4,14.5 4,12.3 -10,5.3"/><polygon points="18,7.5 4,14.5 4,12.3 18,5.3"/><polygon points="4,-1.7 18,5.3 4,12.3 -10,5.3"/></g></g>
      <g class="hln-printer-layers-gan"><g><polygon points="-19,-0.2 25,21.8 25,19.3 -19,-2.7"/><polygon points="27,20.8 25,21.8 25,19.3 27,18.3"/><polygon points="-17,-3.7 27,18.3 25,19.3 -19,-2.7"/></g><g class="hln-printer-layers-head"><g><polygon points="-10,9.8 -1,14.3 -1,6.3 -10,1.8"/><polygon points="6,10.8 -1,14.3 -1,6.3 6,2.8"/><polygon points="-3,-1.7 6,2.8 -1,6.3 -10,1.8"/></g><path class="hln-printer-layers-a" d="M-3.6,9.5 L-2,13.3 L-0.4,9.5"/><polygon class="hln-printer-layers-l" points="2,2.3 2.18,2.41 2.31,2.53 2.39,2.66 2.41,2.8 2.39,2.94 2.31,3.07 2.18,3.19 2,3.3 0,4.3 -0.21,4.39 -0.46,4.45 -0.72,4.49 -1,4.51 -1.28,4.49 -1.54,4.45 -1.79,4.39 -2,4.3 -6,2.3 -6.18,2.19 -6.31,2.07 -6.39,1.94 -6.41,1.8 -6.39,1.66 -6.31,1.53 -6.18,1.41 -6,1.3 -4,0.3 -3.79,0.21 -3.54,0.15 -3.28,0.11 -3,0.09 -2.72,0.11 -2.46,0.15 -2.21,0.21 -2,0.3"/></g></g>
      <g><polygon points="25,31.5 29,33.5 29,-18.5 25,-20.5"/><polygon points="33,31.5 29,33.5 29,-18.5 33,-20.5"/><polygon points="29,-22.5 33,-20.5 29,-18.5 25,-20.5"/></g>
      <g><polygon points="-23,-44.5 29,-18.5 29,-21.5 -23,-47.5"/><polygon points="33,-20.5 29,-18.5 29,-21.5 33,-23.5"/><polygon points="-19,-49.5 33,-23.5 29,-21.5 -23,-47.5"/></g>
    </g>
  </svg>
</div>

CSS

.hln-printer-layers {
  --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;
}
.hln-printer-layers svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #ffffff;
  stroke: #1c1d21;
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hln-printer-layers svg * {
  vector-effect: non-scaling-stroke;
}
.hln-printer-layers .hln-printer-layers-l {
  stroke: #9a9ca3;
}
.hln-printer-layers .hln-printer-layers-a {
  stroke: var(--c);
}
.hln-printer-layers .hln-printer-layers-gan {
  transform: matrix(1, 0, 0, 1, 0, -11);
  animation: hln-printer-layers-gan 6s infinite;
}
.hln-printer-layers .hln-printer-layers-head {
  animation: hln-printer-layers-head 6s infinite;
}
@keyframes hln-printer-layers-gan {
  0% { transform: matrix(1, 0, 0, 1, 0, 0); }
  15% { transform: matrix(1, 0, 0, 1, 0, 0); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  17% { transform: matrix(1, 0, 0, 1, 0, -2.2); }
  25.33% { transform: matrix(1, 0, 0, 1, 0, -2.2); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  27.33% { transform: matrix(1, 0, 0, 1, 0, -4.4); }
  35.67% { transform: matrix(1, 0, 0, 1, 0, -4.4); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  37.67% { transform: matrix(1, 0, 0, 1, 0, -6.6); }
  46% { transform: matrix(1, 0, 0, 1, 0, -6.6); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  48% { transform: matrix(1, 0, 0, 1, 0, -8.8); }
  56.33% { transform: matrix(1, 0, 0, 1, 0, -8.8); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  58.33% { transform: matrix(1, 0, 0, 1, 0, -11); }
  85% { transform: matrix(1, 0, 0, 1, 0, -11); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  96.67% { transform: matrix(1, 0, 0, 1, 0, 0); }
  100% { transform: matrix(1, 0, 0, 1, 0, 0); }
}
@keyframes hln-printer-layers-head {
  0% { transform: matrix(1, 0, 0, 1, 0, 0); }
  6.67% { transform: matrix(1, 0, 0, 1, 0, 0); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  15% { transform: matrix(1, 0, 0, 1, 12, 6); }
  17% { transform: matrix(1, 0, 0, 1, 12, 6); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  25.33% { transform: matrix(1, 0, 0, 1, 0, 0); }
  27.33% { transform: matrix(1, 0, 0, 1, 0, 0); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  35.67% { transform: matrix(1, 0, 0, 1, 12, 6); }
  37.67% { transform: matrix(1, 0, 0, 1, 12, 6); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  46% { transform: matrix(1, 0, 0, 1, 0, 0); }
  48% { transform: matrix(1, 0, 0, 1, 0, 0); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  56.33% { transform: matrix(1, 0, 0, 1, 12, 6); }
  58.33% { transform: matrix(1, 0, 0, 1, 12, 6); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  66.67% { transform: matrix(1, 0, 0, 1, 0, 0); }
  100% { transform: matrix(1, 0, 0, 1, 0, 0); }
}
.hln-printer-layers .hln-printer-layers-ly0 {
  animation: hln-printer-layers-ly0 6s infinite;
}
@keyframes hln-printer-layers-ly0 {
  0% { opacity: 0; }
  14.67% { opacity: 0; }
  16.33% { opacity: 1; }
  85% { opacity: 1; }
  89.17% { opacity: 0; }
  100% { opacity: 0; }
}
.hln-printer-layers .hln-printer-layers-ly1 {
  animation: hln-printer-layers-ly1 6s infinite;
}
@keyframes hln-printer-layers-ly1 {
  0% { opacity: 0; }
  25% { opacity: 0; }
  26.67% { opacity: 1; }
  85% { opacity: 1; }
  89.17% { opacity: 0; }
  100% { opacity: 0; }
}
.hln-printer-layers .hln-printer-layers-ly2 {
  animation: hln-printer-layers-ly2 6s infinite;
}
@keyframes hln-printer-layers-ly2 {
  0% { opacity: 0; }
  35.33% { opacity: 0; }
  37% { opacity: 1; }
  85% { opacity: 1; }
  89.17% { opacity: 0; }
  100% { opacity: 0; }
}
.hln-printer-layers .hln-printer-layers-ly3 {
  animation: hln-printer-layers-ly3 6s infinite;
}
@keyframes hln-printer-layers-ly3 {
  0% { opacity: 0; }
  45.67% { opacity: 0; }
  47.33% { opacity: 1; }
  85% { opacity: 1; }
  89.17% { opacity: 0; }
  100% { opacity: 0; }
}
.hln-printer-layers .hln-printer-layers-ly4 {
  animation: hln-printer-layers-ly4 6s infinite;
}
@keyframes hln-printer-layers-ly4 {
  0% { opacity: 0; }
  56% { opacity: 0; }
  57.67% { opacity: 1; }
  85% { opacity: 1; }
  89.17% { opacity: 0; }
  100% { opacity: 0; }
}
.hln-printer-layers .hln-printer-layers-ly5 {
  animation: hln-printer-layers-ly5 6s infinite;
}
@keyframes hln-printer-layers-ly5 {
  0% { opacity: 0; }
  66.33% { opacity: 0; }
  68% { opacity: 1; }
  85% { opacity: 1; }
  89.17% { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hln-printer-layers * {
    animation: none !important;
  }
}

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

Laptop Lid Opening
Phone Notification Card
Server Blade Slide Out
Mechanical Keyboard Typing