A playful pineapple loader that gently pulses as its diamond lattice flickers with phase-shifted life.
A standalone inline SVG of a geometric pineapple with a crowned silhouette, rounded outlines, cream facet highlights, and an internal diamond lattice. CSS keyframes animate the whole fruit pulse while lattice nodes softly pop at staggered phases. The asset uses a transparent background and includes a reduced-motion static pose.
<svg xmlns="http://www.w3.org/2000/svg" id="sva-e0889f75c9-a02-sva-02-fruit-pulse-root" viewBox="0 0 128 128" role="img" aria-labelledby="sva-e0889f75c9-a02-sva-02-fruit-pulse-title sva-e0889f75c9-a02-sva-02-fruit-pulse-desc">
<title id="sva-e0889f75c9-a02-sva-02-fruit-pulse-title">Loading — pineapple gently pulsing</title>
<desc id="sva-e0889f75c9-a02-sva-02-fruit-pulse-desc">A centered pineapple loader with a softly pulsing golden fruit body and subtly animated diamond lattice details.</desc>
<style>
#sva-e0889f75c9-a02-sva-02-fruit-pulse-root .sva-02-fruit-pulse-body {
transform-box: fill-box;
transform-origin: center;
animation: sva-e0889f75c9-a02-sva-02-fruit-pulse-body-motion 3s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
#sva-e0889f75c9-a02-sva-02-fruit-pulse-root .sva-02-fruit-pulse-node {
transform-box: fill-box;
transform-origin: center;
animation: sva-e0889f75c9-a02-sva-02-fruit-pulse-node-motion 3s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
#sva-e0889f75c9-a02-sva-02-fruit-pulse-root .sva-02-fruit-pulse-reveal {
stroke-dasharray: 1 8;
animation: sva-e0889f75c9-a02-sva-02-fruit-pulse-reveal-motion 3s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
#sva-e0889f75c9-a02-sva-02-fruit-pulse-root .sva-02-fruit-pulse-node:nth-child(2) { animation-delay: -0.12s; }
#sva-e0889f75c9-a02-sva-02-fruit-pulse-root .sva-02-fruit-pulse-node:nth-child(3) { animation-delay: -0.24s; }
#sva-e0889f75c9-a02-sva-02-fruit-pulse-root .sva-02-fruit-pulse-node:nth-child(4) { animation-delay: -0.36s; }
#sva-e0889f75c9-a02-sva-02-fruit-pulse-root .sva-02-fruit-pulse-node:nth-child(5) { animation-delay: -0.48s; }
#sva-e0889f75c9-a02-sva-02-fruit-pulse-root .sva-02-fruit-pulse-node:nth-child(6) { animation-delay: -0.60s; }
#sva-e0889f75c9-a02-sva-02-fruit-pulse-root .sva-02-fruit-pulse-node:nth-child(7) { animation-delay: -0.72s; }
#sva-e0889f75c9-a02-sva-02-fruit-pulse-root .sva-02-fruit-pulse-node:nth-child(8) { animation-delay: -0.84s; }
#sva-e0889f75c9-a02-sva-02-fruit-pulse-root .sva-02-fruit-pulse-node:nth-child(9) { animation-delay: -0.96s; }
#sva-e0889f75c9-a02-sva-02-fruit-pulse-root .sva-02-fruit-pulse-node:nth-child(10) { animation-delay: -1.08s; }
@keyframes sva-e0889f75c9-a02-sva-02-fruit-pulse-body-motion {
0%, 100% { transform: scale(1); }
46% { transform: scale(1.06); }
72% { transform: scale(0.995); }
}
@keyframes sva-e0889f75c9-a02-sva-02-fruit-pulse-node-motion {
0%, 100% { opacity: 0.62; transform: scale(0.82); }
42% { opacity: 1; transform: scale(1.18); }
70% { opacity: 0.74; transform: scale(0.94); }
}
@keyframes sva-e0889f75c9-a02-sva-02-fruit-pulse-reveal-motion {
0% { stroke-dashoffset: 9; opacity: 0.35; }
18%, 100% { stroke-dashoffset: 0; opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
#sva-e0889f75c9-a02-sva-02-fruit-pulse-root .sva-02-fruit-pulse-body,
#sva-e0889f75c9-a02-sva-02-fruit-pulse-root .sva-02-fruit-pulse-node,
#sva-e0889f75c9-a02-sva-02-fruit-pulse-root .sva-02-fruit-pulse-reveal {
animation: none !important;
}
#sva-e0889f75c9-a02-sva-02-fruit-pulse-root .sva-02-fruit-pulse-body { transform: scale(1.02); }
#sva-e0889f75c9-a02-sva-02-fruit-pulse-root .sva-02-fruit-pulse-node { opacity: 0.82; transform: scale(1); }
#sva-e0889f75c9-a02-sva-02-fruit-pulse-root .sva-02-fruit-pulse-reveal { opacity: 0.9; stroke-dashoffset: 0; }
}
</style>
<defs>
<clipPath id="sva-e0889f75c9-a02-sva-02-fruit-pulse-body-clip">
<path d="M64 33C45 33 31 44 29 64c-2 20 8 40 35 43 27-3 37-23 35-43-2-20-16-31-35-31Z"/>
</clipPath>
</defs>
<g id="sva-e0889f75c9-a02-sva-02-fruit-pulse-motif" data-motif="Pineapple" aria-label="Pineapple fruit pulse">
<g id="sva-e0889f75c9-a02-sva-02-fruit-pulse-crown" data-role="crown" fill="#2E7D4F" stroke="#163A2A" stroke-width="2" stroke-linejoin="round" stroke-linecap="round">
<path d="M62 37 49 14c-1-2 1-3 3-2l13 13 1-24c0-2 3-2 3 0l3 24 12-18c1-2 4-1 3 1L78 38Z"/>
<path d="M57 37 39 23c-2-2-1-4 2-3l19 8Z"/>
<path d="M72 37 91 24c2-2 4 0 2 2L75 41Z"/>
<path d="M54 39 43 34c-3-1-2-4 1-4l15 5Z"/>
</g>
<g id="sva-e0889f75c9-a02-sva-02-fruit-pulse-body" class="sva-02-fruit-pulse-body" data-role="fruit-body">
<path d="M64 33C45 33 31 44 29 64c-2 20 8 40 35 43 27-3 37-23 35-43-2-20-16-31-35-31Z" fill="#F4B41A" stroke="#163A2A" stroke-width="2.4" stroke-linejoin="round"/>
<g id="sva-e0889f75c9-a02-sva-02-fruit-pulse-facets" clip-path="url(#sva-e0889f75c9-a02-sva-02-fruit-pulse-body-clip)" data-role="facets">
<path d="M30 49c12-11 25-15 40-13-13 5-22 14-28 27-5 10-10 12-16 7Z" fill="#FFE37A" opacity="0.72"/>
<path d="M39 47c8-6 16-9 24-10-7 5-13 12-17 20Z" fill="#FFFDF5" opacity="0.72"/>
<path d="M70 35c13 4 22 13 26 27-8-7-16-11-25-12Z" fill="#FFE37A" opacity="0.35"/>
<g id="sva-e0889f75c9-a02-sva-02-fruit-pulse-lattice" data-role="diamond-lattice" fill="none" stroke="#163A2A" stroke-width="1.2" stroke-linecap="round" opacity="0.78">
<path d="M25 51 64 112M29 40 76 111M42 31 91 99M56 29 99 79M72 31 99 60"/>
<path d="M28 79 72 28M34 94 89 35M47 105 99 51M63 109 101 72"/>
</g>
<g id="sva-e0889f75c9-a02-sva-02-fruit-pulse-nodes" data-role="lattice-nodes" fill="#FFFDF5" stroke="#163A2A" stroke-width="0.8">
<circle class="sva-02-fruit-pulse-node sva-02-fruit-pulse-reveal" cx="42" cy="51" r="1.8"/>
<circle class="sva-02-fruit-pulse-node" cx="55" cy="48" r="1.8"/>
<circle class="sva-02-fruit-pulse-node" cx="68" cy="48" r="1.8"/>
<circle class="sva-02-fruit-pulse-node" cx="80" cy="53" r="1.8"/>
<circle class="sva-02-fruit-pulse-node" cx="38" cy="65" r="1.8"/>
<circle class="sva-02-fruit-pulse-node" cx="51" cy="64" r="1.8"/>
<circle class="sva-02-fruit-pulse-node" cx="65" cy="65" r="1.8"/>
<circle class="sva-02-fruit-pulse-node" cx="79" cy="67" r="1.8"/>
<circle class="sva-02-fruit-pulse-node" cx="46" cy="80" r="1.8"/>
<circle class="sva-02-fruit-pulse-node" cx="61" cy="82" r="1.8"/>
</g>
</g>
<path d="M64 33C45 33 31 44 29 64c-2 20 8 40 35 43 27-3 37-23 35-43-2-20-16-31-35-31Z" fill="none" stroke="#163A2A" stroke-width="2.4" stroke-linejoin="round"/>
</g>
</g>
</svg>