A polished pineapple loader that builds its diamond lattice stroke by stroke before revealing the finished fruit.
This standalone inline SVG depicts a geometric pineapple with crowned leaves, a rounded fruit silhouette, and independently animated interior lattice strokes. CSS keyframes draw the lattice in a top-left-to-bottom-right cascade, followed by a restrained body-fill reveal. It uses a transparent background and includes a reduced-motion fallback with the fully assembled pineapple visible.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" id="sva-e0889f75c9-a04-sva-04-lattice-assembly-root" role="img" aria-labelledby="sva-e0889f75c9-a04-sva-04-lattice-assembly-title sva-e0889f75c9-a04-sva-04-lattice-assembly-desc">
<title id="sva-e0889f75c9-a04-sva-04-lattice-assembly-title">Lattice Assembly — loading pineapple lattice assembling</title>
<desc id="sva-e0889f75c9-a04-sva-04-lattice-assembly-desc">A pineapple loading illustration whose interior diamond lattice draws sequentially from top left to bottom right, then reveals the filled fruit.</desc>
<style>
#sva-e0889f75c9-a04-sva-04-lattice-assembly-root .sva-04-lattice-assembly-body {
fill: #F4B41A;
fill-opacity: 0;
stroke: #163A2A;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
animation: sva-e0889f75c9-a04-sva-04-lattice-assembly-fill 3s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
#sva-e0889f75c9-a04-sva-04-lattice-assembly-root .sva-04-lattice-assembly-lattice {
fill: none;
stroke: #163A2A;
stroke-width: 1.2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 92;
stroke-dashoffset: 92;
animation-name: sva-e0889f75c9-a04-sva-04-lattice-assembly-draw;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#sva-e0889f75c9-a04-sva-04-lattice-assembly-root .sva-04-lattice-assembly-line-01 { animation-delay: 0s; }
#sva-e0889f75c9-a04-sva-04-lattice-assembly-root .sva-04-lattice-assembly-line-02 { animation-delay: 0.12s; }
#sva-e0889f75c9-a04-sva-04-lattice-assembly-root .sva-04-lattice-assembly-line-03 { animation-delay: 0.24s; }
#sva-e0889f75c9-a04-sva-04-lattice-assembly-root .sva-04-lattice-assembly-line-04 { animation-delay: 0.36s; }
#sva-e0889f75c9-a04-sva-04-lattice-assembly-root .sva-04-lattice-assembly-line-05 { animation-delay: 0.48s; }
#sva-e0889f75c9-a04-sva-04-lattice-assembly-root .sva-04-lattice-assembly-line-06 { animation-delay: 0.60s; }
#sva-e0889f75c9-a04-sva-04-lattice-assembly-root .sva-04-lattice-assembly-line-07 { animation-delay: 0.72s; }
#sva-e0889f75c9-a04-sva-04-lattice-assembly-root .sva-04-lattice-assembly-line-08 { animation-delay: 0.84s; }
#sva-e0889f75c9-a04-sva-04-lattice-assembly-root .sva-04-lattice-assembly-line-09 { animation-delay: 0.96s; }
#sva-e0889f75c9-a04-sva-04-lattice-assembly-root .sva-04-lattice-assembly-line-10 { animation-delay: 1.08s; }
#sva-e0889f75c9-a04-sva-04-lattice-assembly-root .sva-04-lattice-assembly-highlight {
fill: #FFE37A;
fill-opacity: 0.75;
stroke: none;
}
#sva-e0889f75c9-a04-sva-04-lattice-assembly-root .sva-04-lattice-assembly-leaf {
fill: #2E7D4F;
stroke: #163A2A;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
@keyframes sva-e0889f75c9-a04-sva-04-lattice-assembly-draw {
0%, 8% { stroke-dashoffset: 92; }
30%, 100% { stroke-dashoffset: 0; }
}
@keyframes sva-e0889f75c9-a04-sva-04-lattice-assembly-fill {
0%, 74% { fill-opacity: 0; }
86%, 100% { fill-opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
#sva-e0889f75c9-a04-sva-04-lattice-assembly-root .sva-04-lattice-assembly-lattice,
#sva-e0889f75c9-a04-sva-04-lattice-assembly-root .sva-04-lattice-assembly-body {
animation: none !important;
}
#sva-e0889f75c9-a04-sva-04-lattice-assembly-root .sva-04-lattice-assembly-lattice {
stroke-dashoffset: 0;
}
#sva-e0889f75c9-a04-sva-04-lattice-assembly-root .sva-04-lattice-assembly-body {
fill-opacity: 1;
}
}
</style>
<g data-motif="Pineapple" data-role="main-motif" transform="translate(0 1)">
<g data-role="crown" transform="translate(64 43)">
<path class="sva-04-lattice-assembly-leaf" d="M0 8C-5 1-7-12-3-25C5-17 8-5 5 7Z"/>
<path class="sva-04-lattice-assembly-leaf" d="M-5 8C-15 4-22-5-23-17C-12-14-4-5 1 6Z"/>
<path class="sva-04-lattice-assembly-leaf" d="M5 8C15 4 22-5 23-17C12-14 4-5-1 6Z"/>
<path class="sva-04-lattice-assembly-leaf" d="M-8 9C-19 9-28 3-33-7C-21-7-11-2-3 7Z"/>
<path class="sva-04-lattice-assembly-leaf" d="M8 9C19 9 28 3 33-7C21-7 11-2 3 7Z"/>
<path data-role="crown-center" d="M0 5C-2-6-1-16 0-26C2-16 2-6 0 5Z" fill="#2E7D4F" stroke="#163A2A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path class="sva-04-lattice-assembly-body" data-role="fruit-body" d="M37 47C32 57 30 71 34 88C37 101 48 108 64 109C80 108 91 101 94 88C98 71 96 57 91 47C78 43 50 43 37 47Z"/>
<path class="sva-04-lattice-assembly-highlight" data-role="body-highlight" d="M42 54C39 64 39 75 42 84C44 90 47 94 51 97C47 85 46 69 50 53C47 53 44 53 42 54Z"/>
<g data-role="diamond-lattice">
<path class="sva-04-lattice-assembly-lattice sva-04-lattice-assembly-line-01" d="M43 49L94 80"/>
<path class="sva-04-lattice-assembly-lattice sva-04-lattice-assembly-line-02" d="M36 58L88 91"/>
<path class="sva-04-lattice-assembly-lattice sva-04-lattice-assembly-line-03" d="M33 70L76 105"/>
<path class="sva-04-lattice-assembly-lattice sva-04-lattice-assembly-line-04" d="M33 82L58 103"/>
<path class="sva-04-lattice-assembly-lattice sva-04-lattice-assembly-line-05" d="M55 47L95 73"/>
<path class="sva-04-lattice-assembly-lattice sva-04-lattice-assembly-line-06" d="M69 46L96 63"/>
<path class="sva-04-lattice-assembly-lattice sva-04-lattice-assembly-line-07" d="M38 94L87 55"/>
<path class="sva-04-lattice-assembly-lattice sva-04-lattice-assembly-line-08" d="M34 81L78 48"/>
<path class="sva-04-lattice-assembly-lattice sva-04-lattice-assembly-line-09" d="M46 105L94 67"/>
<path class="sva-04-lattice-assembly-lattice sva-04-lattice-assembly-line-10" d="M64 108L96 82"/>
</g>
</g>
</svg>