Cloud Region Servers
A hairline cloud hangs over three isometric server racks in a dashed region, sending an accent request down to each rack in turn. SVG racks with CSS translate and fill.
Also known as: cloud infrastructure animation, isometric server illustration, hairline isometric.
HTML
<div class="hln-cloud-region" role="img" aria-label="A cloud region routing requests to three servers"> <svg viewBox="-110 -60 220 120" aria-hidden="true"><g transform="translate(0 21) scale(1.2)"><polygon class="hln-cloud-region-zone" points="-19,-24.5 37,3.5 7,18.5 -49,-9.5"/><g><polygon points="-29,-9.5 -19,-4.5 -19,-26.5 -29,-31.5"/><polygon points="-9,-9.5 -19,-4.5 -19,-26.5 -9,-31.5"/><polygon points="-19,-36.5 -9,-31.5 -19,-26.5 -29,-31.5"/></g><line class="hln-cloud-region-in" x1="-29" y1="-15" x2="-19" y2="-10"/><line class="hln-cloud-region-in" x1="-29" y1="-20.5" x2="-19" y2="-15.5"/><line class="hln-cloud-region-in" x1="-29" y1="-26" x2="-19" y2="-21"/><line class="hln-cloud-region-in" x1="-22" y1="-8.75" x2="-20.6" y2="-8.05"/><line class="hln-cloud-region-in" x1="-22" y1="-14.25" x2="-20.6" y2="-13.55"/><line class="hln-cloud-region-in" x1="-22" y1="-19.75" x2="-20.6" y2="-19.05"/><line class="hln-cloud-region-in" x1="-22" y1="-25.25" x2="-20.6" y2="-24.55"/><polygon class="hln-cloud-region-in" points="-19,-33.5 -15,-31.5 -19,-29.5 -23,-31.5"/><polygon class="hln-cloud-region-lamp hln-cloud-region-l0" points="-19,-33.5 -15,-31.5 -19,-29.5 -23,-31.5"/><g><polygon points="-15,-2.5 -5,2.5 -5,-19.5 -15,-24.5"/><polygon points="5,-2.5 -5,2.5 -5,-19.5 5,-24.5"/><polygon points="-5,-29.5 5,-24.5 -5,-19.5 -15,-24.5"/></g><line class="hln-cloud-region-in" x1="-15" y1="-8" x2="-5" y2="-3"/><line class="hln-cloud-region-in" x1="-15" y1="-13.5" x2="-5" y2="-8.5"/><line class="hln-cloud-region-in" x1="-15" y1="-19" x2="-5" y2="-14"/><line class="hln-cloud-region-in" x1="-8" y1="-1.75" x2="-6.6" y2="-1.05"/><line class="hln-cloud-region-in" x1="-8" y1="-7.25" x2="-6.6" y2="-6.55"/><line class="hln-cloud-region-in" x1="-8" y1="-12.75" x2="-6.6" y2="-12.05"/><line class="hln-cloud-region-in" x1="-8" y1="-18.25" x2="-6.6" y2="-17.55"/><polygon class="hln-cloud-region-in" points="-5,-26.5 -1,-24.5 -5,-22.5 -9,-24.5"/><polygon class="hln-cloud-region-lamp hln-cloud-region-l1" points="-5,-26.5 -1,-24.5 -5,-22.5 -9,-24.5"/><g><polygon points="-1,4.5 9,9.5 9,-12.5 -1,-17.5"/><polygon points="19,4.5 9,9.5 9,-12.5 19,-17.5"/><polygon points="9,-22.5 19,-17.5 9,-12.5 -1,-17.5"/></g><line class="hln-cloud-region-in" x1="-1" y1="-1" x2="9" y2="4"/><line class="hln-cloud-region-in" x1="-1" y1="-6.5" x2="9" y2="-1.5"/><line class="hln-cloud-region-in" x1="-1" y1="-12" x2="9" y2="-7"/><line class="hln-cloud-region-in" x1="6" y1="5.25" x2="7.4" y2="5.95"/><line class="hln-cloud-region-in" x1="6" y1="-0.25" x2="7.4" y2="0.45"/><line class="hln-cloud-region-in" x1="6" y1="-5.75" x2="7.4" y2="-5.05"/><line class="hln-cloud-region-in" x1="6" y1="-11.25" x2="7.4" y2="-10.55"/><polygon class="hln-cloud-region-in" points="9,-19.5 13,-17.5 9,-15.5 5,-17.5"/><polygon class="hln-cloud-region-lamp hln-cloud-region-l2" points="9,-19.5 13,-17.5 9,-15.5 5,-17.5"/><line class="hln-cloud-region-link" x1="-19" y1="-31.5" x2="-19" y2="-42.5"/><line class="hln-cloud-region-link" x1="-5" y1="-24.5" x2="-5" y2="-35.5"/><line class="hln-cloud-region-link" x1="9" y1="-17.5" x2="9" y2="-28.5"/><g transform="translate(-25 -45.5) matrix(1 0.5 0 1 0 0)"><path d="M6 0H34A6.5 6.5 0 0 0 35 -12.9A10 10 0 0 0 17.5 -16.8A6.5 6.5 0 0 0 7.5 -12.5A6.3 6.3 0 0 0 6 0Z"/></g><circle class="hln-cloud-region-drop hln-cloud-region-d0" cx="-19" cy="-42.5" r="1.6"/><circle class="hln-cloud-region-drop hln-cloud-region-d1" cx="-5" cy="-35.5" r="1.6"/><circle class="hln-cloud-region-drop hln-cloud-region-d2" cx="9" cy="-28.5" r="1.6"/></g></svg> </div>
CSS
.hln-cloud-region {
--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-cloud-region svg {
width: 100%;
height: 100%;
overflow: visible;
fill: #ffffff;
stroke: #1c1d21;
stroke-width: 1.25;
stroke-linejoin: round;
stroke-linecap: round;
}
.hln-cloud-region svg * {
vector-effect: non-scaling-stroke;
}
.hln-cloud-region .hln-cloud-region-in {
stroke: #9a9ca3;
}
.hln-cloud-region .hln-cloud-region-zone {
fill: none;
stroke: #9a9ca3;
stroke-dasharray: 2 3;
}
.hln-cloud-region .hln-cloud-region-link {
stroke: #9a9ca3;
stroke-dasharray: 1.5 2.5;
}
.hln-cloud-region .hln-cloud-region-lamp {
fill: var(--c);
stroke: var(--c);
opacity: 0;
animation: hln-cloud-region-lamp 6s infinite;
}
.hln-cloud-region .hln-cloud-region-drop {
fill: var(--c);
stroke: none;
opacity: 0;
animation: hln-cloud-region-drop 6s infinite;
}
.hln-cloud-region .hln-cloud-region-l0, .hln-cloud-region .hln-cloud-region-d0 {
animation-delay: 0s;
}
.hln-cloud-region .hln-cloud-region-l1, .hln-cloud-region .hln-cloud-region-d1 {
animation-delay: 2s;
}
.hln-cloud-region .hln-cloud-region-l2, .hln-cloud-region .hln-cloud-region-d2 {
animation-delay: 4s;
}
@keyframes hln-cloud-region-drop {
0% { opacity: 0; translate: 0 0; }
3% { opacity: 1; translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.4); }
16% { opacity: 1; translate: 0 calc(11 * var(--u)); }
18%, 100% { opacity: 0; translate: 0 calc(11 * var(--u)); }
}
@keyframes hln-cloud-region-lamp {
0%, 15% { opacity: 0; }
17% { opacity: 1; }
30% { opacity: 1; }
40%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hln-cloud-region * {
animation: none !important;
}
.hln-cloud-region .hln-cloud-region-l1 { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.hln-cloud-region, .hln-cloud-region *, .hln-cloud-region::before, .hln-cloud-region::after, .hln-cloud-region *::before, .hln-cloud-region *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hln-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hln-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. 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.