A friendly pineapple loader with a traveling crown wave that adds playful motion while keeping the fruit body stable and recognizable.
Leaf Wave is a standalone inline SVG loading animation featuring a geometric pineapple, diamond lattice, and five independently waving crown leaves. It uses CSS keyframes only with a seamless 3-second loop and includes a reduced-motion static pose. The transparent-background asset uses the Pineapple Play palette and rounded product-illustration styling.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" id="sva-e0889f75c9-a03-sva-03-leaf-wave-root" role="img" aria-labelledby="sva-e0889f75c9-a03-sva-03-leaf-wave-title sva-e0889f75c9-a03-sva-03-leaf-wave-desc">
<title id="sva-e0889f75c9-a03-sva-03-leaf-wave-title">Leaf Wave — loading pineapple</title>
<desc id="sva-e0889f75c9-a03-sva-03-leaf-wave-desc">Loading animation showing a pineapple with five crown leaves waving from left to right and back while the fruit remains steady.</desc>
<style>
#sva-e0889f75c9-a03-sva-03-leaf-wave-root .sva-03-leaf-wave-leaf {
transform-box: view-box;
transform-origin: center;
animation-duration: 3s;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
animation-iteration-count: infinite;
animation-name: sva-e0889f75c9-a03-sva-03-leaf-wave-crown-wave;
}
#sva-e0889f75c9-a03-sva-03-leaf-wave-root .sva-03-leaf-wave-leaf-1 { transform-origin: 47px 50px; animation-delay: 0s; }
#sva-e0889f75c9-a03-sva-03-leaf-wave-root .sva-03-leaf-wave-leaf-2 { transform-origin: 55px 48px; animation-delay: -0.12s; }
#sva-e0889f75c9-a03-sva-03-leaf-wave-root .sva-03-leaf-wave-leaf-3 { transform-origin: 64px 46px; animation-delay: -0.24s; }
#sva-e0889f75c9-a03-sva-03-leaf-wave-root .sva-03-leaf-wave-leaf-4 { transform-origin: 73px 48px; animation-delay: -0.36s; }
#sva-e0889f75c9-a03-sva-03-leaf-wave-root .sva-03-leaf-wave-leaf-5 { transform-origin: 81px 50px; animation-delay: -0.48s; }
#sva-e0889f75c9-a03-sva-03-leaf-wave-root .sva-03-leaf-wave-gem {
animation: sva-e0889f75c9-a03-sva-03-leaf-wave-gem-ripple 3s cubic-bezier(0.22, 1, 0.36, 1) infinite;
transform-box: fill-box;
transform-origin: center;
}
@keyframes sva-e0889f75c9-a03-sva-03-leaf-wave-crown-wave {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(-16deg); }
40% { transform: rotate(0deg); }
60% { transform: rotate(16deg); }
80% { transform: rotate(0deg); }
}
@keyframes sva-e0889f75c9-a03-sva-03-leaf-wave-gem-ripple {
0%, 100% { opacity: 0.72; transform: scale(1); }
46% { opacity: 1; transform: scale(1.16); }
68% { opacity: 0.72; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
#sva-e0889f75c9-a03-sva-03-leaf-wave-root * { animation: none !important; }
#sva-e0889f75c9-a03-sva-03-leaf-wave-root .sva-03-leaf-wave-leaf-1 { transform: rotate(-6deg); }
#sva-e0889f75c9-a03-sva-03-leaf-wave-root .sva-03-leaf-wave-leaf-2 { transform: rotate(4deg); }
#sva-e0889f75c9-a03-sva-03-leaf-wave-root .sva-03-leaf-wave-leaf-3 { transform: rotate(10deg); }
#sva-e0889f75c9-a03-sva-03-leaf-wave-root .sva-03-leaf-wave-leaf-4 { transform: rotate(4deg); }
#sva-e0889f75c9-a03-sva-03-leaf-wave-root .sva-03-leaf-wave-leaf-5 { transform: rotate(-6deg); }
}
</style>
<g id="sva-e0889f75c9-a03-sva-03-leaf-wave-motif" data-motif="Pineapple">
<g id="sva-e0889f75c9-a03-sva-03-leaf-wave-crown" data-role="crown-leaves" fill="#2E7D4F" stroke="#163A2A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path id="sva-e0889f75c9-a03-sva-03-leaf-wave-leaf-1" class="sva-03-leaf-wave-leaf sva-03-leaf-wave-leaf-1" data-role="leaf-left" d="M47 51C41 44 38 32 41 19C49 26 51 39 47 51Z"/>
<path id="sva-e0889f75c9-a03-sva-03-leaf-wave-leaf-2" class="sva-03-leaf-wave-leaf sva-03-leaf-wave-leaf-2" data-role="leaf-left-center" d="M55 48C51 38 52 24 58 13C64 25 62 38 55 48Z"/>
<path id="sva-e0889f75c9-a03-sva-03-leaf-wave-leaf-3" class="sva-03-leaf-wave-leaf sva-03-leaf-wave-leaf-3" data-role="leaf-center" d="M64 46C61 34 64 20 70 10C74 24 71 38 64 46Z"/>
<path id="sva-e0889f75c9-a03-sva-03-leaf-wave-leaf-4" class="sva-03-leaf-wave-leaf sva-03-leaf-wave-leaf-4" data-role="leaf-right-center" d="M73 48C73 36 78 23 87 17C87 31 81 42 73 48Z"/>
<path id="sva-e0889f75c9-a03-sva-03-leaf-wave-leaf-5" class="sva-03-leaf-wave-leaf sva-03-leaf-wave-leaf-5" data-role="leaf-right" d="M81 51C84 39 91 30 101 27C98 40 90 49 81 51Z"/>
</g>
<circle id="sva-e0889f75c9-a03-sva-03-leaf-wave-gem" class="sva-03-leaf-wave-gem" data-role="crown-gem" cx="64" cy="45" r="3.2" fill="#FFE37A" opacity="0.72"/>
<g id="sva-e0889f75c9-a03-sva-03-leaf-wave-fruit" data-role="fruit-body">
<path id="sva-e0889f75c9-a03-sva-03-leaf-wave-body" data-role="pineapple-body" d="M64 40C48 40 38 49 36 68C34 86 42 106 64 112C86 106 94 86 92 68C90 49 80 40 64 40Z" fill="#F4B41A" stroke="#163A2A" stroke-width="2" stroke-linejoin="round"/>
<clipPath id="sva-e0889f75c9-a03-sva-03-leaf-wave-body-clip">
<path d="M64 40C48 40 38 49 36 68C34 86 42 106 64 112C86 106 94 86 92 68C90 49 80 40 64 40Z"/>
</clipPath>
<g id="sva-e0889f75c9-a03-sva-03-leaf-wave-lattice" data-role="diamond-lattice" clip-path="url(#sva-e0889f75c9-a03-sva-03-leaf-wave-body-clip)" fill="none" stroke="#FFFDF5" stroke-width="1.2" stroke-opacity="0.72" stroke-linecap="round">
<path d="M25 54L72 119M36 43L83 108M47 37L94 101M58 35L105 90M69 35L108 77M80 40L109 63"/>
<path d="M103 54L56 119M92 43L45 108M81 37L34 101M70 35L23 90M59 35L20 77M48 40L19 63"/>
</g>
<path id="sva-e0889f75c9-a03-sva-03-leaf-wave-highlight" data-role="fruit-highlight" d="M49 53C43 63 43 78 48 88" fill="none" stroke="#FFE37A" stroke-width="3" stroke-linecap="round" stroke-opacity="0.78"/>
</g>
</g>
</svg>