A polished pineapple outline loader that draws the full silhouette with a clear, friendly trace motion.
A standalone pineapple loading-state SVG featuring a continuous crown-and-body outline trace with restrained interior lattice details. CSS keyframes animate the outline using stroke-dasharray and stroke-dashoffset over a 3-second loop. The asset uses a transparent background, palette-only geometry, and a reduced-motion static pose.
<svg xmlns="http://www.w3.org/2000/svg" id="sva-e0889f75c9-a07-sva-07-outline-trace-root" viewBox="0 0 128 128" role="img" aria-labelledby="sva-e0889f75c9-a07-sva-07-outline-trace-title sva-e0889f75c9-a07-sva-07-outline-trace-desc">
<title id="sva-e0889f75c9-a07-sva-07-outline-trace-title">Loading — pineapple outline tracing around the shape</title>
<desc id="sva-e0889f75c9-a07-sva-07-outline-trace-desc">A playful pineapple loader with a continuous outline drawing around the crowned fruit, then gently fading before repeating.</desc>
<style>
#sva-e0889f75c9-a07-sva-07-outline-trace-root .sva-07-outline-trace-outline {
stroke-dasharray: 430;
stroke-dashoffset: 430;
stroke-opacity: 0;
animation: sva-e0889f75c9-a07-sva-07-outline-trace-draw 3s cubic-bezier(0.22, 1, 0.36, 1) infinite;
transform-box: fill-box;
transform-origin: center;
}
@keyframes sva-e0889f75c9-a07-sva-07-outline-trace-draw {
0%, 4% {
stroke-dashoffset: 430;
stroke-opacity: 0;
}
8% {
stroke-opacity: 1;
}
73.333% {
stroke-dashoffset: 0;
stroke-opacity: 1;
}
86.667% {
stroke-dashoffset: 0;
stroke-opacity: 0.28;
}
100% {
stroke-dashoffset: 430;
stroke-opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
#sva-e0889f75c9-a07-sva-07-outline-trace-root .sva-07-outline-trace-outline {
animation: none;
stroke-dasharray: none;
stroke-dashoffset: 0;
stroke-opacity: 1;
}
}
</style>
<g id="sva-e0889f75c9-a07-sva-07-outline-trace-motif" data-motif="Pineapple">
<path id="sva-e0889f75c9-a07-sva-07-outline-trace-body" data-role="fruit body" d="M40 35C29 40 22 52 22 69c0 24 18 42 42 45 24-3 42-21 42-45 0-17-7-29-18-34-7-3-15-4-24-4s-17 1-24 4Z" fill="#F4B41A"/>
<path id="sva-e0889f75c9-a07-sva-07-outline-trace-crown" data-role="crowned leaves" d="M40 39c-5-7-6-14-11-22 10 1 16 6 20 12-2-8-2-14-1-19 8 5 13 12 15 19 3-8 8-15 16-19-1 9-2 15-5 20 7-7 15-12 24-13-6 10-6 17-13 23-8 4-16 5-23 5-8 0-15-1-22-6Z" fill="#2E7D4F"/>
<path id="sva-e0889f75c9-a07-sva-07-outline-trace-highlight" data-role="fruit highlight" d="M35 55c-5 10-6 23-2 33 4 9 10 16 19 21" fill="none" stroke="#FFE37A" stroke-width="4" stroke-linecap="round" stroke-opacity="0.72"/>
<clipPath id="sva-e0889f75c9-a07-sva-07-outline-trace-body-clip">
<path d="M40 35C29 40 22 52 22 69c0 24 18 42 42 45 24-3 42-21 42-45 0-17-7-29-18-34-7-3-15-4-24-4s-17 1-24 4Z"/>
</clipPath>
<g id="sva-e0889f75c9-a07-sva-07-outline-trace-lattice" data-role="subtle diamond lattice" clip-path="url(#sva-e0889f75c9-a07-sva-07-outline-trace-body-clip)" fill="none" stroke="#163A2A" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.32">
<path d="M17 51 48 116M28 43 59 119M40 38 71 119M52 35 83 116M64 34 95 108M76 35 105 97M88 39 112 84"/>
<path d="M111 51 80 116M100 43 69 119M88 38 57 119M76 35 45 116M64 34 33 108M52 35 23 97M40 39 16 84"/>
</g>
<path id="sva-e0889f75c9-a07-sva-07-outline-trace-outline" class="sva-07-outline-trace-outline" data-role="continuous tracing outline" d="M48 10C54 15 59 22 62 29c3-8 8-15 17-19-1 9-2 15-5 20 7-7 15-12 24-13-6 10-6 17-13 23 13 6 21 18 21 29 0 24-18 42-42 45-24-3-42-21-42-45 0-14 7-26 19-31-5-7-7-14-12-21 10 1 16 6 20 12-2-8-2-14-1-19 8 5 13 12 15 19 3-8 8-15 16-19-1 9-2 15-5 20 7-7 15-12 24-13" fill="none" stroke="#163A2A" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>