All examples / feature card

Isometric automation: conveyor and stamp

A conveyor belt on a soft isometric platform carries yellow parcels under a small gantry; a coral stamp presses each one as it passes, the parcel comes out mint with a check, and a lamp on the gantry blinks. One parcel every two seconds.

Prompt tested

Large

Feature card size

Prompt

Draw a looping isometric illustration for an 'Automation' feature card as one inline SVG with CSS keyframes only (no JavaScript, no libraries). Scene: a light paper-coloured isometric platform (30° projection) with a long dark slate conveyor belt running diagonally across it from the back-left to the front-right, with faint roller lines across the belt. Halfway along, a light grey gantry (two legs on either side of the belt and a beam across the top) holds a small coral stamp block hanging over the belt, and a tiny lamp on the front of the beam. Three small isometric parcels ride the belt at one steady speed, evenly spaced: each starts warm yellow with a tape line, and when it passes under the gantry the stamp dips down to press it and the parcel turns mint with a navy check mark on its top, while the lamp blinks mint. Parcels fade in at the start of the belt and fade out at the end. Use a navy outline (#1F2A44, 1.5 px, round joins) and the palette ink #1F2A44, slate #5B6B8C, sky #7FB6FF, mint #6FD6B4, sun #FFC861, coral #FF8A7A, paper #F6F4EF; shade each box with a light top, mid right face and darker left face. Loop every 6 seconds (one parcel every 2 seconds) with no visible jump; animate only transform and opacity; add a prefers-reduced-motion rule that stops all animation and leaves a calm still frame with one yellow parcel arriving, one freshly stamped mint parcel under the raised stamp and one mint parcel further on.

Prompt test

A fresh AI session given only the prompt above rebuilt this on 2026-11-03 using claude-opus-5-5; a separate fresh session using claude-opus-5-5 judged it “like this”.

The rebuild made from the prompt alone — Rebuilt from the prompt

Lesson: Saying how the state change works ("starts warm yellow … turns mint with a navy check mark when the stamp presses it") and tying each motion to one beat ("one parcel every 2 seconds", "the lamp blinks mint") was enough to get the same story on the first try. The prompt left the gantry's bulk and the slab's side colour open, and the rebuild filled those differently: name the side colour (slate-grey) and the soft drop shadow if they matter.

Words it rests on

isometric illustration (30° projection)
inline SVG
CSS @keyframes
seamless loop
staggered animation-delay
state change by cross-fade (before/after layer)
three-tone face shading
prefers-reduced-motion still frame
feature card

Facts

Tags: feature card css keyframes inline svg isometric flat shaded harbor
Weight: 1.8 KB gzip (SVG + CSS)
Needs: No library, no JavaScript
Browser support: All current browsers (Chrome, Edge, Firefox, Safari 15+); CSS transforms on SVG groups.
Loop: 6 s, seamless; still frame with reduced motion
Link: /examples/iso-automation/

Source

Paste both parts into any page. Wrap the SVG in <div class="ma-iso-automation"> and put the CSS in a <style> element or your stylesheet; every class, id and animation name starts with ma-iso-automation, so it will not clash with your styles.

demo.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" role="img" aria-labelledby="ma-iso-automation-title">
<title id="ma-iso-automation-title">A conveyor belt carries yellow parcels under a stamp that turns each one into a checked mint parcel</title>
<g stroke="#1F2A44" stroke-width="1.5" stroke-linejoin="round">
<path d="M156.3 93.7L346.8 203.7L232.5 269.7L42 159.7Z" fill="#1F2A44" opacity=".08"/>
<path d="M352.5 185L238.2 251L238.2 240L352.5 174Z" fill="#C9D2E3"/>
<path d="M47.7 141L238.2 251L238.2 240L47.7 130Z" fill="#A3B0C8"/>
<path d="M162 64L352.5 174L238.2 240L47.7 130Z" fill="#F6F4EF"/>
<path d="M227.8 148L222.6 151L222.6 107L227.8 104Z" fill="#B7C1D3"/>
<path d="M208.8 143L222.6 151L222.6 107L208.8 99Z" fill="#8F9BB3"/>
<path d="M214 96L227.8 104L222.6 107L208.8 99Z" fill="#E8ECF3"/>
<path d="M297.1 196L272.8 210L272.8 202L297.1 188Z" fill="#B7C1D3"/>
<path d="M99.6 110L272.8 210L272.8 202L99.6 102Z" fill="#8F9BB3"/>
<path d="M123.9 88L297.1 188L272.8 202L99.6 102Z" fill="#5B6B8C"/>
<path d="M129.1 93L108.3 105" fill="none" stroke="#8F9BB3" stroke-width="1.2" stroke-linecap="round"/>
<path d="M141.2 100L120.4 112" fill="none" stroke="#8F9BB3" stroke-width="1.2" stroke-linecap="round"/>
<path d="M153.3 107L132.6 119" fill="none" stroke="#8F9BB3" stroke-width="1.2" stroke-linecap="round"/>
<path d="M165.5 114L144.7 126" fill="none" stroke="#8F9BB3" stroke-width="1.2" stroke-linecap="round"/>
<path d="M177.6 121L156.8 133" fill="none" stroke="#8F9BB3" stroke-width="1.2" stroke-linecap="round"/>
<path d="M189.7 128L168.9 140" fill="none" stroke="#8F9BB3" stroke-width="1.2" stroke-linecap="round"/>
<path d="M201.8 135L181.1 147" fill="none" stroke="#8F9BB3" stroke-width="1.2" stroke-linecap="round"/>
<path d="M214 142L193.2 154" fill="none" stroke="#8F9BB3" stroke-width="1.2" stroke-linecap="round"/>
<path d="M226.1 149L205.3 161" fill="none" stroke="#8F9BB3" stroke-width="1.2" stroke-linecap="round"/>
<path d="M238.2 156L217.4 168" fill="none" stroke="#8F9BB3" stroke-width="1.2" stroke-linecap="round"/>
<path d="M250.3 163L229.5 175" fill="none" stroke="#8F9BB3" stroke-width="1.2" stroke-linecap="round"/>
<path d="M262.5 170L241.7 182" fill="none" stroke="#8F9BB3" stroke-width="1.2" stroke-linecap="round"/>
<path d="M274.6 177L253.8 189" fill="none" stroke="#8F9BB3" stroke-width="1.2" stroke-linecap="round"/>
<path d="M286.7 184L265.9 196" fill="none" stroke="#8F9BB3" stroke-width="1.2" stroke-linecap="round"/>
<g class="ma-iso-automation-parcel ma-iso-automation-parcel-1" transform="translate(33.2 19.2)">
<path d="M134.3 100L120.4 108L120.4 94L134.3 86Z" fill="#FFC861"/>
<path d="M106.6 100L120.4 108L120.4 94L106.6 86Z" fill="#E8AC3E"/>
<path d="M120.4 78L134.3 86L120.4 94L106.6 86Z" fill="#FFE0A3"/>
<path d="M127.4 82L113.5 90" fill="none" stroke="#E8AC3E" stroke-width="2" stroke-linecap="round"/>
<g class="ma-iso-automation-done" opacity="0">
<path d="M134.3 100L120.4 108L120.4 94L134.3 86Z" fill="#6FD6B4"/>
<path d="M106.6 100L120.4 108L120.4 94L106.6 86Z" fill="#4FB896"/>
<path d="M120.4 78L134.3 86L120.4 94L106.6 86Z" fill="#A8E8D2"/>
<path d="M117.8 83.5L117.8 86.5L127.4 86" fill="none" stroke="#1F2A44" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
<g class="ma-iso-automation-parcel ma-iso-automation-parcel-2" transform="translate(88.5 51.1)">
<path d="M134.3 100L120.4 108L120.4 94L134.3 86Z" fill="#FFC861"/>
<path d="M106.6 100L120.4 108L120.4 94L106.6 86Z" fill="#E8AC3E"/>
<path d="M120.4 78L134.3 86L120.4 94L106.6 86Z" fill="#FFE0A3"/>
<path d="M127.4 82L113.5 90" fill="none" stroke="#E8AC3E" stroke-width="2" stroke-linecap="round"/>
<g class="ma-iso-automation-done" opacity="1">
<path d="M134.3 100L120.4 108L120.4 94L134.3 86Z" fill="#6FD6B4"/>
<path d="M106.6 100L120.4 108L120.4 94L106.6 86Z" fill="#4FB896"/>
<path d="M120.4 78L134.3 86L120.4 94L106.6 86Z" fill="#A8E8D2"/>
<path d="M117.8 83.5L117.8 86.5L127.4 86" fill="none" stroke="#1F2A44" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
<g class="ma-iso-automation-parcel ma-iso-automation-parcel-3" transform="translate(143.8 83)">
<path d="M134.3 100L120.4 108L120.4 94L134.3 86Z" fill="#FFC861"/>
<path d="M106.6 100L120.4 108L120.4 94L106.6 86Z" fill="#E8AC3E"/>
<path d="M120.4 78L134.3 86L120.4 94L106.6 86Z" fill="#FFE0A3"/>
<path d="M127.4 82L113.5 90" fill="none" stroke="#E8AC3E" stroke-width="2" stroke-linecap="round"/>
<g class="ma-iso-automation-done" opacity="1">
<path d="M134.3 100L120.4 108L120.4 94L134.3 86Z" fill="#6FD6B4"/>
<path d="M106.6 100L120.4 108L120.4 94L106.6 86Z" fill="#4FB896"/>
<path d="M120.4 78L134.3 86L120.4 94L106.6 86Z" fill="#A8E8D2"/>
<path d="M117.8 83.5L117.8 86.5L127.4 86" fill="none" stroke="#1F2A44" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
<g class="ma-iso-automation-stamp">
<path d="M205.3 115L201.8 117L201.8 109L205.3 107Z" fill="#5B6B8C"/>
<path d="M198.4 115L201.8 117L201.8 109L198.4 107Z" fill="#5B6B8C"/>
<path d="M201.8 105L205.3 107L201.8 109L198.4 107Z" fill="#8F9BB3"/>
<path d="M212.2 125L201.8 131L201.8 121L212.2 115Z" fill="#FF8A7A"/>
<path d="M191.4 125L201.8 131L201.8 121L191.4 115Z" fill="#E06A5B"/>
<path d="M201.8 109L212.2 115L201.8 121L191.4 115Z" fill="#FFB8AD"/>
</g>
<path d="M194.9 167L189.7 170L189.7 126L194.9 123Z" fill="#B7C1D3"/>
<path d="M175.9 162L189.7 170L189.7 126L175.9 118Z" fill="#8F9BB3"/>
<path d="M181.1 115L194.9 123L189.7 126L175.9 118Z" fill="#E8ECF3"/>
<path d="M231.3 104L189.7 128L189.7 120L231.3 96Z" fill="#B7C1D3"/>
<path d="M172.4 118L189.7 128L189.7 120L172.4 110Z" fill="#8F9BB3"/>
<path d="M214 86L231.3 96L189.7 120L172.4 110Z" fill="#E8ECF3"/>
<circle cx="181.1" cy="119" r="3" fill="#7FB6FF"/>
<circle class="ma-iso-automation-lamp" cx="181.1" cy="119" r="3" fill="#6FD6B4" opacity="0"/>
</g>
</svg>

demo.css

/* Isometric automation card: parcels ride a conveyor under a stamp that turns each one mint.
   Loop period 6 s, one parcel every 2 s. The negative delays make the first frame match the
   still frame drawn in the markup. Only transform and opacity animate. */
.ma-iso-automation svg {
  display: block;
  width: 100%;
  height: auto;
}

.ma-iso-automation .ma-iso-automation-parcel,
.ma-iso-automation .ma-iso-automation-done {
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.ma-iso-automation .ma-iso-automation-parcel {
  animation-name: ma-iso-automation-ride;
}

.ma-iso-automation .ma-iso-automation-done {
  animation-name: ma-iso-automation-done;
}

.ma-iso-automation .ma-iso-automation-parcel-1,
.ma-iso-automation .ma-iso-automation-parcel-1 .ma-iso-automation-done {
  animation-delay: -1.2s;
}

.ma-iso-automation .ma-iso-automation-parcel-2,
.ma-iso-automation .ma-iso-automation-parcel-2 .ma-iso-automation-done {
  animation-delay: -3.2s;
}

.ma-iso-automation .ma-iso-automation-parcel-3,
.ma-iso-automation .ma-iso-automation-parcel-3 .ma-iso-automation-done {
  animation-delay: -5.2s;
}

/* Fade in at the start of the belt, ride at one steady speed, fade out at the end. */
@keyframes ma-iso-automation-ride {
  0%, 100% { transform: translate(0px, 0px); opacity: 0; }
  6% { transform: translate(10px, 5.7px); opacity: 1; }
  89% { transform: translate(147.7px, 85.3px); opacity: 1; }
  95% { transform: translate(157.6px, 91px); opacity: 0; }
}

/* The parcel turns mint with a check the moment the stamp presses it. */
@keyframes ma-iso-automation-done {
  0%, 49% { opacity: 0; }
  51%, 96% { opacity: 1; }
  100% { opacity: 0; }
}

/* The stamp presses once per parcel and the lamp on the gantry blinks mint. */
.ma-iso-automation .ma-iso-automation-stamp,
.ma-iso-automation .ma-iso-automation-lamp {
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: -1.256s;
}

.ma-iso-automation .ma-iso-automation-stamp {
  animation-name: ma-iso-automation-press;
}

.ma-iso-automation .ma-iso-automation-lamp {
  animation-name: ma-iso-automation-lamp;
}

@keyframes ma-iso-automation-press {
  0%, 40%, 60%, 100% { transform: translate(0px, 0px); }
  47%, 53% { transform: translate(0px, 7px); }
}

@keyframes ma-iso-automation-lamp {
  0%, 45%, 70%, 100% { opacity: 0; }
  52% { opacity: 1; }
}

/* Calm still frame: one yellow parcel on its way, two finished mint parcels, the stamp raised. */
@media (prefers-reduced-motion: reduce) {
  .ma-iso-automation,
  .ma-iso-automation * {
    animation: none !important;
  }
}