Isometric Bar Chart Rise
Five isometric bars rise out of a hairline base plate on a staggered spring, the tallest capped in the accent, then sink and repeat. SVG boxes slid through clip paths.
Also known as: isometric bar chart, 3d bar chart animation, hairline isometric chart.
HTML
<div class="hln-bar-chart-rise" role="img" aria-label="Isometric bar chart rising"> <svg viewBox="-110 -60 220 120" aria-hidden="true"><g transform="translate(0 10) scale(1.35)"><defs><clipPath id="hln-bar-chart-rise-c0"><polygon points="-32,-80 -32,-15 -24,-11 -16,-15 -16,-80"/></clipPath><clipPath id="hln-bar-chart-rise-c1"><polygon points="-20,-80 -20,-9 -12,-5 -4,-9 -4,-80"/></clipPath><clipPath id="hln-bar-chart-rise-c2"><polygon points="-8,-80 -8,-3 0,1 8,-3 8,-80"/></clipPath><clipPath id="hln-bar-chart-rise-c3"><polygon points="4,-80 4,3 12,7 20,3 20,-80"/></clipPath><clipPath id="hln-bar-chart-rise-c4"><polygon points="16,-80 16,9 24,13 32,9 32,-80"/></clipPath></defs><g><polygon points="-46,-12 24,23 24,20 -46,-15"/><polygon points="46,12 24,23 24,20 46,9"/><polygon points="-24,-26 46,9 24,20 -46,-15"/></g><line class="hln-bar-chart-rise-in" x1="-40" y1="-16" x2="26" y2="17"/><line class="hln-bar-chart-rise-in" x1="-37" y1="-14.5" x2="-39" y2="-13.5"/><line class="hln-bar-chart-rise-in" x1="-25" y1="-8.5" x2="-27" y2="-7.5"/><line class="hln-bar-chart-rise-in" x1="-13" y1="-2.5" x2="-15" y2="-1.5"/><line class="hln-bar-chart-rise-in" x1="-1" y1="3.5" x2="-3" y2="4.5"/><line class="hln-bar-chart-rise-in" x1="11" y1="9.5" x2="9" y2="10.5"/><line class="hln-bar-chart-rise-in" x1="23" y1="15.5" x2="21" y2="16.5"/><polygon points="-24,-19 -16,-15 -24,-11 -32,-15"/><polygon points="-12,-13 -4,-9 -12,-5 -20,-9"/><polygon points="0,-7 8,-3 0,1 -8,-3"/><polygon points="12,-1 20,3 12,7 4,3"/><polygon points="24,5 32,9 24,13 16,9"/><g clip-path="url(#hln-bar-chart-rise-c0)"><g class="hln-bar-chart-rise-bar" style="--h: 12; animation-delay: 0s"><g><polygon points="-32,-15 -24,-11 -24,-23 -32,-27"/><polygon points="-16,-15 -24,-11 -24,-23 -16,-27"/><polygon points="-24,-31 -16,-27 -24,-23 -32,-27"/></g></g></g><polyline fill="none" points="-32,-15 -24,-11 -16,-15"/><g clip-path="url(#hln-bar-chart-rise-c1)"><g class="hln-bar-chart-rise-bar" style="--h: 20; animation-delay: 0.09s"><g><polygon points="-20,-9 -12,-5 -12,-25 -20,-29"/><polygon points="-4,-9 -12,-5 -12,-25 -4,-29"/><polygon points="-12,-33 -4,-29 -12,-25 -20,-29"/></g></g></g><polyline fill="none" points="-20,-9 -12,-5 -4,-9"/><g clip-path="url(#hln-bar-chart-rise-c2)"><g class="hln-bar-chart-rise-bar" style="--h: 15; animation-delay: 0.18s"><g><polygon points="-8,-3 0,1 0,-14 -8,-18"/><polygon points="8,-3 0,1 0,-14 8,-18"/><polygon points="0,-22 8,-18 0,-14 -8,-18"/></g></g></g><polyline fill="none" points="-8,-3 0,1 8,-3"/><g clip-path="url(#hln-bar-chart-rise-c3)"><g class="hln-bar-chart-rise-bar" style="--h: 27; animation-delay: 0.27s"><g><polygon points="4,3 12,7 12,-20 4,-24"/><polygon points="20,3 12,7 12,-20 20,-24"/><polygon points="12,-28 20,-24 12,-20 4,-24"/></g></g></g><polyline fill="none" points="4,3 12,7 20,3"/><g clip-path="url(#hln-bar-chart-rise-c4)"><g class="hln-bar-chart-rise-bar hln-bar-chart-rise-hot" style="--h: 36; animation-delay: 0.36s"><g><polygon points="16,9 24,13 24,-23 16,-27"/><polygon points="32,9 24,13 24,-23 32,-27"/><polygon points="24,-31 32,-27 24,-23 16,-27"/></g></g></g><polyline fill="none" points="16,9 24,13 32,9"/></g></svg> </div>
CSS
.hln-bar-chart-rise {
--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-bar-chart-rise svg {
width: 100%;
height: 100%;
overflow: visible;
fill: #ffffff;
stroke: #1c1d21;
stroke-width: 1.25;
stroke-linejoin: round;
stroke-linecap: round;
}
.hln-bar-chart-rise svg * {
vector-effect: non-scaling-stroke;
}
.hln-bar-chart-rise .hln-bar-chart-rise-in {
stroke: #9a9ca3;
}
.hln-bar-chart-rise .hln-bar-chart-rise-bar {
animation: hln-bar-chart-rise-rise 5s infinite;
}
.hln-bar-chart-rise .hln-bar-chart-rise-hot polygon:last-child {
fill: var(--c);
}
@keyframes hln-bar-chart-rise-rise {
0%, 100% { translate: 0 calc(var(--h) * var(--u)); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
13% { translate: 0 calc(var(--h) * -0.07 * var(--u)); animation-timing-function: ease-in-out; }
19% { translate: 0 calc(var(--h) * 0.02 * var(--u)); animation-timing-function: ease-in-out; }
24%, 72% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.3); }
86% { translate: 0 calc(var(--h) * var(--u)); }
}
@media (prefers-reduced-motion: reduce) {
.hln-bar-chart-rise * {
animation: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.hln-bar-chart-rise, .hln-bar-chart-rise *, .hln-bar-chart-rise::before, .hln-bar-chart-rise::after, .hln-bar-chart-rise *::before, .hln-bar-chart-rise *::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.