A polished pineapple loader where the crown and fruit body flip independently in a playful staggered sequence, creating a clear product-refresh motion cue.
A standalone inline SVG loading animation featuring a geometric pineapple silhouette, crowned leaves, diamond lattice, and a softly scaling ground shadow. The crown and body animate with CSS keyframes only in a seamless 3-second loop. The transparent-background asset uses the supplied five-color palette and includes a reduced-motion static fallback.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" id="sva-e0889f75c9-a09-sva-09-flip-crown-body-root" role="img" aria-labelledby="sva-e0889f75c9-a09-sva-09-flip-crown-body-title sva-e0889f75c9-a09-sva-09-flip-crown-body-desc" data-concept-title="">
<title id="sva-e0889f75c9-a09-sva-09-flip-crown-body-title">Loading — pineapple crown and body flipping in sequence</title>
<desc id="sva-e0889f75c9-a09-sva-09-flip-crown-body-desc">A centered pineapple loader with a leafy crown and golden fruit body flipping independently in a staggered sequence above a softly scaling ground shadow.</desc>
<style>
#sva-e0889f75c9-a09-sva-09-flip-crown-body-root {
overflow: visible;
perspective: 420px;
transform-style: preserve-3d;
}
#sva-e0889f75c9-a09-sva-09-flip-crown-body-root .sva-09-flip-crown-body-shadow,
#sva-e0889f75c9-a09-sva-09-flip-crown-body-root .sva-09-flip-crown-body-fruit,
#sva-e0889f75c9-a09-sva-09-flip-crown-body-root .sva-09-flip-crown-body-crown {
transform-box: fill-box;
transform-style: preserve-3d;
animation-iteration-count: infinite;
animation-duration: 3s;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
#sva-e0889f75c9-a09-sva-09-flip-crown-body-root .sva-09-flip-crown-body-shadow {
transform-origin: 50% 50%;
animation-name: sva-e0889f75c9-a09-sva-09-flip-crown-body-shadow-pulse;
}
#sva-e0889f75c9-a09-sva-09-flip-crown-body-root .sva-09-flip-crown-body-fruit {
transform-origin: 50% 0%;
animation-name: sva-e0889f75c9-a09-sva-09-flip-crown-body-fruit-flip;
}
#sva-e0889f75c9-a09-sva-09-flip-crown-body-root .sva-09-flip-crown-body-crown {
transform-origin: 50% 100%;
animation-name: sva-e0889f75c9-a09-sva-09-flip-crown-body-crown-flip;
}
@keyframes sva-e0889f75c9-a09-sva-09-flip-crown-body-crown-flip {
0%, 18% { transform: rotateX(0deg); }
42%, 58% { transform: rotateX(-80deg); }
82%, 100% { transform: rotateX(0deg); }
}
@keyframes sva-e0889f75c9-a09-sva-09-flip-crown-body-fruit-flip {
0%, 22% { transform: rotateX(0deg); }
46%, 64% { transform: rotateX(70deg); }
88%, 100% { transform: rotateX(0deg); }
}
@keyframes sva-e0889f75c9-a09-sva-09-flip-crown-body-shadow-pulse {
0%, 18%, 82%, 100% { transform: scaleX(1); opacity: 0.28; }
48%, 58% { transform: scaleX(0.66); opacity: 0.14; }
}
@media (prefers-reduced-motion: reduce) {
#sva-e0889f75c9-a09-sva-09-flip-crown-body-root .sva-09-flip-crown-body-shadow,
#sva-e0889f75c9-a09-sva-09-flip-crown-body-root .sva-09-flip-crown-body-fruit,
#sva-e0889f75c9-a09-sva-09-flip-crown-body-root .sva-09-flip-crown-body-crown {
animation: none;
transform: none;
}
}
</style>
<g id="sva-e0889f75c9-a09-sva-09-flip-crown-body-motif" data-motif="Pineapple" data-concept-title="">
<ellipse class="sva-09-flip-crown-body-shadow" data-role="ground-shadow" cx="64" cy="116" rx="27" ry="4" fill="#163A2A" opacity="0.28"/>
<g id="sva-e0889f75c9-a09-sva-09-flip-crown-body-fruit" class="sva-09-flip-crown-body-fruit" data-role="body">
<path data-role="fruit-silhouette" d="M64 42C43 42 27 51 26 72c-1 22 14 38 38 38s39-16 38-38C101 51 85 42 64 42Z" fill="#F4B41A" stroke="#163A2A" stroke-width="2" stroke-linejoin="round"/>
<path data-role="fruit-highlight" d="M42 55c-6 6-8 14-7 22 1 8 4 13 8 17" fill="none" stroke="#FFE37A" stroke-width="4" stroke-linecap="round" opacity="0.85"/>
<g id="sva-e0889f75c9-a09-sva-09-flip-crown-body-lattice" data-role="diamond-lattice" fill="none" stroke="#163A2A" stroke-width="1.2" stroke-linecap="round" opacity="0.62">
<path d="M39 52l-7 10 7 10-7 10 8 11-4 6"/>
<path d="M51 47l-8 12 8 11-8 11 8 12-4 6"/>
<path d="M64 45l-8 13 8 12-8 12 8 13-5 9"/>
<path d="M77 47l8 12-8 11 8 11-8 12 4 6"/>
<path d="M89 52l7 10-7 10 7 10-8 11 4 6"/>
<path d="M32 62h64"/>
<path d="M30 74h68"/>
<path d="M33 86h62"/>
<path d="M40 97h48"/>
</g>
<path data-role="fruit-outline-accent" d="M38 101c7 6 16 9 26 9 11 0 20-3 27-9" fill="none" stroke="#FFFDF5" stroke-width="1.5" stroke-linecap="round" opacity="0.7"/>
</g>
<g id="sva-e0889f75c9-a09-sva-09-flip-crown-body-crown" class="sva-09-flip-crown-body-crown" data-role="crown">
<path data-role="leaf-left" d="M61 49C49 45 39 37 37 23c9 2 18 8 24 18Z" fill="#2E7D4F" stroke="#163A2A" stroke-width="2" stroke-linejoin="round"/>
<path data-role="leaf-left-center" d="M59 44c-7-6-12-12-15-19" fill="none" stroke="#FFE37A" stroke-width="1.6" stroke-linecap="round" opacity="0.8"/>
<path data-role="leaf-center-left" d="M63 47C54 35 53 22 58 12c7 9 9 20 7 33Z" fill="#2E7D4F" stroke="#163A2A" stroke-width="2" stroke-linejoin="round"/>
<path data-role="leaf-center-left-accent" d="M62 40c-2-9-1-17 1-24" fill="none" stroke="#FFE37A" stroke-width="1.6" stroke-linecap="round" opacity="0.8"/>
<path data-role="leaf-center-right" d="M65 47c-1-14 4-26 13-34 3 11 0 24-9 35Z" fill="#2E7D4F" stroke="#163A2A" stroke-width="2" stroke-linejoin="round"/>
<path data-role="leaf-center-right-accent" d="M68 42c3-9 7-16 12-22" fill="none" stroke="#FFE37A" stroke-width="1.6" stroke-linecap="round" opacity="0.8"/>
<path data-role="leaf-right" d="M68 49c8-11 19-17 29-17-5 12-14 20-27 23Z" fill="#2E7D4F" stroke="#163A2A" stroke-width="2" stroke-linejoin="round"/>
<path data-role="leaf-right-center" d="M72 50c8-6 15-10 22-12" fill="none" stroke="#FFE37A" stroke-width="1.6" stroke-linecap="round" opacity="0.8"/>
<path data-role="crown-base" d="M47 48c5 4 11 6 17 6s12-2 17-6" fill="none" stroke="#163A2A" stroke-width="2" stroke-linecap="round"/>
</g>
</g>
</svg>