Как создать анимированную иконку Stackoverflow

Question

Ниже изображения иконок EnSO и RuSO :

Код иконки EnSO

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

Сценарий анимации:

Рисование контура корзины
Заполнение цветом контура
Последовательное появление 5-ти цветных полосок
Исчезновение полосок в обратном порядке.
Зацикливание появления, исчезновения цветных полосок.

Как реализовать данный сценарий анимации иконки?

Принимаются ответы по любой метке, указанной в вопросе

Update

Добавлена иконка RuSO. Какую иконку будете анимировать , - это на ваш выбор.

UPDATE

Конкурс получился очень насыщенный, плодотворный.
Передо мной стоит очень трудная задача, - выбрать победителя. Каждый ответ очень ценен и интересен, это показывает количество положительных оценок у каждого ответа. Но вы конечно понимаете, что победитель может быть только один. В моих силах, как-то немного смягчить задачу отдав первому месту баллы, а второму месту галочку.

Поздравляю победителя конкурса UModeL

И обладателя галочки Sevastopol', как автора работы наиболее точно выполнившего все пункты конкурсного задания

Наверняка решение организатора конкурса, как-то не совпадает с чьими то мнениями, но это бывает так, при проведении любого конкурса.
Всегда есть возможность продлить конкурс, став его спонсором и вручить приз той работе, которая на ваш взгляд наиболее достойна победы.

Только одна просьба, если откроете новый конкурс, не закрывайте его на второй день. Возможно будет больше интересных работ.

Answer 1

Решение SVG

Сначала начну реализовывать анимацию иконки с 3 по 5 пункт сценария в вопросе

Появление opacity:1
Исчезновение цветных полосок иконки opacity:0
затем после окончания одного цикла повторение процесса.

Более подробно на примере анимации двух полосок

Изначально все полоски скрыты.

У каждой полоски есть два вида анимации:
Одна анимация показывает полоску, вторая анимация делает полоску невидимой.

<path class="st1"  d="M38 86H76.6V78.3H38V86Z"> 
               <!-- 3. Анимация появления первой цветной полоски -->
           <animate id="an1" attributeName="opacity" to="1" dur="0.001s" begin="svg1.click;Back5.end+1.5s" fill="freeze" />  
                <!-- 4. Анимация исчезновения первой цветной полоски -->
             <animate id="Back1" attributeName="opacity" to="0" dur="0.001s" begin="Back2.end+0.125s" fill="freeze" />
        </path>

Сначала идет последовательный перебор анимаций показывающих полоски.

Например запуск анимации показывающий вторую полоску id="an2" начнется после окончания анимации показа первой полоски id="an1" с некоторой задержкой begin="an1.end+0.5s"

Затем идёт последовательный запуск анимаций скрывающий полоски.

Скрывается вторая полоска ( id="Back2") Её анимация начнется после окончания анимации показа (id="an2") той же полоски

begin="an2.end+0.5s"

Далее скрывается первая полоска.

Повтор полного цикла последовательных анимаций показа и сокрытия, происходит повторным запуском анимации показа первой полоски.

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 10 120 120" style="border:1px solid;">
  <style>
    .st0{fill:white; stroke:#BCBBBB; stroke-width:2;}
	.st1{fill:#f48023;opacity:0;}
	.st2{fill:#BCBBBB;}

  </style>
  <path class="st2"  d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z"> 
       
  </path>   
   
  
    <path class="st1"  d="M38 86H76.6V78.3H38V86Z"> 
	     <!--  Анимация появления первой цветной полосы -->
		   <!--  Первый запуск анимации по клику мышки и повторный запуск после окончания цикла `begin="svg1.click;Back2.end+1.5s"` -->
	   <animate id="an1" attributeName="opacity" to="1" dur="0.001s" begin="svg1.click;Back2.end+1.5s" fill="freeze" restart="whenNotActive" /> 
	   
	   <!--  Анимация исчезновения первой цветной полосы-->
	     <animate id="Back1" attributeName="opacity" to="0" dur="0.001s" begin="Back2.end+0.5s" 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.5s"
     	   fill="freeze" restart="whenNotActive" />  
		
		<!--  Анимация исчезновения второй цветной полосы -->
	     <animate id="Back2" attributeName="opacity" to="0" dur="0.001s"
    		 begin="an2.end+0.5s"  fill="freeze" restart="whenNotActive" />
  </path>	  
    
    <text x="30" y="115" font-size="14px" fill="#BCBBBB" >Click me</text>  
</svg>

Пример анимации для полного набора полосок иконки

Кликните по синему квадрату

<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;}
	.st1{fill:white;opacity:0;}

  </style>
    <rect width="100%" height="100%" fill="#005999" />
  <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. Анимация появления первой цветной полоски -->
	   <animate id="an1" attributeName="opacity" to="1" dur="0.001s" begin="svg1.click;Back5.end+1.5s" fill="freeze" />  
	        <!-- 4. Анимация исчезновения первой цветной полоски -->
	     <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>	   
</svg>

Анимация корзины иконки

Рисование контура основано на изменении параметров stroke-dasharray
Заполнение контура от цвета фона до цвета корзинки иконки

<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"> 
        <!--1. Анимация рисования контура корзины -->
     <animate id="bask" attributename="stroke-dasharray" dur="4s" begin="svg1.click" values="0,123.5 0,123.5;0,0,247,0" fill="freeze" />  
         <!-- 2. Заполнение цветом корзины -->
       <animate id="bask_fill"  attributename="fill" dur="1s" begin="bask.end" values="white;#BCBBBB" fill="freeze" />
  </path>

Ниже полный код для иконки EnSO

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 12 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"> 
        <!--1. Анимация рисования контура корзины -->
     <animate id="bask" attributename="stroke-dasharray" dur="4s" begin="svg1.click" values="0,123.5 0,123.5;0,0,247,0" fill="freeze" />  
	     <!-- 2. Заполнение цветом корзины -->
	   <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"> 
	     <!-- 3. Анимация появления первой цветной полоски -->
		   <!-- 5. Зацикливание появления, исчезновения полосок `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" /> 
	        <!-- 4. Анимация исчезновения первой цветной полоски -->
	     <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" >
         <!-- 3. Анимация появления второй цветной полоски -->
	   <animate id="an2" attributeName="opacity" to="1" dur="0.001s" begin="an1.end+0.125s" fill="freeze" />     <!-- 4. Анимация исчезновения второй цветной полоски -->
	     <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="32" y="115" font-size="14px" fill="#BCBBBB" >Click me</text>  
</svg>

Ниже полный код для иконки RuSO

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 12 120 120" style="border:1px solid;">
  <style>
    .st0{fill:#005999; stroke:white; stroke-width:2;}
	.st1{fill:white;opacity:0;}

  </style> 
    <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"> 
        <!--1. Анимация рисования контура корзины -->
     <animate id="bask"
       attributename="stroke-dasharray"
       dur="4s"
       begin="svg1.click"
       values="0,123.5 0,123.5;0,0,247,0"
       fill="freeze" />  
	     <!-- 2. Заполнение цветом корзины -->
	   <animate id="bask_fill"
        attributename="fill"
        dur="1s"
        begin="bask.end"
        values="#005999;white"
        fill="freeze" />
  </path>   
   
  
    <path class="st1"  d="M38 86H76.6V78.3H38V86Z"> 
	     <!-- 3. Анимация появления первой цветной полоски -->
		   <!-- 5. Зацикливание появления, исчезновения полосок `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" /> 
	        <!-- 4. Анимация исчезновения первой цветной полоски -->
	     <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" >
         <!-- 3. Анимация появления второй цветной полоски -->
	   <animate id="an2"
       attributeName="opacity" to="1"
       dur="0.001s"
       begin="an1.end+0.125s"
       fill="freeze" />     <!-- 4. Анимация исчезновения второй цветной полоски -->
	     <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="130" font-size="14px" fill="#005999" >Click me</text> 
</svg>

Answer 2

Решение CSS + jQuery

Вариант первый

function basket() {
$(".button").prop("disabled", true);
  $(".basket").css('border-width', '1px').animate({
    width: '140px',
    left: '50px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__1__height();
  }, 500);
}

function basket__child__1__height() {
  $(".basket").css('height', '20px');
  $(".basket>span:nth-child(1) , .basket>span:nth-child(2)").css('border-width', '1px').animate({
    height: '60px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__1__width();
  }, 500);
}

function basket__child__1__width() {
  $(".basket>span:nth-child(1) , .basket>span:nth-child(2)").animate({
    width: '20px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__3__height();
  }, 500);
}

function basket__child__3__height() {
  $(".basket>span:nth-child(3) , .basket>span:nth-child(4)").css('border-width', '1px').css('width', '1px').animate({
    height: '41px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__3__width();
  }, 500);
}

function basket__child__3__width() {
  $(".basket>span:nth-child(3) , .basket>span:nth-child(4)").animate({
    width: '50px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__background();
  }, 500);
}

function basket__background() {
  $(".basket>span:nth-child(5) , .basket>span:nth-child(1) , .basket>span:nth-child(2)").addClass('basket__span__background');
  setTimeout(function() {
    line__child__1();
  }, 2000);
}

function line__child__1() {
  $(".line>span:nth-child(1)").animate({
    height: '15px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__2();
  }, 200);
}

function line__child__2() {
  $(".line>span:nth-child(2)").animate({
    height: '15px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__3();
  }, 200);
}

function line__child__3() {
  $(".line>span:nth-child(3)").animate({
    height: '15px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__4();
  }, 200);
}

function line__child__4() {
  $(".line>span:nth-child(4)").animate({
    height: '15px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__5();
  }, 200);
}

function line__child__5() {
  $(".line>span:nth-child(5)").animate({
    height: '15px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__5__back();
  }, 500);
}

function line__child__5__back() {
  $(".line>span:nth-child(5)").animate({
    height: '0px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__4__back();
  }, 200);
}

function line__child__4__back() {
  $(".line>span:nth-child(4)").animate({
    height: '0px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__3__back();
  }, 200);
}

function line__child__3__back() {
  $(".line>span:nth-child(3)").animate({
    height: '0px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__2__back();
  }, 200);
}

function line__child__2__back() {
  $(".line>span:nth-child(2)").animate({
    height: '0px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__1__back();
  }, 200);
}

function line__child__1__back() {
  $(".line>span:nth-child(1)").animate({
    height: '0px'
  }, 100, 'swing');
  setTimeout(function() {
    basket__background__back();
  }, 200);
}

function basket__background__back() {
  $(".basket>span:nth-child(5) , .basket>span:nth-child(1) , .basket>span:nth-child(2)").removeClass('basket__span__background');
  setTimeout(function() {
    basket__child__3__width__back();
  }, 2000);
}

function basket__child__3__width__back() {
  $(".basket>span:nth-child(3) , .basket>span:nth-child(4)").animate({
    width: '1px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__3__height__back();
  }, 500);
}

function basket__child__3__height__back() {
  $(".basket>span:nth-child(3) , .basket>span:nth-child(4)").animate({
    height: '0px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__3__height__back__css();
  }, 500);
}

function basket__child__3__height__back__css() {
  $(".basket>span:nth-child(3) , .basket>span:nth-child(4)").css('width', '0px').css('border-width', '0px');
  setTimeout(function() {
    basket__child__1__width__back();
  }, 1);
}

function basket__child__1__width__back() {
  $(".basket>span:nth-child(1) , .basket>span:nth-child(2)").animate({
    width: '0px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__1__height__back();
  }, 500);
}

function basket__child__1__height__back() {
  $(".basket>span:nth-child(1) , .basket>span:nth-child(2)").animate({
    height: '0px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__1__height__back__css();
  }, 500);
}

function basket__child__1__height__back__css() {
  $(".basket>span:nth-child(1) , .basket>span:nth-child(2)").css('border-width', '0px');
  $(".basket").css('height', '0px');
  setTimeout(function() {
    basket__back();
  }, 1);
}

function basket__back() {
  $(".basket").animate({
    width: '0px',
    left: '120px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__back__css();
  }, 500);
}

function basket__back__css() {
  $(".basket").css('border-width', '0px');
  setTimeout(function() {
    basket();
  }, 2000);
}
$(".button").on('click', function() {
  function func() {
    setTimeout(function() {
      basket();
    }, 100);
  }
  func();
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #fafafb;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -120px;
  margin-left: -120px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(188, 187, 187, 1);
}

.basket {
  position: absolute;
  bottom: 50px;
  /*left: 50px;*/
  left: 120px;
  /*width: 140px;*/
  width: 0px;
  /*height: 20px;*/
  height: 0px;
  /*background: rgba(188,187,187,1);*/
  /*background: transparent;*/
  border-bottom: 1px solid rgba(188, 187, 187, 1);
  border-width: 0px;
  transition: background 2s ease-out 0s;
}

.basket>span:nth-child(1),
.basket>span:nth-child(2) {
  display: block;
  position: absolute;
  bottom: 0px;
  /*height: 60px;*/
  height: 0px;
  /*width: 20px;*/
  width: 0px;
  /*background: rgba(188,187,187,1);*/
  border-top: 1px solid rgba(188, 187, 187, 1);
  transition: background 2s ease-in-out 0s;
}

.basket>span:nth-child(1) {
  left: 0px;
  border-left: 1px solid rgba(188, 187, 187, 1);
  border-width: 0px;
}

.basket>span:nth-child(2) {
  right: 0px;
  border-right: 1px solid rgba(188, 187, 187, 1);
  border-width: 0px;
}

.basket>span:nth-child(5) {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 19px;
  /*background: rgba(188,187,187,1);*/
  transition: background 2s ease-in-out 0s;
}

.basket__span__background {
  background: rgba(188, 187, 187, 1);
  animation-name: background;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
}

@keyframes background {
  50% {
    background: rgba(51, 51, 51, 1);
  }
  100% {
    background: rgba(188, 187, 187, 1);
  }
}

.basket>span:nth-child(3),
.basket>span:nth-child(4) {
  display: block;
  position: absolute;
  top: -41px;
  /*width: 50px;*/
  width: 0px;
  /*height: 41px;*/
  height: 0px;
}

.basket>span:nth-child(3) {
  left: 20px;
  border-bottom: 1px solid rgba(188, 187, 187, 1);
  border-left: 1px solid rgba(188, 187, 187, 1);
  background-color: transparent;
  border-width: 0px;
}

.basket>span:nth-child(4) {
  right: 20px;
  border-bottom: 1px solid rgba(188, 187, 187, 1);
  border-right: 1px solid rgba(188, 187, 187, 1);
  background-color: transparent;
  border-width: 0px;
}

.line {
  position: absolute;
  bottom: 80px;
  right: 79px;
  width: 78px;
  height: 15px;
}

.line>span:nth-child(1),
.line>span:nth-child(2),
.line>span:nth-child(3),
.line>span:nth-child(4),
.line>span:nth-child(5) {
  display: block;
  position: absolute;
  bottom: 0px;
  right: -5px;
  width: 79px;
  /*width: 0px;*/
  /*height: 15px;*/
  height: 0px;
  background-color: rgba(244, 128, 36, 1);
  border: 0px solid rgba(244, 128, 36, 1);
  transform: perspective(156px) rotateY(20deg) rotate(1deg);
}

.line>span:nth-child(1) {
  width: 81px;
  /*width: 0px;*/
  bottom: -2px;
  right: -5px;
}

.line>span:nth-child(2) {
  bottom: 22px;
  right: -2px;
  transform: rotate(10deg);
}

.line>span:nth-child(3) {
  bottom: 46px;
  right: -8px;
  transform: rotate(20deg);
}

.line>span:nth-child(4) {
  bottom: 69px;
  right: -19px;
  transform: rotate(32deg);
}

.line>span:nth-child(5) {
  bottom: 90px;
  right: -36px;
  transform: rotate(46deg);
}

button {
  display: block;
  position: absolute;
  bottom: 0;
  left: 102%;
  margin: 0 auto;
  padding: 5px;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="basket"><span></span><span></span><span></span><span></span><span></span></div>
  <div class="line"><span></span><span></span><span></span><span></span><span></span></div>
  <button class="button">Пуск</button>
</div>

Вариант второй

function basket() {
  $(".button").prop("disabled", true);
  $(".basket").css('border-width', '1px').animate({
    width: '140px',
    left: '50px'
  }, 400, 'linear');
  setTimeout(function() {
    basket__child__1__height();
  }, 400);
}

function basket__child__1__height() {
  $(".basket").css('height', '20px');
  $(".basket>span:nth-child(1) , .basket>span:nth-child(2)").css('border-width', '1px').animate({
    height: '60px'
  }, 400, 'linear');
  setTimeout(function() {
    basket__child__1__width();
  }, 400);
}

function basket__child__1__width() {
  $(".basket>span:nth-child(1) , .basket>span:nth-child(2)").animate({
    width: '20px'
  }, 400, 'linear');
  setTimeout(function() {
    basket__child__3__height();
  }, 400);
}

function basket__child__3__height() {
  $(".basket>span:nth-child(3) , .basket>span:nth-child(4)").css('border-width', '1px').css('width', '1px').animate({
    height: '41px'
  }, 400, 'linear');
  setTimeout(function() {
    basket__child__3__width();
  }, 400);
}

function basket__child__3__width() {
  $(".basket>span:nth-child(3) , .basket>span:nth-child(4)").animate({
    width: '50px'
  }, 400, 'linear');
  setTimeout(function() {
    basket__background();
  }, 400);
}

function basket__background() {
  $(".basket>span:nth-child(5) , .basket>span:nth-child(1) , .basket>span:nth-child(2)").addClass('basket__span__background');
  setTimeout(function() {
    line__child__1();
  }, 2000);
}

function line__child__1() {
  $(".line>span:nth-child(1)").addClass('line__background');
  setTimeout(function() {
    line__child__2();
  }, 200);
}

function line__child__2() {
  $(".line>span:nth-child(2)").addClass('line__background');
  setTimeout(function() {
    line__child__3();
  }, 200);
}

function line__child__3() {
  $(".line>span:nth-child(3)").addClass('line__background');
  setTimeout(function() {
    line__child__4();
  }, 200);
}

function line__child__4() {
  $(".line>span:nth-child(4)").addClass('line__background');
  setTimeout(function() {
    line__child__5();
  }, 200);
}

function line__child__5() {
  $(".line>span:nth-child(5)").addClass('line__background');
  setTimeout(function() {
    line__child__5__back();
  }, 500);
}

function line__child__5__back() {
  $(".line>span:nth-child(5)").removeClass('line__background');
  setTimeout(function() {
    line__child__4__back();
  }, 200);
}

function line__child__4__back() {
  $(".line>span:nth-child(4)").removeClass('line__background');
  setTimeout(function() {
    line__child__3__back();
  }, 200);
}

function line__child__3__back() {
  $(".line>span:nth-child(3)").removeClass('line__background');
  setTimeout(function() {
    line__child__2__back();
  }, 200);
}

function line__child__2__back() {
  $(".line>span:nth-child(2)").removeClass('line__background');
  setTimeout(function() {
    line__child__1__back();
  }, 200);
}

function line__child__1__back() {
  $(".line>span:nth-child(1)").removeClass('line__background');
  setTimeout(function() {
    line__child__1();
  }, 500);
}

$(".button").on('click', function() {
  function func() {
    setTimeout(function() {
      basket();
    }, 100);
  }
  func();
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #fafafb;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -120px;
  margin-left: -120px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(188, 187, 187, 1);
}

.basket {
  position: absolute;
  bottom: 50px;
  left: 120px;
  width: 0px;
  height: 0px;
  border-bottom: 1px solid rgba(188, 187, 187, 1);
  border-width: 0px;
  transition: background 5s ease-out 0.5s;
}

.basket>span:nth-child(1),
.basket>span:nth-child(2) {
  display: block;
  position: absolute;
  bottom: 0px;
  height: 0px;
  width: 0px;
  border-top: 1px solid rgba(188, 187, 187, 1);
  transition: background 2s ease-in-out 0s;
}

.basket>span:nth-child(1) {
  left: 0px;
  border-left: 1px solid rgba(188, 187, 187, 1);
  border-width: 0px;
}

.basket>span:nth-child(2) {
  right: 0px;
  border-right: 1px solid rgba(188, 187, 187, 1);
  border-width: 0px;
}

.basket>span:nth-child(5) {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 19px;
  transition: background 2s ease-in-out 0s;
}

.basket__span__background {
  background: rgba(188, 187, 187, 1);
  animation-name: background;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
}

@keyframes background {
  50% {
    background: rgba(51, 51, 51, 1);
  }
  100% {
    background: rgba(188, 187, 187, 1);
  }
}

.basket>span:nth-child(3),
.basket>span:nth-child(4) {
  display: block;
  position: absolute;
  top: -41px;
  width: 0px;
  height: 0px;
}

.basket>span:nth-child(3) {
  left: 20px;
  border-bottom: 1px solid rgba(188, 187, 187, 1);
  border-left: 1px solid rgba(188, 187, 187, 1);
  background-color: transparent;
  border-width: 0px;
}

.basket>span:nth-child(4) {
  right: 20px;
  border-bottom: 1px solid rgba(188, 187, 187, 1);
  border-right: 1px solid rgba(188, 187, 187, 1);
  background-color: transparent;
  border-width: 0px;
}

.line {
  position: absolute;
  bottom: 80px;
  right: 79px;
  width: 78px;
  height: 15px;
}

.line>span:nth-child(1),
.line>span:nth-child(2),
.line>span:nth-child(3),
.line>span:nth-child(4),
.line>span:nth-child(5) {
  display: block;
  position: absolute;
  bottom: 0px;
  right: -5px;
  width: 79px;
  height: 15px;
  transform: perspective(156px) rotateY(20deg) rotate(1deg);
}

.line>span:nth-child(1) {
  width: 81px;
  bottom: -2px;
  right: -5px;
}

.line>span:nth-child(2) {
  bottom: 22px;
  right: -2px;
  transform: rotate(10deg);
}

.line>span:nth-child(3) {
  bottom: 46px;
  right: -8px;
  transform: rotate(20deg);
}

.line>span:nth-child(4) {
  bottom: 69px;
  right: -19px;
  transform: rotate(32deg);
}

.line>span:nth-child(5) {
  bottom: 90px;
  right: -36px;
  transform: rotate(46deg);
}

.line__background {
  background-color: rgba(244, 128, 36, 1);
}

button {
  display: block;
  position: absolute;
  bottom: 0;
  left: 102%;
  margin: 0 auto;
  padding: 5px;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="basket"><span></span><span></span><span></span><span></span><span></span></div>
  <div class="line"><span></span><span></span><span></span><span></span><span></span></div>
  <button class="button">Пуск</button>
</div>

Ещё один. Рисовать корзину теперь начинаем сверху и увеличиваем темп

//Пошаговая анимация
//Рисуем контур внутренней части корзины
function basket__child__1__width() { //Функция
  $(".button").hide(); //Скрываем кнопку запуска анимации
  $(".basket>span:nth-child(1)").css('display', 'block').css('height', '2px').animate({ //Анимация разных частей элементов
    width: '100px',
    left: '20px'
  }, 200, 'linear'); //Продолжительность и эффект анимации
  setTimeout(function() { //Анимация следующего шага, отложенная по времени
    basket__child__1__height(); //Функция следующего шага анимации
  }, 200); //Время до запуска следующего шага анимации
}

function basket__child__1__height() {
  $(".basket>span:nth-child(1)").animate({
    height: '40px'
  }, 200, 'linear');
  setTimeout(function() {
    basket__child__23__width();
  }, 200);
}
//Рисуем контур боковых частей корзины
function basket__child__23__width() {
  $(".basket>span:nth-child(2) , .basket>span:nth-child(3)").css('display', 'block').css('height', '2px').animate({
    width: '20px'
  }, 200, 'linear');
  setTimeout(function() {
    basket__child__23__height();
  }, 200);
}

function basket__child__23__height() {
  $(".basket>span:nth-child(2) , .basket>span:nth-child(3)").animate({
    height: '40px'
  }, 200, 'linear');
  setTimeout(function() {
    basket__child__45__height();
  }, 200);
}
//Рисуем контур нижней части корзины
function basket__child__45__height() {
  $(".basket>span:nth-child(4) , .basket>span:nth-child(5)").css('display', 'block').css('width', '2px').animate({
    height: '20px'
  }, 200, 'linear');
  setTimeout(function() {
    basket__child__45__width();
  }, 200);
}

function basket__child__45__width() {
  $(".basket>span:nth-child(4) , .basket>span:nth-child(5)").animate({
    width: '70px'
  }, 200, 'linear');
  setTimeout(function() {
    basket__background();
  }, 1000);
}

//Закрашиваем корзину
function basket__background() {
  $(".basket>span:nth-child(2) , .basket>span:nth-child(3) , .basket>span:nth-child(4) , .basket>span:nth-child(5)").addClass('basket__span__background');
  setTimeout(function() {
    line__child__1();
  }, 0);
}
//Рисуем линии
function line__child__1() {
  $(".line>span:nth-child(1)").addClass('line__background');
  setTimeout(function() {
    line__child__2();
  }, 100);
}

function line__child__2() {
  $(".line>span:nth-child(2)").addClass('line__background');
  setTimeout(function() {
    line__child__3();
  }, 100);
}

function line__child__3() {
  $(".line>span:nth-child(3)").addClass('line__background');
  setTimeout(function() {
    line__child__4();
  }, 100);
}

function line__child__4() {
  $(".line>span:nth-child(4)").addClass('line__background');
  setTimeout(function() {
    line__child__5();
  }, 100);
}

function line__child__5() {
  $(".line>span:nth-child(5)").addClass('line__background');
  setTimeout(function() {
    line__child__5__back();
  }, 700);
}
//Удаляем линии
function line__child__5__back() {
  $(".line>span:nth-child(5)").removeClass('line__background');
  setTimeout(function() {
    line__child__4__back();
  }, 100);
}

function line__child__4__back() {
  $(".line>span:nth-child(4)").removeClass('line__background');
  setTimeout(function() {
    line__child__3__back();
  }, 100);
}

function line__child__3__back() {
  $(".line>span:nth-child(3)").removeClass('line__background');
  setTimeout(function() {
    line__child__2__back();
  }, 100);
}

function line__child__2__back() {
  $(".line>span:nth-child(2)").removeClass('line__background');
  setTimeout(function() {
    line__child__1__back();
  }, 100);
}

function line__child__1__back() {
  $(".line>span:nth-child(1)").removeClass('line__background');
  setTimeout(function() {
    line__child__1();
  }, 500);
}
//По клику на кнопку запускаем отрисовку элемента
$(".button").on('click', function() {
  function func() {
    setTimeout(function() {
      basket__child__1__width(); //Функция первого шага анимации
    }, 100); //Время до запуска отрисовки элемента после клика на кнопку
  }
  func();
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #fafafb;
}


/*Общий контейнер*/

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -120px;
  margin-left: -120px;
  width: 240px;
  height: 240px;
}


/*Корзина*/

.basket {
  position: absolute;
  bottom: 50px;
  left: 50px;
  width: 140px;
  height: 60px;
}


/*Внутренняя часть корзины*/

.basket>span:nth-child(1) {
  display: none;
  position: absolute;
  bottom: 20px;
  left: 70px;
  height: 0px;
  width: 0px;
  border-bottom: 2px solid rgba(188, 187, 187, 1);
  border-left: 2px solid rgba(188, 187, 187, 1);
  border-right: 2px solid rgba(188, 187, 187, 1);
}


/*Боковые части корзины*/

.basket>span:nth-child(2) {
  display: none;
  position: absolute;
  top: 0px;
  right: 120px;
  height: 0px;
  width: 0px;
  border-top: 2px solid rgba(188, 187, 187, 1);
  border-left: 2px solid rgba(188, 187, 187, 1);
}

.basket>span:nth-child(3) {
  display: none;
  position: absolute;
  top: 0px;
  left: 120px;
  height: 0px;
  width: 0px;
  border-top: 2px solid rgba(188, 187, 187, 1);
  border-right: 2px solid rgba(188, 187, 187, 1);
}


/*Нижняя часть корзины*/

.basket>span:nth-child(4) {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  height: 0px;
  width: 0px;
  border-left: 2px solid rgba(188, 187, 187, 1);
  border-bottom: 2px solid rgba(188, 187, 187, 1);
}

.basket>span:nth-child(5) {
  display: none;
  position: absolute;
  top: 40px;
  right: 0;
  height: 0px;
  width: 0px;
  border-right: 2px solid rgba(188, 187, 187, 1);
  border-bottom: 2px solid rgba(188, 187, 187, 1);
}


/*Закрашивание корзины*/

.basket__span__background {
  border-width: 0px;
  background: rgba(188, 187, 187, 1);
  animation-name: background;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
}


/*Анимация закрашивания корзины*/

@keyframes background {
  20% {
    background: rgba(188, 187, 187, 0);
  }
  40% {
    background: rgba(188, 187, 187, 0.5);
  }
  60% {
    background: rgba(188, 187, 187, 1);
  }
  80% {
    background: rgba(255, 255, 255, 1);
  }
  100% {
    background: rgba(188, 187, 187, 1);
  }
}


/*Линии*/

.line {
  position: absolute;
  bottom: 80px;
  right: 79px;
  width: 78px;
  height: 15px;
}

.line>span:nth-child(1),
.line>span:nth-child(2),
.line>span:nth-child(3),
.line>span:nth-child(4),
.line>span:nth-child(5) {
  display: block;
  position: absolute;
  bottom: 0px;
  right: -5px;
  width: 81px;
  height: 15px;
  transform: perspective(156px) rotateY(20deg) rotate(1deg);
}

.line>span:nth-child(1) {
  width: 84px;
  bottom: -2px;
  right: -5px;
}

.line>span:nth-child(2) {
  bottom: 22px;
  right: -2px;
  transform: rotate(10deg);
}

.line>span:nth-child(3) {
  bottom: 46px;
  right: -8px;
  transform: rotate(20deg);
}

.line>span:nth-child(4) {
  bottom: 69px;
  right: -19px;
  transform: rotate(32deg);
}

.line>span:nth-child(5) {
  bottom: 90px;
  right: -36px;
  transform: rotate(46deg);
}


/*Закрашивание линий*/

.line__background {
  background-color: rgba(244, 128, 36, 1);
  animation-name: line__background;
  animation-duration: 0.3s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
}


/*Анимация закрашивания линий*/

@keyframes line__background {
  20% {
    background: rgba(244, 128, 36, 0);
  }
  40% {
    background: rgba(244, 128, 36, 0.5);
  }
  60% {
    background: rgba(244, 128, 36, 1);
  }
  80% {
    background: rgba(255, 255, 255, 1);
  }
  100% {
    background: rgba(244, 128, 36, 1);
  }
}


/*Кнопка пуска*/

.button {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
  border-radius: 100%;
  background-color: white;
  border: 1px solid rgba(244, 128, 36, 1);
}

.button:before {
  content: "";
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  left: 50%;
  margin-top: -12px;
  margin-left: -12px;
  border-radius: 100%;
  background-color: rgba(244, 128, 36, 1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Общий контейнер-->
<div class="container">
  <!--Корзина-->
  <div class="basket"><span></span><span></span><span></span><span></span><span></span></div>
  <!--Линии-->
  <div class="line"><span></span><span></span><span></span><span></span><span></span></div>
</div>
<!--Кнопка пуска-->
<div class="button"></div>

Answer 3

let s = c.width, // размер иконки
  w = s / 2.3, // ширина блока
  h = s / 13, // высота блока
  start = Date.now(), // время старта
  fall = 900, // продолжительность падения одного блока
  spring = 150, // продолжительность эффекта пружины
  jump = 2000, // продолжительность "прыжка" в конце
  jumpDelay = 2700, // задержка срабатываня прыжка 
  delay = i => i * (600 - i * 50), // задержка между падениями
  clamp = (v, t) => Math.min(1, Math.max(0, v) / t), // приведение к интервалу 0 - 1
  ctx = c.getContext("2d");

function draw() {
  let time = Date.now() - start; // timestamp кадра
  ctx.clearRect(0, 0, s, s); // очистка
  ctx.fillStyle = "white"; // цвет блоков и корзины

  // блоки  
  [0, 1, 2, 3, 4].forEach(block => {

    // падение
    let t = clamp(time - delay(block), fall); // интервал времени падения
    let y = s * (t * t * t * 1.5 - 1.65 - .1 * block); // сглаживание y = t^3

    // эффект пружины
    for (let i = 0; i < 5; i++) { // столько раз сколько блоков
      t = clamp(time - fall - delay(i), spring) - .6; // время срабатывания
      y += (1 - t * t) * s * .09; // сглаживание y = 1 - t^2
    }

    // подпрыгивание 
    t = clamp(time - jumpDelay, jump); // время срабатывания
    // веселая функция сглаживания "elastic"
    t = Math.pow(2, -10 * t) * Math.sin((t - .4 / 4) * (2 * Math.PI) / .4) + 1;
    let r = t * block * .075 * Math.PI; // угол для каждого блока
    let x = s * .6 - Math.cos(r) * s * .6; // положение по х
    y -= Math.sin(r) * s * .6 - s * .1 * block * t; // положение по y

    // отрисовка
    ctx.save();
    ctx.translate(s / 2 + x, s / 2 + y);
    ctx.rotate(r);
    ctx.fillRect(-w / 2, -h / 2, w, h);
    ctx.restore();
  });

  // корзина
  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>

Answer 4

Решение с использованием GSAP.

Используемые методы:

За основу взят готовый вектор от Alexandr_TT

const element = document.querySelector('svg');
const basket = document.querySelector('.basket');
const lines = document.querySelectorAll('.line');
const basketLength = basket.getTotalLength();
let onStart = false;

basket.setAttribute('stroke-dasharray', basketLength);

const timeLine = new gsap.timeline({
	paused: true,
	onStart: () => onStart = true,
	onComplete: () => timeLine.reverse(),
	onReverseComplete: () => onStart = false
});

const animateBackground = gsap.fromTo(
	element,
	{
		backgroundColor: '#ccc',
		duration: 1,
		cursor: 'pointer'
	},
	{
		backgroundColor: 'transparent',
		duration: 1,
		cursor: 'default'
	}
);
timeLine.add(animateBackground);

const animateBasket = () => {
	const tl = new gsap.timeline();

	const drawStroke = gsap.fromTo(
		basket,
		{ strokeDashoffset: basketLength, fill: 'none' },
		{ strokeDashoffset: 0, duration: 3, ease: "power1.inOut" }
	);
	const fillBasket = gsap.fromTo(
		basket,
		{ fill: 'none' },
		{ fill: '#bcbbbb', stroke: 'transparent', duration: 3, ease: "power2.inOut" }
	);
	tl.add(drawStroke);
	tl.add(fillBasket);
	return tl;
}

const animateLines = () => {
	const tl = new gsap.timeline();
	lines.forEach((line, i) => {
		const animate = gsap.fromTo(
			line,
			{ opacity: 0, scale: 0.9 },
			{
				opacity: 1,
				scale: 1,
				duration: 0.5,
				ease: "back.out(15)",
				transformOrigin: 'center'
			}
		);
		tl.add(animate, '-=0.35');
	});
	return tl;
}

timeLine.add(animateBasket());
timeLine.add(animateLines(), '-=1.8');

element.addEventListener('click', () => {
	if (!onStart) timeLine.play(0);
});

body {
	margin: 0;
	padding: 0;
}

svg {
	width: 50vw;
	min-width: 240px;
	background-color: #ccc;
}

svg path:first-child {
	fill: #bcbbbb;
	stroke: #bcbbbb;
	stroke-width: 1;
}

svg path:not(:first-child) {
	fill: #f48023;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.0/gsap.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 12 120 120">
	<path class="basket" d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z"/>
	<path class="line" d="M38 86H76.6V78.3H38V86Z" />
	<path class="line" d="M38.8 68.4L76.6 76.3 78.2 68.7 40.4 60.8 38.8 68.4Z" />
	<path class="line" d="M43.8 50.4L78.8 66.7 82 59.7 47 43.3 43.8 50.4Z" />
	<path class="line" d="M53.5 33.2L83.2 57.9 88.1 52 58.4 27.3 53.5 33.2Z" />
	<path class="line" d="M72.7 14.9L66.5 19.5 89.5 50.5 95.7 45.9 72.7 14.9Z" />
</svg>

Answer 5

CSS only...

Ну и HTML чуть-чуть)) Простыня стилей получилась добрая, из-за отказа от других технологий.

* { margin: 0; padding: 0; } body { background: url("https://i.stack.imgur.com/m9NKc.png") 0% 0% no-repeat #eee; height: 100vh; display: flex; flex-flow: row nowrap; justify-content: space-around; justify-content: space-evenly; align-items: center; }

:root { --spd_stroke: 0.8s; --spd_fill: 1s; --color: rgba(188, 187, 187, 1); }

/* Кнопка запуска и контейнер */
input[type="radio"] { width: 50px; height: 50px; transition: opacity 2s ease; }
input[type="radio"]:checked { opacity: 0; }
input[type="radio"]:checked + div { display: block; }

.so-icon {
  display: none;
  position: absolute;
  font-size: 165px;
  line-height: 1em;
  width: 1em;
  height: 1em;
}

/* Внутренняя часть лотка */
.basket-sup {
  position: absolute;
  bottom: 0.065em; left: 50%;
  transform: translatex(-50%);
  height: 0; width: 0;
  box-sizing: border-box;
  border: 0.02em solid var(--color);
  border-top: none;
  background-color: rgba(0, 128, 0, 0);
  animation: basket-sup calc(var(--spd_stroke) * 2) linear forwards;
}
@keyframes basket-sup {
  55% { height: 0; width: 0.66em; }
  100% { height: 0.285em; width: 0.66em; }
}

/* Боковые части лотка */
.basket-sup::before,
.basket-sup::after {
  content: "";
  position: absolute;
  top: 0;
  height: 0; width: 0;
  box-sizing: border-box;
  border: none;
  border-top: 0.02em solid var(--color);
  background-color: rgba(0, 128, 0, 0);
}
.basket-sup::before {
  left: 0.001em;
  margin-left: -0.02em;
  border-left: 0.02em solid var(--color);
  animation: basket-sup-before calc(var(--spd_stroke) * 1.6) linear calc(var(--spd_stroke) * 2) forwards, basket-fill calc(var(--spd_fill) * 1) linear calc(var(--spd_stroke) * 4.7) forwards;
}
@keyframes basket-sup-before {
  25% { height: 0; width: 0.075em; margin-left: -0.094em; }
  100% { height: 0.35em; width: 0.075em; margin-left: -0.094em; }
}
.basket-sup::after {
  right: 0.001em;
  margin-right: -0.02em;
  border-right: 0.02em solid var(--color);
  animation: basket-sup-after calc(var(--spd_stroke) * 1.6) linear calc(var(--spd_stroke) * 2) forwards, basket-fill calc(var(--spd_fill) * 1) linear calc(var(--spd_stroke) * 4.7) forwards;
}
@keyframes basket-sup-after {
  25% { height: 0;  width: 0.075em; margin-right: -0.094em; }
  100% { height: 0.35em; width: 0.075em; margin-right: -0.094em; }
}

/* Нижняя часть лотка */
.basket-sub {
  position: absolute;
  bottom: 0.02em; left: 50%;
  transform: translatex(-50%);
  height: 0.046em; width: 0.66em;
  border: none;
  animation: basket-fill calc(var(--spd_fill) * 1) linear calc(var(--spd_stroke) * 4.7) forwards;
}
.basket-sub::before,
.basket-sub::after {
  content: "";
  position: absolute;
  bottom: -0.02em;
  height: 0; width: 0;
  border: none;
  border-bottom: 0.02em solid var(--color);
  animation: basket-sub calc(var(--spd_stroke) * 1.2) linear calc(var(--spd_stroke) * 3.6) forwards, basket-fill calc(var(--spd_fill) * 1) linear calc(var(--spd_stroke) * 4.7) forwards;
}
.basket-sub::before {  left: -0.054em; }
.basket-sub::after { right: -0.054em; }

@keyframes basket-sub {
  100% { width: 0.39em; }
}
@keyframes basket-fill {
  0% { background-color: rgba(188, 187, 187, 0); }
  20% { background-color: rgba(188, 187, 187, 0.5); }
  30% { background-color: rgba(255, 255, 255, 1); }
  100% { background-color: rgba(188, 187, 187, 1) }
}

/* Листы */
div.lists-wrap {
  position: relative;
  display: block;
  height: 1em; width: 1.3em;
}

div.lists-wrap span {
  position: absolute;
  display: block;
  height: 72px; width: 14px;
  transform-origin: 50% 100%;
  animation: list-show 1s linear forwards, list-rotate 1.5s cubic-bezier(1, 0, 0.45, 0.7) infinite alternate;
}
.lists-wrap span:nth-child(1) {
  top: 55px; left: 109px;
  transform: rotate(-90deg);
  animation-delay: 5s, 6.0s;
}
.lists-wrap span:nth-child(2) {
  top: 37px; left: 111px;
  transform: rotate(-78deg);
  animation-delay: 5.1s, 6.1s;
}
.lists-wrap span:nth-child(3) {
  top: 19px; left: 117px;
  transform: rotate(-65deg);
  animation-delay: 5.2s, 6.2s;
}
.lists-wrap span:nth-child(4) {
  top: 2px; left: 126px;
  transform: rotate(-50deg);
  animation-delay: 5.3s, 6.3s;
}
.lists-wrap span:nth-child(5) {
  top: -11px; left: 140px;
  transform: rotate(-37deg);
  animation-delay: 5.4s, 6.4s;
}
@keyframes list-show {
  0% { box-shadow: inset 0 0 8px -1px #f4802400, 0 0 8px -1px #f4802400; }
  20% { box-shadow: inset 0 0 12px -1px #f48024ff, 0 0 12px -1px #f48024ff; }
  30% { box-shadow: inset 0 0 9px -1px #ffffffff, 0 0 16px -1px #f48024ff; }
  100% { box-shadow: inset 0 0 7px 7px #f48024ff, 0 0 8px -1px #ffffff00; }
}
@keyframes list-rotate {
  100% { height: 0px; }
}

<input type="radio">
<div class="so-icon">
  <div class="basket-sup"></div>
  <div class="basket-sub"></div>
  <div class='lists-wrap'>
    <span></span><span></span><span></span><span></span><span></span>
  </div>
</div>

Answer 6

Добавил физику на smil

#btn{
  cursor: pointer;
}

#btn rect{
  fill: #0095ff;
}

#btn text{
  fill: #fff;
}

#btn:hover rect{
  fill: #0800ff;;
}

.bottom{
  fill: rgb(188,187,187);
  transform: translateX(10px);
}

.bottom-line{
  fill: none;
  stroke: red;
  transform: translateX(10px);
}

rect{
  fill: rgb(244,128,36);
}

#path{
  fill:none;
  stroke:none;
}

.rects{
  width: 23px;
  height: 100px;
  stroke: none;
}

<svg width="150" viewBox="40 0 220 290" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="btn">
  <rect width="100" height="40"  ry="4" x="38%"/>
  <text x="105" y="28">Старт</text>
</g>
 <g> 
    <rect class="rects">
      <animateMotion dur="1s" 
                     repeatCount="1" 
                     calcMode="linear" 
                     rotate="auto" 
                     keyPoints="0.9; 1; 0; 0.85" 
                     keyTimes="0; 0.25; 0.75; 1" 
                     fill="freeze"
                     begin="btn.click"\>
            <mpath xlink:href="#path" />
      </animateMotion>
  </rect>
  <rect class="rects">
    <animateMotion dur="1s" 
                   repeatCount="1" 
                   calcMode="linear" 
                   rotate="auto" 
                   keyPoints="0.9; 1; 0; 0.70" 
                   keyTimes="0; 0.25; 0.75; 1" 
                   fill="freeze"
                   begin="btn.click"\>
          <mpath xlink:href="#path" />
    </animateMotion>
  </rect>  
     <rect class="rects">
      <animateMotion dur="1s" 
                     repeatCount="1" 
                     calcMode="linear" 
                     rotate="auto" 
                     keyPoints="0.9; 1; 0; 0.55" 
                     keyTimes="0; 0.25; 0.75; 1" 
                     fill="freeze"
                     begin="btn.click"\>
            <mpath xlink:href="#path" />
      </animateMotion>
  </rect>  
  <rect class="rects">
      <animateMotion dur="1s" 
                     repeatCount="1" 
                     calcMode="linear" 
                     rotate="auto" 
                     keyPoints="0.9; 1; 0; 0.40" 
                     keyTimes="0; 0.25; 0.75; 1" 
                     fill="freeze"
                     begin="btn.click"\>
            <mpath xlink:href="#path" />
      </animateMotion>
  </rect>  
 <rect  class="rects">
      <animateMotion dur="1s" 
                     repeatCount="1" 
                     calcMode="linear" 
                     rotate="auto" 
                     keyPoints="0.9; 1; 0; 0.25" 
                     keyTimes="0; 0.25; 0.75; 1" 
                     fill="freeze"
                     begin="btn.click"\>
            <mpath xlink:href="#path" />
      </animateMotion>
  </rect>    
  </g>
  
  
  
 <path d="M 39.989896,216.33981 H 60.40061 v 34.01786 h 140.60728 v -34.01786 h 20.41071 v 52.91666 H 40.745849 Z" class="bottom" opacity="0">
   <animate attributeName="opacity" 
           values="0;0.5;1" 
           dur="1s" 
           begin="btn.click"
           repeatCount="1"
           fill="freeze"/>  
  </path>
  
 <path d="M 39.989896,216.33981 H 60.40061 v 34.01786 h 140.60728 v -34.01786 h 20.41071 v 52.91666 H 40.745849 Z" stroke-dasharray="0 100" class="bottom-line"> 
  <animate attributeName="stroke-dasharray" 
           values="0 1000; 700 0 " 
           dur="2s" 
           begin="btn.click"
           repeatCount="1"
           fill="freeze"/>
    <animate attributeName="stroke" 
           values="rgb(188,187,187); #ccc" 
           dur="2.3s" 
           begin="btn.click"
           repeatCount="1"
           fill="freeze"/>
      <animate attributeName="stroke-width" 
           values="7;2" 
           dur="2.3s" 
           begin="btn.click"
           repeatCount="1"
           fill="freeze"/>
</path>
  
 <path d="M260,100  Q180,150 193,240"  id="path"/>
</svg>

БЛОГ НА HUSL

Как создать анимированную иконку Stackoverflow

Поздравляю победителя конкурса UModeL

Ответы (6 шт):

Решение SVG

Решение CSS + jQuery

CSS only...