A playful pineapple loader where four textured fruit slices drop, bounce, and assemble in a friendly staggered rhythm.
This standalone inline SVG depicts a crowned pineapple built from four distinct horizontal slices with rounded outlines and restrained diamond-lattice details. CSS keyframes animate each slice with a staggered drop, overshoot, and gentle loop lift. The asset uses a transparent background, includes a reduced-motion static pose, and requires no scripts, SMIL, fonts, or external resources.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" id="sva-e0889f75c9-a06-sva-06-bouncing-slices-root" role="img" aria-labelledby="sva-e0889f75c9-a06-sva-06-bouncing-slices-title sva-e0889f75c9-a06-sva-06-bouncing-slices-desc">
<title id="sva-e0889f75c9-a06-sva-06-bouncing-slices-title">Bouncing Slices</title>
<desc id="sva-e0889f75c9-a06-sva-06-bouncing-slices-desc">Loading indicator showing four pineapple slices dropping and bouncing into an assembled fruit beneath a leafy crown.</desc>
<style>
#sva-e0889f75c9-a06-sva-06-bouncing-slices-root {
overflow: visible;
}
#sva-e0889f75c9-a06-sva-06-bouncing-slices-root .sva-06-bouncing-slices-slice {
transform-box: fill-box;
transform-origin: center;
animation-name: sva-e0889f75c9-a06-sva-06-bouncing-slices-drop;
animation-duration: 3s;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
animation-iteration-count: infinite;
}
#sva-e0889f75c9-a06-sva-06-bouncing-slices-root .sva-06-bouncing-slices-slice-1 {
animation-delay: 0s;
}
#sva-e0889f75c9-a06-sva-06-bouncing-slices-root .sva-06-bouncing-slices-slice-2 {
animation-delay: 0.1s;
}
#sva-e0889f75c9-a06-sva-06-bouncing-slices-root .sva-06-bouncing-slices-slice-3 {
animation-delay: 0.18s;
}
#sva-e0889f75c9-a06-sva-06-bouncing-slices-root .sva-06-bouncing-slices-slice-4 {
animation-delay: 0.26s;
}
@keyframes sva-e0889f75c9-a06-sva-06-bouncing-slices-drop {
0%, 100% {
opacity: 0.78;
transform: translateY(-4px) rotate(-1deg) scaleY(0.98);
}
10% {
opacity: 0.52;
transform: translateY(-18px) rotate(1deg) scaleY(0.96);
}
28% {
opacity: 1;
transform: translateY(2px) rotate(-1deg) scaleY(1.04);
}
42% {
transform: translateY(-2px) rotate(0.7deg) scaleY(0.985);
}
57%, 86% {
opacity: 1;
transform: translateY(0) rotate(0) scaleY(1);
}
}
@media (prefers-reduced-motion: reduce) {
#sva-e0889f75c9-a06-sva-06-bouncing-slices-root .sva-06-bouncing-slices-slice {
animation: none;
opacity: 1;
transform: none;
}
}
</style>
<g id="sva-e0889f75c9-a06-sva-06-bouncing-slices-motif" data-motif="Pineapple" data-role="pineapple loader">
<g id="sva-e0889f75c9-a06-sva-06-bouncing-slices-crown" data-role="crown">
<path d="M63.5 42.5C60.8 34.7 58.8 25.1 60.7 15c5.3 5.1 8.1 10.5 8.5 17.2C70.4 22.8 75.1 15.9 82 11.8c.1 9.7-3 18-9 24.9 5-5.4 11.5-8.4 18.6-8.8-3.2 8.5-9.3 14.1-18.2 16.8z" fill="#2E7D4F" stroke="#163A2A" stroke-width="2" stroke-linejoin="round" data-role="crown leaves"/>
<path d="M63.5 42.5C57.6 34.8 51.9 27.8 45 24.9c.4 8.9 4.9 16.2 13.4 21.8-5-3.8-10.9-5.1-17-3.7 4.5 7.1 11.4 10.3 20.7 9.7z" fill="#2E7D4F" stroke="#163A2A" stroke-width="2" stroke-linejoin="round" data-role="crown leaves"/>
<path d="M64 43c1.8-8.1 1.4-16.4-1.2-24.8" fill="none" stroke="#FFE37A" stroke-width="1.5" stroke-linecap="round" data-role="crown highlight"/>
</g>
<g class="sva-06-bouncing-slices-slice sva-06-bouncing-slices-slice-1" data-role="top fruit slice">
<path d="M49 42.5C53.1 40.9 58.1 40 64 40s10.9.9 15 2.5l3.5 13.7c-5.2 2-11.4 3-18.5 3s-13.3-1-18.5-3z" fill="#F4B41A" stroke="#163A2A" stroke-width="2" stroke-linejoin="round"/>
<path d="M53 44.5l11 10.9 11-10.9M58.5 41.5l10.8 10.8M69.2 41.5L58.4 52.3" fill="none" stroke="#163A2A" stroke-opacity="0.42" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" data-role="diamond lattice"/>
<path d="M53 44c3.5-1.2 7.2-1.8 11-1.8 3.8 0 7.5.6 11 1.8" fill="none" stroke="#FFE37A" stroke-width="1.7" stroke-linecap="round" data-role="slice highlight"/>
</g>
<g class="sva-06-bouncing-slices-slice sva-06-bouncing-slices-slice-2" data-role="upper-middle fruit slice">
<path d="M45.5 57.2c5.4 1.8 11.6 2.7 18.5 2.7s13.1-.9 18.5-2.7l3.2 16.1c-6.1 2.1-13.3 3.2-21.7 3.2s-15.6-1.1-21.7-3.2z" fill="#F4B41A" stroke="#163A2A" stroke-width="2" stroke-linejoin="round"/>
<path d="M49.5 60.5l14.5 13.2 14.5-13.2M56 59l13.4 12.3M72.6 59L59.2 71.3" fill="none" stroke="#163A2A" stroke-opacity="0.42" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" data-role="diamond lattice"/>
<path d="M49 59.5c4.8 1.3 9.8 1.9 15 1.9s10.2-.6 15-1.9" fill="none" stroke="#FFE37A" stroke-width="1.7" stroke-linecap="round" data-role="slice highlight"/>
</g>
<g class="sva-06-bouncing-slices-slice sva-06-bouncing-slices-slice-3" data-role="lower-middle fruit slice">
<path d="M42.3 74.1c6.2 2.1 13.4 3.2 21.7 3.2s15.5-1.1 21.7-3.2l3.1 16.6c-7 2.1-15.3 3.2-24.8 3.2s-17.8-1.1-24.8-3.2z" fill="#F4B41A" stroke="#163A2A" stroke-width="2" stroke-linejoin="round"/>
<path d="M46.8 77.4l17.2 13.7 17.2-13.7M54 76.4l16.1 12.8M74 76.4L57.9 89.2" fill="none" stroke="#163A2A" stroke-opacity="0.42" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" data-role="diamond lattice"/>
<path d="M46 76.5c5.8 1.4 11.8 2.1 18 2.1s12.2-.7 18-2.1" fill="none" stroke="#FFE37A" stroke-width="1.7" stroke-linecap="round" data-role="slice highlight"/>
</g>
<g class="sva-06-bouncing-slices-slice sva-06-bouncing-slices-slice-4" data-role="bottom fruit slice">
<path d="M39.2 91.3c7 2.1 15.3 3.2 24.8 3.2s17.8-1.1 24.8-3.2c-1.2 7.1-3.2 13.4-6.2 18.5-5.5 1.7-11.7 2.5-18.6 2.5s-13.1-.8-18.6-2.5c-3-5.1-5-11.4-6.2-18.5z" fill="#F4B41A" stroke="#163A2A" stroke-width="2" stroke-linejoin="round" data-role="fruit base"/>
<path d="M44.2 94.1l19.8 14.6 19.8-14.6M51.4 93.8l18.8 13.9M76.6 93.8l-18.8 13.9" fill="none" stroke="#163A2A" stroke-opacity="0.42" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" data-role="diamond lattice"/>
<path d="M43.5 93.5c6.5 1.5 13.3 2.2 20.5 2.2s14-.7 20.5-2.2" fill="none" stroke="#FFE37A" stroke-width="1.7" stroke-linecap="round" data-role="slice highlight"/>
</g>
</g>
</svg>