A subtle diagonal sheen sweeps across a textured pineapple to create a polished, friendly loading state without moving the fruit.
This standalone inline SVG presents a geometric pineapple with crowned leaves, rounded outlines, and a visible diamond skin lattice. A cream-and-gold diagonal highlight travels across the fruit using CSS keyframes only. The animation loops over 3 seconds and switches to a centered static sheen when reduced motion is preferred.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" id="sva-e0889f75c9-a08-sva-08-skin-sweep-root" role="img" aria-labelledby="sva-e0889f75c9-a08-sva-08-skin-sweep-title sva-e0889f75c9-a08-sva-08-skin-sweep-desc">
<style>
#sva-e0889f75c9-a08-sva-08-skin-sweep-root .sva-08-skin-sweep-sheen {
animation: sva-e0889f75c9-a08-sva-08-skin-sweep-sheen 3s cubic-bezier(0.22, 1, 0.36, 1) infinite;
transform-box: fill-box;
transform-origin: center;
}
#sva-e0889f75c9-a08-sva-08-skin-sweep-root .sva-08-skin-sweep-facet {
animation: sva-e0889f75c9-a08-sva-08-skin-sweep-facet 3s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
#sva-e0889f75c9-a08-sva-08-skin-sweep-root .sva-08-skin-sweep-facet:nth-child(2) {
animation-delay: 0.16s;
}
#sva-e0889f75c9-a08-sva-08-skin-sweep-root .sva-08-skin-sweep-facet:nth-child(3) {
animation-delay: 0.32s;
}
@keyframes sva-e0889f75c9-a08-sva-08-skin-sweep-sheen {
0%, 100% { transform: translate(-42px, -42px); opacity: 0.16; }
50% { transform: translate(42px, 42px); opacity: 0.7; }
}
@keyframes sva-e0889f75c9-a08-sva-08-skin-sweep-facet {
0%, 100% { opacity: 0.24; }
50% { opacity: 0.72; }
}
@media (prefers-reduced-motion: reduce) {
#sva-e0889f75c9-a08-sva-08-skin-sweep-root * {
animation: none !important;
transition: none !important;
}
}
</style>
<title id="sva-e0889f75c9-a08-sva-08-skin-sweep-title">Pineapple loading with a diagonal sweeping sheen</title>
<desc id="sva-e0889f75c9-a08-sva-08-skin-sweep-desc">A friendly pineapple remains centered while a diagonal highlight moves across its diamond-textured skin, indicating an active loading state.</desc>
<defs>
<clipPath id="sva-e0889f75c9-a08-sva-08-skin-sweep-body-clip">
<path d="M64 40C45 40 31 53 31 75c0 23 13 38 33 38s33-15 33-38C97 53 83 40 64 40Z"/>
</clipPath>
</defs>
<g id="sva-e0889f75c9-a08-sva-08-skin-sweep-motif" data-motif="Pineapple">
<g id="sva-e0889f75c9-a08-sva-08-skin-sweep-crown" data-role="crowned leaves" fill="#2E7D4F" stroke="#163A2A" stroke-width="2" stroke-linejoin="round" stroke-linecap="round">
<path d="M61 44C56 35 53 25 55 14c8 7 11 16 10 28Z"/>
<path d="M65 42c0-13 4-24 11-32 3 12 0 24-7 34Z"/>
<path d="M57 43C48 37 42 29 40 20c10 3 17 10 21 20Z"/>
<path d="M70 43c7-9 15-15 25-16-4 10-11 17-22 21Z"/>
<path d="M63 42c-3-12-2-23 3-33 6 10 6 21 2 33Z"/>
</g>
<g id="sva-e0889f75c9-a08-sva-08-skin-sweep-fruit" data-role="pineapple body">
<path d="M64 40C45 40 31 53 31 75c0 23 13 38 33 38s33-15 33-38C97 53 83 40 64 40Z" fill="#F4B41A" stroke="#163A2A" stroke-width="2" stroke-linejoin="round"/>
<g id="sva-e0889f75c9-a08-sva-08-skin-sweep-lattice" data-role="diamond lattice" clip-path="url(#sva-e0889f75c9-a08-sva-08-skin-sweep-body-clip)" fill="none" stroke="#163A2A" stroke-width="1.2" stroke-linecap="round" opacity="0.48">
<path d="M24 54 64 14 104 54M20 68 64 24l44 44M19 82l45-45 45 45M22 97l42-42 42 42M32 112l32-32 32 32"/>
<path d="M24 54l40 40 40-40M20 68l44 44 44-44M19 82l45 45 45-45M22 97l42 42 42-42M32 112l32 32 32-32"/>
</g>
<g id="sva-e0889f75c9-a08-sva-08-skin-sweep-facets" data-role="highlight facets" clip-path="url(#sva-e0889f75c9-a08-sva-08-skin-sweep-body-clip)" fill="#FFE37A">
<path class="sva-08-skin-sweep-facet" d="m47 62 5-5 5 5-5 5Z" opacity="0.24"/>
<path class="sva-08-skin-sweep-facet" d="m68 53 5-5 5 5-5 5Z" opacity="0.24"/>
<path class="sva-08-skin-sweep-facet" d="m73 79 5-5 5 5-5 5Z" opacity="0.24"/>
</g>
<path id="sva-e0889f75c9-a08-sva-08-skin-sweep-sheen-band" class="sva-08-skin-sweep-sheen" data-role="diagonal sheen" d="M8 12h14l98 104h-14Z" fill="#FFFDF5" opacity="0.16" clip-path="url(#sva-e0889f75c9-a08-sva-08-skin-sweep-body-clip)"/>
<path id="sva-e0889f75c9-a08-sva-08-skin-sweep-sheen-accent" class="sva-08-skin-sweep-sheen" data-role="golden sheen edge" d="M22 12h5l98 104h-5Z" fill="#FFE37A" opacity="0.2" clip-path="url(#sva-e0889f75c9-a08-sva-08-skin-sweep-body-clip)"/>
</g>
</g>
</svg>