A polished pineapple loading state with a masked juice level that rises inside the fruit for a clear, friendly progress cue.
This standalone inline SVG depicts a geometric pineapple with a clipped internal liquid fill, lattice details, crowned leaves, and a restrained surface highlight. CSS keyframes animate the juice rise without scripts or SMIL. The animation loops over 3 seconds and switches to a centered, partially filled static pose for reduced-motion preferences.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" id="sva-e0889f75c9-a05-sva-05-juice-fill-root" role="img" aria-labelledby="sva-e0889f75c9-a05-sva-05-juice-fill-title sva-e0889f75c9-a05-sva-05-juice-fill-desc">
<title id="sva-e0889f75c9-a05-sva-05-juice-fill-title">Loading — pineapple filling with juice</title>
<desc id="sva-e0889f75c9-a05-sva-05-juice-fill-desc">A pineapple loading animation in which a clipped yellow juice level rises inside the fruit and settles beneath a subtle highlight.</desc>
<style>
#sva-e0889f75c9-a05-sva-05-juice-fill-root .sva-05-juice-fill-juice,
#sva-e0889f75c9-a05-sva-05-juice-fill-root .sva-05-juice-fill-highlight {
transform-box: fill-box;
transform-origin: 50% 100%;
}
#sva-e0889f75c9-a05-sva-05-juice-fill-root .sva-05-juice-fill-juice {
transform: translateY(18px);
animation: sva-e0889f75c9-a05-sva-05-juice-fill-rise 3s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
#sva-e0889f75c9-a05-sva-05-juice-fill-root .sva-05-juice-fill-highlight {
transform: translateY(18px);
opacity: 0.15;
animation: sva-e0889f75c9-a05-sva-05-juice-fill-glint 3s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes sva-e0889f75c9-a05-sva-05-juice-fill-rise {
0%, 100% { transform: translateY(18px); }
72% { transform: translateY(0); }
82% { transform: translateY(-1px); }
88% { transform: translateY(0); }
}
@keyframes sva-e0889f75c9-a05-sva-05-juice-fill-glint {
0%, 100% { transform: translateY(18px); opacity: 0.12; }
70% { transform: translateY(0); opacity: 0.45; }
80% { transform: translateY(-1px); opacity: 0.9; }
88% { transform: translateY(0); opacity: 0.62; }
}
@media (prefers-reduced-motion: reduce) {
#sva-e0889f75c9-a05-sva-05-juice-fill-root .sva-05-juice-fill-juice,
#sva-e0889f75c9-a05-sva-05-juice-fill-root .sva-05-juice-fill-highlight {
animation: none !important;
}
#sva-e0889f75c9-a05-sva-05-juice-fill-root .sva-05-juice-fill-juice {
transform: translateY(4px);
}
#sva-e0889f75c9-a05-sva-05-juice-fill-root .sva-05-juice-fill-highlight {
transform: translateY(4px);
opacity: 0.62;
}
}
</style>
<defs>
<clipPath id="sva-e0889f75c9-a05-sva-05-juice-fill-body-clip" clipPathUnits="userSpaceOnUse">
<path d="M64 39C45 39 33 53 30 72C28 91 37 108 49 113C58 117 70 117 79 113C91 108 100 91 98 72C95 53 83 39 64 39Z"/>
</clipPath>
</defs>
<g id="sva-e0889f75c9-a05-sva-05-juice-fill-motif" data-motif="Pineapple">
<g id="sva-e0889f75c9-a05-sva-05-juice-fill-crown" data-role="crowned leaves" fill="#2E7D4F" stroke="#163A2A" stroke-width="2" stroke-linejoin="round" stroke-linecap="round">
<path d="M58 43C51 34 48 25 51 14C59 19 63 28 63 40Z"/>
<path d="M64 41C62 29 65 17 72 9C76 20 74 31 68 42Z"/>
<path d="M69 43C72 30 80 21 89 18C87 30 79 40 71 46Z"/>
<path d="M56 44C48 39 40 31 38 23C48 24 56 31 61 41Z"/>
</g>
<path id="sva-e0889f75c9-a05-sva-05-juice-fill-body" d="M64 39C45 39 33 53 30 72C28 91 37 108 49 113C58 117 70 117 79 113C91 108 100 91 98 72C95 53 83 39 64 39Z" fill="#F4B41A" stroke="#163A2A" stroke-width="2.2" stroke-linejoin="round"/>
<g id="sva-e0889f75c9-a05-sva-05-juice-fill-liquid" clip-path="url(#sva-e0889f75c9-a05-sva-05-juice-fill-body-clip)" data-role="rising juice">
<rect class="sva-05-juice-fill-juice" x="24" y="49" width="80" height="72" fill="#FFE37A"/>
<path class="sva-05-juice-fill-highlight" d="M27 49H101V51H27Z" fill="#FFFDF5"/>
</g>
<g id="sva-e0889f75c9-a05-sva-05-juice-fill-lattice" clip-path="url(#sva-e0889f75c9-a05-sva-05-juice-fill-body-clip)" data-role="diamond lattice" fill="none" stroke="#163A2A" stroke-width="1.2" stroke-linecap="round" opacity="0.42">
<path d="M25 57L82 119M35 46L96 111M49 40L103 96M64 39L105 80M79 43L101 66"/>
<path d="M103 57L46 119M93 46L32 111M79 40L25 96M64 39L23 80M49 43L27 66"/>
</g>
<path id="sva-e0889f75c9-a05-sva-05-juice-fill-inner-edge" d="M64 42C48 42 38 54 35 72C33 87 40 102 51 107C59 111 69 111 77 107C88 102 95 87 93 72C90 54 80 42 64 42Z" fill="none" stroke="#FFFDF5" stroke-width="1" opacity="0.28"/>
</g>
</svg>