Below my code icons:
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 120 120">
<style>.st0{fill:#bcbbbb}.st1{fill:#f48023} </style>
<path class="st0" d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z"/>
<path class="st1" d="M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z"/>
</svg>
Animation Script:
- Cart outline drawing animation
- Fill the outline color with a basket
- Sequential animation of the appearance of 5 color stripes
- Strips disappear in the reverse order.
- Looping appearance, disappearance of colored stripes.
Here is my attempt:
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 120 120" style="border:1px solid;">
<style>
.st0{fill:white; stroke:#BCBBBB; stroke-width:2;}
.st1{fill:#f48023;opacity:1;}
</style>
<path class="st0" d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z" stroke-dasharray="0,123.5 0,123.5" stroke-dashoffset="150">
<!-- Cart outline drawing animation -->
<animate id="bask" attributename="stroke-dasharray" dur="4s" begin="svg1.click" values="0,123.5 0,123.5;0,0,247,0" fill="freeze" />
<!-- Filling baskets of the icon color -->
<animate id="bask_fill" attributename="fill" dur="1s" begin="bask.end" values="white;#BCBBBB" fill="freeze" />
</path>
<path class="st1" d="M38 86H76.6V78.3H38V86Z">
<animateTransform attributeName="transform" type="rotate" begin="bask_fill.end" dur="4s" values="0 100 100;45 100 100;0 100 100" repeatCount="indefinite" />
</path>
<text x="30" y="115" font-size="14px" fill="#BCBBBB" >Click me</text>
</svg>
I want the colored stripes to appear one after another and after the last strip appear they should disappear in the reverse order.
I did not succeed in applying rotation to solve this problem.
Any help for a solution would be very appreciated.