All examples / feature card
Isometric security: shield dome over a locked server
A server with a yellow padlock sits under a translucent sky-blue dome on a soft isometric platform. Small coral packets slide in along dashed paths from either side, one every three seconds, and dissolve against the dome as it glows and a ring sparks where they hit.
Prompt tested
Feature card size
Prompt
Draw a looping isometric illustration for a 'Security' feature card as one inline SVG with CSS keyframes only (no JavaScript, no libraries). Scene: a light paper-coloured isometric platform (30° projection). In the middle stands a light grey server box with three short slate vent lines and a small mint status light on its front-left face, and a warm yellow padlock (small box with a navy keyhole and a rounded navy shackle) on top. Over it sits a translucent sky-blue dome: an isometric ellipse on the floor plus a rounded cap, low fill opacity, a sky outline and a soft white highlight curve. Two faint dashed coral paths lead to the dome, one from the front-right corner of the platform and one from the front-left edge. Motion: a small coral isometric cube fades in at the start of a path, slides toward the dome, and on touching it recoils slightly and fades out; at that moment the dome briefly glows brighter and a small coral ring opens and fades at the point of impact. The two paths take turns, one cube every 3 seconds. 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 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 the dome over the locked server and one coral cube halfway along its path.
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”.
Lesson: Describing the event as a cause and its effects ("on touching it recoils slightly and fades out; at that moment the dome briefly glows brighter and a small coral ring opens") and the turn-taking ("the two paths take turns, one cube every 3 seconds") reproduced the motion on the first try. Directions were the weak spot: "from the front-right corner" let the rebuild draw a path flat across the screen. Say "along the platform's isometric axes" when paths must stay on the grid.
Words it rests on
- isometric illustration (30° projection)
- inline SVG
- CSS @keyframes
- seamless loop
- staggered animation-delay
- translucent shield dome (fill-opacity)
- impact ring (scale and fade from transform-origin: center)
- 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 elements with transform-box: fill-box.
- Loop
- 6 s, seamless; still frame with reduced motion
- Link
/examples/iso-security/
Source
Paste both parts into any page. Wrap the SVG in <div class="ma-iso-security"> and put the CSS in a <style> element or your stylesheet; every class, id and animation name starts with ma-iso-security, 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-security-title">
<title id="ma-iso-security-title">A shield dome over a locked server; small coral packets approach and dissolve against the dome as it glows</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="M236.5 227L216.6 185.2" fill="none" stroke="#FF8A7A" stroke-width="2" stroke-linecap="round" stroke-dasharray="3 6" opacity=".55"/>
<path d="M77.1 147L129.8 147" fill="none" stroke="#FF8A7A" stroke-width="2" stroke-linecap="round" stroke-dasharray="3 6" opacity=".55"/>
<ellipse cx="198.4" cy="147" rx="63.7" ry="36.8" fill="#7FB6FF" fill-opacity=".14" stroke="#7FB6FF"/>
<path d="M229.5 147L198.4 165L198.4 125L229.5 107Z" fill="#B7C1D3"/>
<path d="M167.2 147L198.4 165L198.4 125L167.2 107Z" fill="#8F9BB3"/>
<path d="M198.4 89L229.5 107L198.4 125L167.2 107Z" fill="#E8ECF3"/>
<path d="M170.7 137L186.2 146" fill="none" stroke="#5B6B8C" stroke-width="2.5" stroke-linecap="round"/>
<path d="M170.7 127L186.2 136" fill="none" stroke="#5B6B8C" stroke-width="2.5" stroke-linecap="round"/>
<path d="M170.7 117L186.2 126" fill="none" stroke="#5B6B8C" stroke-width="2.5" stroke-linecap="round"/>
<circle cx="193.2" cy="140" r="2.6" fill="#6FD6B4" stroke-width="1"/>
<path d="M212.2 109L201.8 115L201.8 101L212.2 95Z" fill="#FFC861"/>
<path d="M184.5 105L201.8 115L201.8 101L184.5 91Z" fill="#E8AC3E"/>
<path d="M194.9 85L212.2 95L201.8 101L184.5 91Z" fill="#FFE0A3"/>
<path d="M193.2 90L193.2 81L194.9 78L201.8 82L203.6 87L203.6 96" fill="none" stroke="#1F2A44" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M193.2 90L193.2 81L194.9 78L201.8 82L203.6 87L203.6 96" fill="none" stroke="#C9D2E3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="193.2" cy="103" r="1.8" fill="#1F2A44" stroke="none"/>
<path d="M134.7 147A63.7 36.8 0 0 0 262.1 147C262.1 61.2 233.4 69 198.4 69C163.3 69 134.7 61.2 134.7 147Z" fill="#7FB6FF" fill-opacity=".16" stroke="#7FB6FF" stroke-width="1.5"/>
<path class="ma-iso-security-glow" d="M134.7 147A63.7 36.8 0 0 0 262.1 147C262.1 61.2 233.4 69 198.4 69C163.3 69 134.7 61.2 134.7 147Z" fill="#7FB6FF" stroke="none" opacity="0"/>
<path d="M158.9 98.6C166.5 76.8 182.5 70.6 195.2 69.8" fill="none" stroke="#F6F4EF" stroke-width="3" stroke-linecap="round" opacity=".8"/>
<ellipse class="ma-iso-security-spark ma-iso-security-spark-a" cx="216.9" cy="179.9" rx="9" ry="5.2" fill="none" stroke="#FF8A7A" stroke-width="2" opacity="0"/>
<ellipse class="ma-iso-security-spark ma-iso-security-spark-b" cx="128.6" cy="141" rx="9" ry="5.2" fill="none" stroke="#FF8A7A" stroke-width="2" opacity="0"/>
<g class="ma-iso-security-threat ma-iso-security-threat-a" transform="translate(-9.7 -20.4)">
<path d="M246 227L236.5 232.5L236.5 221.5L246 216Z" fill="#FF8A7A"/>
<path d="M226.9 227L236.5 232.5L236.5 221.5L226.9 216Z" fill="#E06A5B"/>
<path d="M236.5 210.5L246 216L236.5 221.5L226.9 216Z" fill="#FFB8AD"/>
</g>
<g class="ma-iso-security-threat ma-iso-security-threat-b" transform="translate(0 0)" opacity="0">
<path d="M86.7 147L77.1 152.5L77.1 141.5L86.7 136Z" fill="#FF8A7A"/>
<path d="M67.6 147L77.1 152.5L77.1 141.5L67.6 136Z" fill="#E06A5B"/>
<path d="M77.1 130.5L86.7 136L77.1 141.5L67.6 136Z" fill="#FFB8AD"/>
</g>
</g>
</svg>
demo.css
/* Isometric security card: coral packets approach a shield dome from either side, one every
3 s, and dissolve against it as the dome glows and a ring sparks at the point of impact.
Loop period 6 s. The delays make the first frame match the still frame in the markup.
Only transform and opacity animate. */
.ma-iso-security svg {
display: block;
width: 100%;
height: auto;
}
.ma-iso-security .ma-iso-security-threat,
.ma-iso-security .ma-iso-security-spark {
animation-duration: 6s;
animation-iteration-count: infinite;
}
.ma-iso-security .ma-iso-security-threat {
animation-timing-function: linear;
}
.ma-iso-security .ma-iso-security-threat-a {
animation-name: ma-iso-security-threat-a;
}
.ma-iso-security .ma-iso-security-threat-b {
animation-name: ma-iso-security-threat-b;
}
.ma-iso-security .ma-iso-security-threat-a,
.ma-iso-security .ma-iso-security-spark-a {
animation-delay: -1.32s;
}
.ma-iso-security .ma-iso-security-threat-b,
.ma-iso-security .ma-iso-security-spark-b {
animation-delay: -4.32s;
}
/* Fade in at the edge of the platform, slide to the dome, recoil a little and dissolve. */
@keyframes ma-iso-security-threat-a {
0%, 100% { transform: translate(0px, 0px); opacity: 0; }
8% { transform: translate(-3.5px, -7.4px); opacity: 1; }
40% { transform: translate(-17.6px, -37px); opacity: 1; }
48% { transform: translate(-15.4px, -32.3px); opacity: 0; }
}
@keyframes ma-iso-security-threat-b {
0%, 100% { transform: translate(0px, 0px); opacity: 0; }
8% { transform: translate(8.8px, 0px); opacity: 1; }
40% { transform: translate(44.1px, 0px); opacity: 1; }
48% { transform: translate(35.5px, 0px); opacity: 0; }
}
/* A ring opens and fades where each packet meets the dome. */
.ma-iso-security .ma-iso-security-spark {
animation-name: ma-iso-security-spark;
animation-timing-function: ease-out;
transform-box: fill-box;
transform-origin: center;
}
@keyframes ma-iso-security-spark {
0%, 39%, 100% { transform: scale(0.4); opacity: 0; }
42% { transform: scale(0.7); opacity: 1; }
54% { transform: scale(1.5); opacity: 0; }
}
/* The dome brightens once per impact. */
.ma-iso-security .ma-iso-security-glow {
animation-name: ma-iso-security-glow;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-delay: -0.42s;
}
@keyframes ma-iso-security-glow {
0%, 44%, 80%, 100% { opacity: 0; }
52% { opacity: 0.32; }
}
/* Calm still frame: the dome over the locked server and one packet on its way in. */
@media (prefers-reduced-motion: reduce) {
.ma-iso-security,
.ma-iso-security * {
animation: none !important;
}
}