How to create an animated stackoverflow icon

Question

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:

1. Cart outline drawing animation
2. Fill the outline color with a basket
3. Sequential animation of the appearance of 5 color stripes
4. Strips disappear in the reverse order.
5. 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.

Answer 1

First, I'll start to realize the animation of the icon from 3 to 5 point of the script in the question

3. The appearance of the color bar - animation from opacity: 0; to opacity:1;

4. The animation disappearance of the color bars of the opacity to 0

5. then after the end of one cycle of appearance, disappearance, a repeat of the process will begin

begin="svg1.click;Back5.end+1.5s"

Please read the comments in the code

 <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:#bcbbbb}.st1{fill:#f48023;opacity:0;} </style> <path class="st0" d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z"> </path> <path class="st1" d="M38 86H76.6V78.3H38V86Z"> <!-- 3. Animation of the appearance of the first color strip --> <animate id="an1" attributeName="opacity" to="1" dur="0.001s" begin="svg1.click;Back5.end+1.5s" fill="freeze" /> <!-- 4. The animation disappearance of the color bars of the opacity to 0 --> <animate id="Back1" attributeName="opacity" to="0" dur="0.001s" begin="Back2.end+0.125s" fill="freeze" /> </path> <path class="st1" d="M38.8 68.4L76.6 76.3 78.2 68.7 40.4 60.8 38.8 68.4Z" > <animate id="an2" attributeName="opacity" to="1" dur="0.001s" begin="an1.end+0.125s" fill="freeze" /> <animate id="Back2" attributeName="opacity" to="0" dur="0.001s" begin="Back3.end+0.125s" fill="freeze" /> </path> <path class="st1" d="M43.8 50.4L78.8 66.7 82 59.7 47 43.3 43.8 50.4Z" > <animate id="an3" attributeName="opacity" to="1" dur="0.001s" begin="an2.end+0.125s" fill="freeze" /> <animate id="Back3" attributeName="opacity" to="0" dur="0.001s" begin="Back4.end+0.125s" fill="freeze" /> </path> <path class="st1" d="M53.5 33.2L83.2 57.9 88.1 52 58.4 27.3 53.5 33.2Z" > <animate id="an4" attributeName="opacity" to="1" dur="0.001s" begin="an3.end+0.125s" fill="freeze" /> <animate id="Back4" attributeName="opacity" to="0" dur="0.001s" begin="Back5.end+0.125s" fill="freeze" /> </path> <path class="st1" d="M72.7 14.9L66.5 19.5 89.5 50.5 95.7 45.9 72.7 14.9Z" > <animate id="an5" attributeName="opacity" dur="0.001s" to="1" begin="an4.end+0.125s" fill="freeze" /> <animate id="Back5" attributeName="opacity" dur="0.001s" to="0" begin="an5.end+1s" fill="freeze" /> </path> <text x="30" y="115" font-size="14px" fill="#BCBBBB" >Click me</text> </svg>

Animation of recycle icons

1. Contour drawing is based on changing stroke-dasharray parameters

2. Contour filling from background color to basket color icons

<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>   

Below is the full code for the stackoverflow icon

 <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:0;} </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" restart="whenNotActive" /> <!-- Filling baskets of the icon color --> <animate id="bask_fill" attributename="fill" dur="1s" begin="bask.end" values="white;#BCBBBB" fill="freeze" restart="whenNotActive" /> </path> <path class="st1" d="M38 86H76.6V78.3H38V86Z"> <!-- Animation of the appearance of the first color strip --> <!-- Looping appearance, fading bands `begin="bask_fill.end;Back5.end+1.5s` --> <animate id="an1" attributeName="opacity" to="1" dur="0.001s" begin="bask_fill.end;Back5.end+1.5s" fill="freeze" restart="whenNotActive" /> <!-- Animation of the disappearance of the first color strip --> <animate id="Back1" attributeName="opacity" to="0" dur="0.001s" begin="Back2.end+0.125s" fill="freeze" restart="whenNotActive" /> </path> <path class="st1" d="M38.8 68.4L76.6 76.3 78.2 68.7 40.4 60.8 38.8 68.4Z" > <!-- Animation of the appearance of the second colored strip --> <animate id="an2" attributeName="opacity" to="1" dur="0.001s" begin="an1.end+0.125s" fill="freeze" restart="whenNotActive" /> <!-- Animation of the disappearance of the second colored strip --> <animate id="Back2" attributeName="opacity" to="0" dur="0.001s" begin="Back3.end+0.125s" fill="freeze" restart="whenNotActive" /> </path> <path class="st1" d="M43.8 50.4L78.8 66.7 82 59.7 47 43.3 43.8 50.4Z" > <animate id="an3" attributeName="opacity" to="1" dur="0.001s" begin="an2.end+0.125s" fill="freeze" restart="whenNotActive" /> <animate id="Back3" attributeName="opacity" to="0" dur="0.001s" begin="Back4.end+0.125s" fill="freeze" restart="whenNotActive" /> </path> <path class="st1" d="M53.5 33.2L83.2 57.9 88.1 52 58.4 27.3 53.5 33.2Z" > <animate id="an4" attributeName="opacity" to="1" dur="0.001s" begin="an3.end+0.125s" fill="freeze" /> <animate id="Back4" attributeName="opacity" to="0" dur="0.001s" begin="Back5.end+0.125s" fill="freeze" /> </path> <path class="st1" d="M72.7 14.9L66.5 19.5 89.5 50.5 95.7 45.9 72.7 14.9Z" > <animate id="an5" attributeName="opacity" dur="0.001s" to="1" begin="an4.end+0.125s" fill="freeze" /> <animate id="Back5" attributeName="opacity" dur="0.001s" to="0" begin="an5.end+1s" fill="freeze" /> </path> <text x="30" y="115" font-size="14px" fill="#BCBBBB" >Click me</text> </svg>

Other color scheme

 .container { width:30vw; height:30vh; } .st0{ fill:#005999; stroke:white; stroke-width:2;} .st1 { fill:white; opacity:0; }

 <div class="container"> <svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" style="border:1px solid;"> <rect width="100%" height="100%" fill="#005999" /> <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"> <animate id="bask" attributename="stroke-dasharray" dur="4s" begin="svg1.click" values="0,123.5 0,123.5;0,0,247,0" fill="freeze" restart="whenNotActive" /> <animate id="bask_fill" attributename="fill" dur="1s" begin="bask.end" values="#005999;white" fill="freeze" restart="whenNotActive" /> </path> <path class="st1" d="M38 86H76.6V78.3H38V86Z"> <animate id="an1" attributeName="opacity" to="1" dur="0.001s" begin="bask_fill.end;Back5.end+1.5s" fill="freeze" restart="whenNotActive" /> <animate id="Back1" attributeName="opacity" to="0" dur="0.001s" begin="Back2.end+0.125s" fill="freeze" restart="whenNotActive" /> </path> <path class="st1" d="M38.8 68.4L76.6 76.3 78.2 68.7 40.4 60.8 38.8 68.4Z" > <animate id="an2" attributeName="opacity" to="1" dur="0.001s" begin="an1.end+0.125s" fill="freeze" restart="whenNotActive" /> <animate id="Back2" attributeName="opacity" to="0" dur="0.001s" begin="Back3.end+0.125s" fill="freeze" restart="whenNotActive" /> </path> <path class="st1" d="M43.8 50.4L78.8 66.7 82 59.7 47 43.3 43.8 50.4Z" > <animate id="an3" attributeName="opacity" to="1" dur="0.001s" begin="an2.end+0.125s" fill="freeze" /> <animate id="Back3" attributeName="opacity" to="0" dur="0.001s" begin="Back4.end+0.125s" fill="freeze" restart="whenNotActive" /> </path> <path class="st1" d="M53.5 33.2L83.2 57.9 88.1 52 58.4 27.3 53.5 33.2Z" > <animate id="an4" attributeName="opacity" to="1" dur="0.001s" begin="an3.end+0.125s" fill="freeze" /> <animate id="Back4" attributeName="opacity" to="0" dur="0.001s" begin="Back5.end+0.125s" fill="freeze" restart="whenNotActive" /> </path> <path class="st1" d="M72.7 14.9L66.5 19.5 89.5 50.5 95.7 45.9 72.7 14.9Z" > <animate id="an5" attributeName="opacity" dur="0.001s" to="1" begin="an4.end+0.125s" fill="freeze" restart="whenNotActive"/> <animate id="Back5" attributeName="opacity" dur="0.001s" to="0" begin="an5.end+1s" fill="freeze" restart="whenNotActive" /> </path> <text x="38" y="115" font-size="10px" fill="white" >Click me</text> </svg> </div>

Answer 2

 let s = c.width, // icon size w = s / 2.3, // block width h = s / 13, // block height start = Date.now(), // start time stamp fall = 900, // fall duration spring=200, // spring duration jump = 2000, // jump duration jumpDelay = 2700, // jump delay delay = i => i * (600 - i * 50), // block delay func clamp = (v, t) => Math.min(1, Math.max(0, v) / t), // clamp to 0-1 interval ctx = c.getContext("2d"); function draw() { let time = Date.now() - start; // frame timestamp ctx.clearRect(0, 0, s, s); // clear ctx.fillStyle = "white"; // fill color // blocks [0, 1, 2, 3, 4].forEach(block => { // fall let t = clamp(time - delay(block), fall); // fall time let y = s * (t * t * t * 1.5 - 1.65 - .1 * block); // fall easing y = t^3 // spring effect for (let i = 0; i < 5; i++) { // 5 times t = clamp(time - fall - delay(i), spring) - .6; // spring time y += (1 - t * t) * s * .09; // easing y = 1 - t^2 } // jump t = clamp(time - jumpDelay, jump); // jump time // funny easing func "elastic" t = Math.pow(2, -10 * t) * Math.sin((t - .4 / 4) * (2 * Math.PI) / .4) + 1; let r = t * block * .075 * Math.PI; // block angle let x = s * .6 - Math.cos(r) * s * .6; // block x y -= Math.sin(r) * s * .6 - s * .1 * block * t; // block y // draw blocks ctx.save(); ctx.translate(s / 2 + x, s / 2 + y); ctx.rotate(r); ctx.fillRect(-w / 2, -h / 2, w, h); ctx.restore(); }); // bin let y = s * 0.14; [ [-w / 2 - h * 2, y, h, s * 0.25], [w / 2 + h, y, h, s * 0.25], [-w / 2 - h * 2, y + s * 0.2, w + h * 4, h] ] .forEach(r => ctx.fillRect(s / 2 + r[0], s / 2 + r[1], r[2], r[3])); requestAnimationFrame(draw); } addEventListener('click', () => start = Date.now()); draw();

 <canvas id=c width=175 height=175 style='background:steelblue'><canvas>