Pie Chart Slice Lift
An extruded isometric pie chart slides its accent slice out on a spring, showing the cut walls behind it, then tucks it back. Elliptical SVG arcs with one CSS translate.
Also known as: isometric pie chart, 3d pie chart animation, hairline isometric chart.
HTML
<div class="hln-pie-slice-lift" role="img" aria-label="Pie chart with one slice pulled out"> <svg viewBox="-110 -60 220 120" aria-hidden="true"><g transform="translate(0 -2) scale(1.45)"><path d="M36.76 0 A36.77 18.38 0 0 1 18.38 15.92 L18.38 8.92 A36.77 18.38 0 0 0 36.76 -7Z"/><path d="M-18.38 15.92 A36.77 18.38 0 0 1 -36.76 0 L-36.76 -7 A36.77 18.38 0 0 0 -18.38 8.92Z"/><line class="hln-pie-slice-lift-in" x1="-35.52" y1="4.76" x2="-35.52" y2="-2.24"/><path d="M0 0 L18.38 15.92 L18.38 8.92 L0 -7Z"/><path d="M0 0 L-18.38 15.92 L-18.38 8.92 L0 -7Z"/><path d="M0 -7 L-18.38 8.92 A36.77 18.38 0 1 1 18.38 8.92Z"/><line class="hln-pie-slice-lift-in" x1="0" y1="-7" x2="-35.52" y2="-2.24"/><line class="hln-pie-slice-lift-in" x1="0" y1="-7" x2="-15.54" y2="-23.66"/><line class="hln-pie-slice-lift-in" x1="0" y1="-7" x2="33.32" y2="-14.77"/><g class="hln-pie-slice-lift-slice"><path d="M18.38 15.92 A36.77 18.38 0 0 1 -18.38 15.92 L-18.38 8.92 A36.77 18.38 0 0 0 18.38 8.92Z"/><path class="hln-pie-slice-lift-hot" d="M0 -7 L18.38 8.92 A36.77 18.38 0 0 1 -18.38 8.92Z"/></g></g></svg> </div>
CSS
.hln-pie-slice-lift {
--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-pie-slice-lift svg {
width: 100%;
height: 100%;
overflow: visible;
fill: #ffffff;
stroke: #1c1d21;
stroke-width: 1.25;
stroke-linejoin: round;
stroke-linecap: round;
}
.hln-pie-slice-lift svg * {
vector-effect: non-scaling-stroke;
}
.hln-pie-slice-lift .hln-pie-slice-lift-in {
stroke: #9a9ca3;
}
.hln-pie-slice-lift .hln-pie-slice-lift-hot {
fill: var(--c);
}
.hln-pie-slice-lift .hln-pie-slice-lift-slice {
animation: hln-pie-slice-lift-out 5s infinite;
}
@keyframes hln-pie-slice-lift-out {
0% { translate: 0 0; }
8% { translate: 0 0; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
17.9% { translate: 0 calc(8.53 * var(--u)); animation-timing-function: ease-in-out; }
22.4% { translate: 0 calc(7.74 * var(--u)); animation-timing-function: ease-in-out; }
26% { translate: 0 calc(7.9 * var(--u)); }
70% { translate: 0 calc(7.9 * var(--u)); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
84% { translate: 0 0; }
100% { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.hln-pie-slice-lift * {
animation: none !important;
}
.hln-pie-slice-lift .hln-pie-slice-lift-slice { translate: 0 calc(7.9 * var(--u)); }
}
@media (prefers-reduced-motion: reduce) {
.hln-pie-slice-lift, .hln-pie-slice-lift *, .hln-pie-slice-lift::before, .hln-pie-slice-lift::after, .hln-pie-slice-lift *::before, .hln-pie-slice-lift *::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.