3

Есть блоки которые нужно анимировать: введите сюда описание изображения

[https://codepen.io/skynetwind/pen/JjYVVyO][2]

Подскажите как сделать?

Получается только контуром анимировать: https://codepen.io/skynetwind/pen/rNOgdQB

Справа моя неудачная анимация.... Результат Все классно, только толщина линий после анимации получается толще. И время на анимацию не более 6 секунд.

19
  • Там все ок (с лампочкой), я просто стили брал а не заметил что код SVG - еще менялся. К другой картинке не получается применить этот же класс. 26 мая 2020 в 11:50
  • Честно сказать я не знаю как. Подскажите... Пользуюсь несколько дней сервисом. 26 мая 2020 в 12:21
  • Вроде бы нашел как отметить решением... 26 мая 2020 в 12:23
  • Подскажите как мне реализовать анимацию на следующей картинке. Пробовал сделать по аналогии - не получается. 26 мая 2020 в 12:24
  • Плавно прорисовать диаграмму и сверху блок с доской. По длительности не более 10 сек, как и в прошлой svg 26 мая 2020 в 12:35

3 ответа 3

5

Сокращенный вариант

Анимируются только графики, диаграмма и бордеры.

Всего анимация длится 6 секунд.

.znack {
stroke-dasharray:0,70;
animation:znack 1s linear forwards , man_fill 2s forwards 1s;
}
@keyframes znack{
100% {stroke-dasharray:70,0;}
}  
.border {
stroke-dasharray:0,823;
animation:border 3s linear forwards 2s, man_fill 2s forwards 2s;
}
@keyframes border{
100% {stroke-dasharray:823,0;}
}  
@keyframes man_fill{
0% {fill:none;}
100% {fill:black;}
} 

.triangle {
stroke-dasharray:0,35;
animation:triangle 1s linear forwards 2s, man_fill 2s forwards 3s;
}
@keyframes triangle{
100% {stroke-dasharray:35,0;}
}  


.diagram {
stroke-dasharray:0,261;
animation:diagram 2s linear forwards 3s, man_fill 2s forwards 4s;
}
@keyframes diagram{
100% {stroke-dasharray:261,0;}
}  
.curve {
stroke-dasharray:0,414;
animation:curve 3s linear forwards 3s, man_fill 2s forwards 4s;
}
@keyframes curve{
100% {stroke-dasharray:414,0;}
}  
<svg xmlns="http://www.w3.org/2000/svg" width="403" height="348" viewBox="0 0 403 348" fill="none">
  <path class="znack" d="M210.1 293.6C206.6 293.6 203.9 290.7 203.9 287.3 203.9 283.8 206.7 281 210.1 281 213.6 281 216.4 283.9 216.4 287.3 216.4 290.7 213.6 293.6 210.1 293.6ZM210.1 282.7C207.6 282.7 205.5 284.8 205.5 287.3 205.5 289.8 207.6 292 210.1 292 212.7 292 214.8 289.8 214.8 287.3 214.8 284.7 212.7 282.7 210.1 282.7Z" fill="none" stroke="black"/>
  <path class="znack" d="M59.6 71.6C56.2 71.6 53.5 68.9 53.5 65.5 53.5 62.1 56.3 59.4 59.6 59.4 63 59.4 65.7 62.2 65.7 65.5 65.7 68.9 63 71.6 59.6 71.6ZM59.6 61C57.1 61 55.1 63 55.1 65.4 55.1 68 57.2 69.9 59.6 69.9 62.1 69.9 64.1 67.9 64.1 65.4 64.1 63 62.1 61 59.6 61Z" stroke="black" fill="none"/>
 
 <g class="arrow" stroke="#1A1A1A" fill="#1A1A1A">
  <path  d="M160.7 298.4C159.8 298.4 159.5 297.7 159.5 296.8V250.5C159.5 249.6 159.8 248.9 160.7 248.9 161.6 248.9 161.9 249.6 161.9 250.5V296.8C161.9 297.7 161.6 298.4 160.7 298.4Z" />
  <path d="M153.5 254.4L154.7 255.5 160.2 249.6 165.6 255.5 166.8 254.4 160.2 247.3 153.5 254.4Z" />
  </g>
   <g class="arrow" stroke="#1A1A1A" fill="#1A1A1A" >
  <path d="M34.5 159.3C33.7 159.3 33.2 158.7 33.2 158V127.1L43.8 118.3V86.1C43.8 85.4 44.3 84.8 45 84.8 45.8 84.8 46.3 85.4 46.3 86.1V119.6L35.7 128.4V157.9C35.7 158.6 35.2 159.3 34.5 159.3Z" />
  <path d="M38.3 91.3L39.4 92.5 44.9 86.6 50.3 92.5 51.5 91.3 44.9 84.2 38.3 91.3Z" /> 
   </g>
 <g class="arrow" stroke="#1A1A1A" fill="#1A1A1A">
 <path d="M350.5 122.3C349.7 122.3 349.2 121.8 349.2 121V90.7L359.8 81.9V49.8C359.8 49.1 360.7 48.5 361.5 48.5 362.2 48.5 363.1 49.1 363.1 49.8V83.1L351.7 91.9V121C351.7 121.8 351.2 122.3 350.5 122.3Z" />
  <path d="M354.8 54.9L355.9 55.9 361.4 50.1 366.8 55.9 368 54.9 361.4 47.8 354.8 54.9Z" />
  </g>
  <path class="dot" d="M22.6 208.1C22.6 209.4 21.6 210.5 20.3 210.5 19 210.5 17.9 209.4 17.9 208.1 17.9 206.8 19 205.8 20.3 205.8 21.5 205.8 22.6 206.8 22.6 208.1Z" fill="black" stroke="black"/>
  
  <path class="man" id="note" d="M155.6 210H137.7C137 210 136.4 209.1 136.4 208.4 136.4 207.6 137 206.7 137.7 206.7H155.6C156.8 206.7 160.2 206.8 161.8 200.3L167.7 167.1C168 165.4 167.3 164.2 166.7 163.4 165.6 162.1 163.6 161.2 161.6 161.2H136.3C132.8 161.2 130.5 163.4 129.9 167.5L126.3 190.8C126.2 191.5 125.5 192 124.8 191.9 124 191.8 123.6 191.1 123.6 190.4L127.2 167.2C128 161.8 131.4 158.6 136.3 158.6H161.5C164.3 158.6 167 159.8 168.7 161.7 170.1 163.4 170.6 165.4 170.3 167.5L164.3 200.8V201C162.7 208.3 158.7 210 155.6 210Z" fill="black" stroke="black"/>
 
 <path id="circle" d="M296 123.7C307.5 91.6 290.8 56.2 258.7 44.7 226.6 33.2 191.2 49.8 179.6 82 168.1 114.1 184.8 149.4 216.9 161 249.1 172.5 284.5 155.8 296 123.7Z" fill="#F3EC18"/>
  
  <path class="border" d="M296.3 124.4C295.6 124.4 295.1 123.9 295.1 123.1 295.1 122.4 295.7 121.8 296.4 121.8 300.1 121.8 302.8 119 302.8 115V9.8C302.8 6.1 299.5 3.3 295.5 3.3H94.2C90.3 3.3 87 5.9 87 9.8V72C87 72.8 86.5 73.3 85.8 73.3 85 73.3 84.5 72.8 84.5 72V9.8C84.5 4.4 88.8 0 94.2 0H295.6C301 0 305.3 4.6 305.3 9.8V114.9C305.3 120.4 301.5 124.4 296.3 124.4Z" stroke="#1A1A1A" fill="none"/>
  
  <path class="border" d="M255.3 126.2H129.7C128.9 126.2 128.4 125.7 128.4 124.9 128.4 124.2 128.9 123.7 129.7 123.7H255.3C256 123.7 256.6 124.2 256.6 124.9 256.6 125.7 256 126.2 255.3 126.2Z" stroke="#1A1A1A" fill="none"/>
  
  <path class="man" d="M102.7 175.4C102.1 175.4 101.5 174.9 101.4 174.3L96.8 142.3 97 141.9C97.1 141.8 98.1 139.8 98.8 138.5 99.2 137.9 100 137.6 100.7 138 101.3 138.4 101.6 139.3 101.2 139.9 100.7 140.8 100 142.1 99.7 142.7L104.1 173.9C104.2 174.6 103.7 175.2 102.9 175.4 102.9 175.4 102.8 175.4 102.7 175.4Z" stroke="black" fill="black"/>
  
  <path class="man" id ="man_Left1" d="M93 176.6C92.3 176.6 91.6 176 91.7 175.2 91.7 175 91.8 152.3 91.5 143.7L89.6 139.8C89.3 139.2 89.5 138.4 90.2 138 90.8 137.7 91.6 138 92 138.6L94.2 142.9V143.3C94.5 151.6 94.4 175 94.4 175.2 94.3 176 93.7 176.6 93 176.6Z" stroke="black" fill="black"/> 
  
  <path class="man" id ="man_Left2" d="M91.4 232.4C90.7 232.4 90.2 231.9 90.1 231.2 90 230.5 90.5 229.9 91.2 229.7L96.6 228.9C97.3 228.8 98 229.3 98.1 230 98.2 230.7 97.7 231.4 97 231.6L91.6 232.4C91.5 232.4 91.5 232.4 91.4 232.4Z" stroke="black" fill="blacke"/>
  
  <path class="man" id ="man_Left3" d="M68.9 231.2C68.2 231.2 67.5 230.5 67.5 229.8L67.8 207.1C67.8 206.4 68.5 205.9 69.1 205.9 69.9 205.9 70.5 206.5 70.5 207.2L70.1 229.9C70.3 230.6 69.6 231.2 68.9 231.2Z" stroke="black" fill="black"/>
  
  <path class="man" d="M127 214.6C126.9 214.6 126.8 214.6 126.7 214.6L72.7 202.5C72.2 202.4 71.8 202 71.7 201.5 71.6 201.2 62.5 167.5 60.3 152.3 59.4 145.9 62.6 141.5 71.2 136.8 71.5 136.7 72.2 136.3 73.1 135.7 75.2 134.5 78 132.9 79.2 132.4 79.8 132.1 80.6 132.4 81 133.1 81.3 133.7 81 134.5 80.3 134.9 79.3 135.3 76.4 137 74.5 138 73.6 138.5 72.9 138.9 72.5 139.2 62.8 144.4 62.5 148.4 63 151.9 64.9 165.6 72.7 194.9 74.1 200L126.8 211.9 130.9 209.6C131.5 209.3 132.4 209.5 132.7 210.1 133 210.7 132.8 211.5 132.2 211.9L127.6 214.4C127.4 214.6 127.2 214.6 127 214.6Z" stroke="black" fill="black"/>
 
 <path class="man" id ="man_Left4" d="M128.5 157.5C128.1 157.5 127.7 157.3 127.5 157L118.8 146.1C116.3 143.2 113.2 139.8 112.4 139.3 107.3 136.3 100.5 134.1 100.4 134 99.7 133.7 99.4 133 99.6 132.3 99.9 131.5 100.6 131.2 101.3 131.4 101.6 131.5 108.5 133.9 113.8 137.1 115.4 138 120 143.4 120.9 144.5L129.6 155.4C130.1 155.9 130 156.8 129.3 157.3 129.1 157.4 128.8 157.5 128.5 157.5Z" stroke="black" fill="black"/>
 
  <path class="man" id ="man_Left_Leg"   d="M75.9 346C70.5 346 63.4 345.8 63 345.8H61.6L61.7 344.4C61.7 343.7 64.2 275 67.6 228 67.7 227.2 68.3 226.7 69.1 226.8 69.8 226.8 70.4 227.5 70.3 228.2 67.1 271.6 64.8 333.3 64.3 343.2 69.3 343.3 79.1 343.5 81.2 343.2 81.6 343.1 81.8 342.5 81.9 342.4 82 341.8 81.9 340.8 81.3 340.5 80.8 340.1 80.2 339.8 79.6 339.6 79 339.2 78.4 338.9 77.6 338.5L76.9 338.1 77 337.2C78.7 322.3 80.9 305.1 83.5 285.1 85.7 268.4 87.9 251.2 90.2 232.7L90.2 232.1 90.8 231.7C91.5 231.2 92.5 231.2 93.7 231.3 93.8 231.3 94 231.3 94.2 231.3L95.4 231.2 95.6 232.4C102.2 263.6 114.5 333.1 116.2 342.7 119.6 342.7 130 342.7 133.2 342.8 133.2 342.7 133.5 342.4 133.6 341.8 133.7 341.4 133.7 340.5 132.7 339.7 131.9 339.1 131.7 339 130.3 338.4 130 338.3 129.6 338.1 129 337.9L128.4 337.5 128.3 336.8C126.7 322 123.6 298.5 120.9 277.9 118.8 261.7 116.9 246.4 115.8 237.3 115.7 236 115.4 231.7 115.2 228 115.1 225.7 115 223.6 114.9 223.1 114.8 222.4 115.4 221.7 116.1 221.6 116.9 221.6 117.5 222.1 117.6 222.9 117.7 223.4 117.8 225.4 117.9 227.8 118.1 231.3 118.3 235.7 118.5 236.9 119.6 246.1 121.5 261.3 123.6 277.5 126.2 297.8 129.3 320.9 130.9 335.7 131.1 335.8 131.3 335.9 131.5 336 132.8 336.6 133.2 336.8 134.3 337.6 136.2 339.1 136.4 341.2 136.1 342.7 135.8 344.2 134.8 345.1 133.6 345.3L133.3 345.1C133.3 345.1 133.3 345.1 133.2 345.1 129.7 345.1 115.2 345.2 115 345.2L113.9 345.3 113.7 344.2C113.5 343.5 100.3 267.9 93.2 234 93 234 92.8 234 92.8 234 90.6 252.2 88.2 269.8 86.2 285.4 83.6 305 81.4 321.9 79.7 336.6 80.1 336.9 80.5 337 80.8 337.2 81.4 337.5 82.1 337.9 82.7 338.3 84.4 339.4 84.8 341.5 84.4 343.2 84 344.8 82.9 345.8 81.4 345.9 80.6 346 78.4 346 75.9 346Z" stroke="black" fill="black">
     <!-- <animate attributeName="stroke-dashoffset" dur="10s" values="1030;0" fill="freeze" />  -->
  </path>
  
  <path class="man" id ="man_Left5" d="M96.8 136.7C96.4 136.7 96.1 136.7 95.9 136.4 95.3 135.9 95.3 135 95.8 134.5 97 133.2 98.5 132.3 99.4 131.8 99.3 130.6 99.1 128.3 99.3 125.5V124.8L99.9 124.4C102.6 123 104.3 119.1 104.7 113.2 105.5 100.8 104 97.4 104 97.4 103.7 96.8 103.9 96 104.6 95.6 105.2 95.3 106 95.6 106.4 96.2 106.5 96.5 108.2 100.1 107.3 113.4 106.9 119.9 105.1 124.2 101.9 126.4 101.8 129.9 102.1 132.4 102.1 132.5L102.3 133.6 101.2 134C101.2 134 99.3 134.7 97.7 136.4 97.5 136.6 97.1 136.7 96.8 136.7Z" stroke="black" fill="black"/>
  
  <path class="man" d="M88.4 105.4C87.6 105.4 87 104.8 87.1 104 87.1 102.6 88.5 99.9 92.8 99.9 93.6 99.9 94.3 99.9 95 99.9 100.1 100 102.9 99.9 104 97.6 103.2 94.7 100.5 91.3 95.9 90.2 89.2 88.6 84.5 92.4 83.2 95.1 81.4 98.9 81.9 103 81.9 103 81.9 103.8 81.4 104.4 80.7 104.6 80 104.7 79.3 104.2 79.2 103.5 79.2 103.3 78.5 98.6 80.7 94 82.8 89.5 89.2 85.8 96.6 87.6 101.8 88.8 105.8 92.7 106.8 97.4L106.9 97.8 106.7 98.2C105 102.7 100.3 102.6 95 102.6 94.3 102.6 93.7 102.6 92.9 102.6 90 102.6 89.8 104.1 89.8 104.1 89.7 104.8 89.1 105.4 88.4 105.4Z" fill="black" stroke="black"/>
  <path class="man" d="M79.5 135C79 135 78.6 134.8 78.4 134.4 78 133.7 78.2 132.9 78.8 132.6L81.4 131.1 81.6 117.4C81.6 116.6 82.3 116 83 116.1 83.7 116.1 84.3 116.7 84.3 117.5L84 132.8 80.1 134.9C80 135 79.7 135 79.5 135Z" fill="black" stroke="black"/>
  
  <path class="man" d="M84.7 118.1C84.6 118.1 84.6 118.1 84.5 118.1 80.7 117.6 79.4 115.6 78.9 114 78.1 111.3 79.7 108.4 82.4 107.5 84 107 85.8 107.2 87.1 108.2 87.6 108.6 87.8 109.5 87.4 110 87 110.6 86.1 110.8 85.5 110.4 84.9 110 84.1 109.8 83.3 110 81.9 110.5 81.1 112 81.5 113.3 81.8 114.1 82.3 115.2 84.9 115.5 85.6 115.6 86.1 116.2 86 117 85.9 117.6 85.4 118.1 84.7 118.1Z" fill="black" stroke="black"/>
  
  <path class="man" d="M119.7 200.2C119.6 200.2 119.5 200.2 119.3 200.1L84.2 190C83.7 189.8 83.4 189.5 83.2 189L75.5 153C75.3 152.3 75.8 151.6 76.6 151.4 77.3 151.2 78 151.7 78.2 152.4L85.8 187.6 119.6 197.5 124 195.1C124.6 194.8 125.4 195 125.8 195.7 126.1 196.3 125.8 197.1 125.2 197.5L120.4 200.1C120.2 200.1 120 200.2 119.7 200.2Z" fill="black" stroke="black"/>
  
  <path class="man" d="M133.4 204.8C133.3 204.8 133.2 204.8 133.1 204.8L128.2 203.7C127.5 203.6 127 202.8 127.1 202.1 127.3 201.4 128 200.9 128.8 201L133.7 202.1C134.4 202.3 134.8 203 134.7 203.7 134.6 204.4 134 204.8 133.4 204.8Z" fill="black" stroke="black"/>
  <path d="M115.2 212C115.1 212 115 212 115 212 114.3 211.9 113.8 211.2 113.9 210.5L114.7 204.9C114.8 204.2 115.5 203.7 116.2 203.8 117 203.9 117.4 204.6 117.4 205.4L116.6 210.9C116.4 211.5 115.8 212 115.2 212Z" fill="black"/>
  
  <path class="man" d="M97.7 127.3C96.3 127.3 94.5 127.1 92.8 126.1 92.2 125.7 92 124.9 92.4 124.2 92.8 123.6 93.6 123.3 94.2 123.7 96.9 125.3 100.2 124.3 100.2 124.3 100.9 124 101.6 124.4 101.9 125.2 102.1 125.9 101.7 126.6 101 126.9 100.9 126.9 99.5 127.3 97.7 127.3Z" fill="black" stroke="black"/> 
  
  <path class="dot" d="M266.9 305.8C266.9 307.1 265.8 308.2 264.5 308.2 263.2 308.2 262.2 307.1 262.2 305.8 262.2 304.5 263.2 303.4 264.5 303.4 265.8 303.4 266.9 304.5 266.9 305.8Z" fill="black" stroke="black"/> 
  
  <path class="man" d="M113.9 185.3C113.1 185.3 112.2 184.8 112.2 184V161.1C112.2 160.6 112.6 160.2 113 159.9 113.5 159.7 114 159.7 114.4 159.9L118.3 162.1C118.9 162.5 119.2 163.4 118.8 164 118.3 164.7 117.7 164.9 117 164.5L115.4 163.5V184.2C115.5 184.8 114.6 185.3 113.9 185.3Z" fill="black" stroke="black"/> 
  
  <path class="znack" d="M225.4 309.1C224.9 309.1 224.5 308.6 224.5 308.2 224.5 307.6 225 307.2 225.4 307.2H238.3C238.9 307.2 239.3 307.7 239.3 308.2 239.3 308.7 238.8 309.1 238.3 309.1H225.4Z" fill="none" stroke="black"/> 
  
  <path class="znack" d="M231.9 315.6C231.3 315.6 230.9 315.1 230.9 314.6V301.7C230.9 301.2 231.4 300.7 231.9 300.7 232.5 300.7 232.9 301.2 232.9 301.7V314.6C232.9 315.2 232.5 315.6 231.9 315.6Z" fill="none" stroke="black"/>
  <path class="znack" d="M26.3 244.6C25.7 244.6 25.3 244.1 25.3 243.6 25.3 243 25.8 242.6 26.3 242.6H39.2C39.7 242.6 40.2 243.1 40.2 243.6 40.2 244.2 39.7 244.6 39.2 244.6H26.3Z" fill="none" stroke="black"/>
  
  <path class="znack" d="M32.8 251C32.3 251 31.8 250.5 31.8 250V237.2C31.8 236.6 32.3 236.2 32.8 236.2 33.4 236.2 33.8 236.7 33.8 237.2V250C33.8 250.6 33.4 251 32.8 251Z" fill="none" stroke="black"/>
  
  <path class="znack" d="M327.3 17.9C326.8 17.9 326.4 17.4 326.4 16.9 326.4 16.4 326.8 16 327.3 16H337.8C338.4 16 338.8 16.4 338.8 16.9 338.8 17.5 338.3 17.9 337.8 17.9H327.3Z" fill="none" stroke="black"/>
  <path class="znack" d="M332.5 23.1C332 23.1 331.6 22.6 331.6 22.1V11.6C331.6 11.1 332.1 10.7 332.5 10.7 333.1 10.7 333.5 11.2 333.5 11.6V22.1C333.6 22.7 333.1 23.1 332.5 23.1Z" fill="none" stroke="black"/>
  
  <path class="znack" transform="translate(0,0)" d="M401.7 345.9H1.3C0.6 345.9 0 345.4 0 344.7 0 344 0.6 343.5 1.3 343.5H401.6C402.3 343.5 403 344 403 344.7 403 345.4 402.4 345.9 401.7 345.9Z" fill="none" stroke="black"/>
  
  <path class="arrow" d="M194.9 172.7C194.2 172.7 193.7 172.1 193.7 171.4V150.6C193.7 149.8 194.2 149.3 194.9 149.3 195.6 149.3 196.1 149.8 196.1 150.6V171.4C196.1 172.1 195.6 172.7 194.9 172.7Z" fill="black" stroke="#1a1a1a"/>
  <path class="arrow" d="M189.3 155.1L190.3 155.9 194.8 151.1 199.3 155.9 200.3 155.1 194.8 149.1 189.3 155.1Z" fill="black" stroke="#1a1a1a"/>
  
  <path class="dot" d="M159.2 136.9C159.2 138.2 158.2 139.2 156.9 139.2 155.6 139.2 154.7 138.1 154.7 136.9 154.7 135.6 155.7 134.6 156.9 134.6 158.3 134.6 159.2 135.6 159.2 136.9Z" fill="black" stroke="black"/>
  
  <path class="man2" d="M362.9 234.5C362.8 234.5 362.7 234.5 362.6 234.5 361.9 234.3 361.5 233.6 361.6 232.9L363.4 225.5 354.1 194.4 342.9 174.8 341.7 216.9C341.7 217.6 341 218.1 340.4 218.1H323.2C322.4 218.1 321.9 217.6 321.9 216.9 321.9 216.2 322.4 215.7 323.2 215.7H339.1L340.4 170C340.4 169.5 340.9 168.9 341.4 168.7 342 168.6 342.6 168.8 342.9 169.4L356.6 193.1C356.7 193.2 356.7 193.3 356.7 193.4L366.2 225.1C366.3 225.3 366.3 225.5 366.2 225.8L364.3 233.5C364.1 234.1 363.5 234.5 362.9 234.5Z" fill="black" stroke="black"/>
  
  <path class="man2" d="M375.1 238.5C374.9 238.5 374.6 238.4 374.4 238.2 373.8 237.8 373.7 236.9 374.1 236.4L376.6 232.8 374.8 223.7 365.3 186.1 345.3 147C344.2 146.3 339.8 143.3 334.9 141.5 334.2 141.3 333.9 140.5 334.1 139.8 334.3 139.1 335.2 138.8 335.8 139 341.8 141.1 346.9 144.9 347 145 347.2 145.2 347.4 145.4 347.5 145.5L367.7 185.2C367.8 185.3 367.8 185.3 367.8 185.4L377.4 223.1V223.2L379.3 232.9C379.4 233.3 379.3 233.7 379.1 234L376.2 238.1C376 238.2 375.6 238.5 375.1 238.5Z" fill="black" stroke="black"/> 
  
  <path class="man2" d="M307.8 139.1C307.7 139.1 307.6 139.1 307.5 139.1L300.1 137.5C299.8 137.4 299.6 137.2 299.4 137L281.6 115.1C281.5 115 281.4 114.8 281.3 114.7L269.8 82.8C269.7 82.5 269.7 82 269.8 81.8L273.3 74.3C273.6 73.7 274.4 73.3 275 73.7 275.7 74 276 74.8 275.7 75.5L272.5 82.5 283.8 113.6 301.3 134.9 308.1 136.5C308.8 136.7 309.3 137.4 309.2 138.1 309 138.7 308.4 139.1 307.8 139.1Z" fill="black" stroke="black"/>
  
  <path class="man2" d="M297.8 215.7C297 215.7 296.5 215 296.5 214.3L295.4 154.2C295.4 153.5 296 152.9 296.7 152.9 297.4 152.9 298.1 153.4 298.1 154.2L299.2 214.2C299.2 215 298.6 215.7 297.8 215.7Z" fill="black" stroke="black"/>
  
  <path class="man2" d="M296.3 345.9H296.1C294.9 345.8 294.1 344.8 293.8 343.5 293.4 341.7 294.1 339.8 295.7 338.7 296.6 337.9 297 337.8 298.3 337.1 298.5 337 298.6 337 298.7 337 299.1 323.6 297.3 268.1 297.3 267.5L296.3 211.1C296.3 210.4 296.9 209.7 297.6 209.7 298.3 209.7 299 210.3 299 211.1L300 267.5C300.1 269.8 301.8 326 301.4 337.9V338.7L300.6 339C300.1 339.2 299.7 339.4 299.4 339.6 298.2 340.1 298 340.2 297.2 340.8 296.4 341.4 296.3 342.1 296.3 342.5 296.3 342.9 296.5 343.2 296.5 343.2 299.6 343.2 310.2 342.9 313.8 342.8L314.5 301.2 316.7 258.9C316.7 258.2 317.4 257.6 318.1 257.6 318.9 257.6 319.4 258.3 319.4 259L317.2 301.3 316.4 345.4H315.1C314.5 345.4 299.6 345.9 296.3 345.9Z" fill="black" stroke="black"/>
  
  <path class="man2" d="M321.4 138.3C321.3 138.3 321.2 138.3 321.1 138.3L314.7 136.9 314.5 131.3C312.9 130.6 309.7 128.7 309.4 126.1 308 114 309.7 107.3 309.8 107 310 106.2 310.7 105.8 311.5 106 312.2 106.1 312.6 106.9 312.4 107.6 312.4 107.7 310.7 114.1 312.1 125.7 312.3 126.9 314.7 128.4 316.3 129.1L317.1 129.4 317.3 134.6 321.8 135.6C322.5 135.8 323 136.5 322.9 137.2 322.6 137.9 322 138.3 321.4 138.3Z" fill="black" stroke="black"/>
  
  <path class="man2" d="M334.7 115C334.6 115 334.5 115 334.4 115 333.7 114.8 333.2 114.2 333.4 113.5 333.4 113.5 334 109.8 332.3 105.5 330.5 102.7 325.5 99.1 319.1 100.6 315.9 101.4 314 103.2 312.7 106.5 314 109.3 316.6 110.9 321.7 111.7 322.3 111.8 325.3 111.8 327.3 111.8 328 111.8 328.6 112.2 328.6 112.9 328.6 113.6 328 114 327.3 114 326.4 114 322.3 114.2 321.4 114 315.1 113 311.7 110.9 310.2 107L310 106.5 310.2 106.1C311.8 101.6 314.4 99.1 318.6 98 326.4 96 332.7 100.7 334.8 104.1L334.9 104.3C337 109.4 336.2 113.7 336.2 113.9 335.8 114.5 335.3 115 334.7 115Z" fill="black" stroke="black"/>
  
  <path class="man2" d="M336.5 141.9C336.3 141.9 336.1 141.9 336 141.8L330.1 139.5 330.2 123.5C330.2 122.7 330.8 122.1 331.6 122.1 332.3 122.1 332.9 122.8 332.9 123.6L332.8 137.7 336.9 139.3C337.5 139.6 337.9 140.4 337.6 141.1 337.4 141.5 336.9 141.9 336.5 141.9Z" fill="black" stroke="black"/>
  <path class="man2" d="M330.3 124.9C329.7 124.9 329.1 124.4 329 123.8 328.9 123.1 329.4 122.3 330.1 122.3 332.4 121.8 333 120.9 333.1 120.1 333.4 119 332.8 117.8 331.7 117.4 331 117.3 330.3 117.4 329.7 117.8 329.1 118.3 328.2 118.1 327.8 117.5 327.3 117 327.5 116.1 328.1 115.7 329.3 114.8 330.9 114.4 332.4 114.8 335 115.6 336.5 118.3 335.7 120.9 335.3 122.3 334 124.3 330.6 124.9 330.5 124.9 330.4 124.9 330.3 124.9Z" fill="black" stroke="black"/>
  
  <path class="man2" d="M341.6 171.3C341.1 171.3 340.6 170.9 340.4 170.4L337.9 165.1C337.6 164.4 337.9 163.6 338.6 163.3 339.2 162.9 340 163.3 340.4 163.9L342.8 169.3C343.1 169.9 342.8 170.8 342.2 171.1 341.9 171.3 341.8 171.3 341.6 171.3Z" fill="black" stroke="black"/>
  
  <path class="man2" d="M347.3 345.8C345.7 345.8 344.4 345.8 343.5 345.8H343.5C342.1 345.6 341 344.6 340.5 343.2 340 341.5 340.4 339.9 341.6 339 342.1 338.6 343.1 337.8 344.1 336.9 340.4 323 328.8 280.5 328.8 280.5L317.7 237.2C316.7 236.8 314.4 235.9 312 234.7 311.4 234.3 311.1 233.5 311.5 232.9 311.8 232.2 312.6 232 313.2 232.3 316.4 233.8 319.3 234.9 319.4 234.9L320 235.1 331.4 279.7C331.4 279.7 343.4 323.9 346.9 336.9L347.1 337.7 346.6 338.3C345.4 339.3 343.9 340.5 343.3 341 343.1 341.2 343 341.8 343.1 342.4 343.1 342.5 343.4 343.1 343.7 343.1 346.6 343.2 357 343.1 361.1 343.1L347 275.1C347 274.6 339.7 229.1 338.3 216 338.2 215.3 338.8 214.6 339.6 214.6 340.3 214.5 340.9 215 341 215.8 342.3 228.8 349.6 274.1 349.7 274.6L364.2 345.7H362.6C362.2 345.7 353 345.8 347.3 345.8Z" fill="black" stroke="black"/>
  
  <path class="man2" d="M296.5 156.4C296.1 156.4 295.7 156.3 295.4 155.9L270 123.7C269.9 123.6 269.8 123.4 269.8 123.2L258.3 81.5C257.6 79.1 257.6 74.4 262.2 73.1 262.9 72.8 263.6 73.3 263.8 74 264.1 74.7 263.6 75.5 262.9 75.6 259.7 76.5 260.8 80.6 260.9 80.7L272.3 122.3 297.4 154.2C297.9 154.8 297.8 155.7 297.2 156.1 297 156.4 296.7 156.4 296.5 156.4Z" fill="black" stroke="black"/>
  <path class="man2" d="M319.5 193.6L312.8 186.5 317.4 148.1C317 147.3 316.1 145.5 315.1 143.8 314.7 143.2 315 142.4 315.6 141.9 316.3 141.5 317.1 141.8 317.5 142.4 318.8 144.7 320 147.1 320.1 147.2L320.3 147.5 315.6 185.5 319.7 189.7 324.3 185.3C324.1 181.2 322.6 157.7 321.6 147.7L321.5 147.2 324.6 142.6C325.1 141.9 325.9 141.8 326.5 142.3 327.2 142.7 327.3 143.5 326.8 144.1L324.2 148C325.3 159.1 326.9 185.4 327 185.7V186.4L319.5 193.6Z" fill="black" stroke="black"/> 
  
  <path class="znack" d="M135.9 42.3H115.6C114.8 42.3 114.3 41.8 114.3 41 114.3 40.3 114.8 39.7 115.6 39.7H135.9C136.7 39.7 137.2 40.3 137.2 41 137.2 41.8 136.8 42.3 135.9 42.3Z" fill="none" stroke="black"/>
  
  <path class="znack" d="M135.1 61.5H116.1C115.3 61.5 114.8 61 114.8 60.2 114.8 59.5 115.3 58.9 116.1 58.9H135.1C135.9 58.9 136.4 59.5 136.4 60.2 136.5 61 135.9 61.5 135.1 61.5Z" fill="none" stroke="black"/>
  
  <path class="znack" d="M135.9 80.7H115.6C114.8 80.7 114.3 80.2 114.3 79.4 114.3 78.7 114.8 78.1 115.6 78.1H135.9C136.6 78.1 137.2 78.7 137.2 79.4 137.2 80.2 136.6 80.7 135.9 80.7Z" fill="none" stroke="black"/> 
  
  <path class="znack" d="M136.5 100H115.7C114.9 100 114.4 99.4 114.4 98.6 114.4 97.9 114.9 97.3 115.7 97.3H136.5C137.2 97.3 137.8 97.9 137.8 98.6 137.8 99.3 137.2 100 136.5 100Z" fill="none" stroke="black"/>
  <path class="znack" d="M178.9 42.3H172.9C172.2 42.3 171.6 41.8 171.6 41 171.6 40.3 172.2 39.7 172.9 39.7H178.9C179.6 39.7 180.2 40.3 180.2 41 180.2 41.8 179.6 42.3 178.9 42.3Z" fill="none" stroke="black"/>
  <path class="znack" d="M179.2 61.8H172.9C172.2 61.8 171.6 61.2 171.6 60.5 171.6 59.7 172.2 59.2 172.9 59.2H179.2C179.9 59.2 180.5 59.7 180.5 60.5 180.5 61.2 179.9 61.8 179.2 61.8Z" fill="none" stroke="black"/>
  <path class="znack" d="M179.3 80.5H172.9C172.2 80.5 171.6 79.9 171.6 79.2 171.6 78.5 172.2 77.9 172.9 77.9H179.3C180.1 77.9 180.7 78.5 180.7 79.2 180.7 79.8 180.1 80.5 179.3 80.5Z" fill="none" stroke="black"/>
  <path class="znack" d="M179.6 100H172.9C172.2 100 171.6 99.4 171.6 98.6 171.6 97.9 172.2 97.3 172.9 97.3H179.6C180.3 97.3 180.9 97.9 180.9 98.6 180.9 99.3 180.3 100 179.6 100Z" fill="none" stroke="black"/>
  <path class="znack" d="M162.2 42.3H156.3C155.6 42.3 154.9 41.8 154.9 41 154.9 40.3 155.5 39.7 156.3 39.7H162.2C163 39.7 163.6 40.3 163.6 41 163.6 41.8 163 42.3 162.2 42.3Z" fill="none" stroke="black"/>
  <path class="znack" d="M162.5 61.8H156.2C155.5 61.8 154.8 61.2 154.8 60.5 154.8 59.7 155.4 59.2 156.2 59.2H162.5C163.2 59.2 163.8 59.7 163.8 60.5 163.9 61.2 163.3 61.8 162.5 61.8Z" fill="none" stroke="black"/>
  <path class="znack" d="M162.7 80.5H156.3C155.6 80.5 154.9 79.9 154.9 79.2 154.9 78.5 155.5 77.9 156.3 77.9H162.7C163.5 77.9 164 78.5 164 79.2 164 79.8 163.5 80.5 162.7 80.5Z" fill="none" stroke="black"/>
  <path class="znack" d="M162.9 100H156.2C155.5 100 154.8 99.4 154.8 98.6 154.8 97.9 155.4 97.3 156.2 97.3H162.9C163.6 97.3 164.2 97.9 164.2 98.6 164.3 99.3 163.7 100 162.9 100Z" fill="none" stroke="black"/>
 
 <path class="triangle" d="M237.9 34.7L232.5 44.8H243.3L237.9 34.7Z" fill="none" stroke="#231F20"/>
  <path  class="triangle" d="M237.9 72.9L232.5 83H243.3L237.9 72.9Z" fill="none" stroke="#231F20"/>
  <path class="triangle" d="M237.9 104.5L232.5 94.4H243.3L237.9 104.5Z" fill="none" stroke="#231F20"/>
  <path class="triangle" d="M237.9 66.3L232.5 56.2H243.3L237.9 66.3Z" fill="none" stroke="#231F20"/>

  <path class="znack" d="M217.1 42.3H193C192.3 42.3 191.7 41.8 191.7 41 191.7 40.3 192.3 39.7 193 39.7H217.1C217.9 39.7 218.4 40.3 218.4 41 218.4 41.8 217.9 42.3 217.1 42.3Z" fill="none" stroke="black"/>
  <path class="znack" d="M217.1 61.5H193C192.3 61.5 191.7 61 191.7 60.2 191.7 59.5 192.3 58.9 193 58.9H217.1C217.9 58.9 218.4 59.5 218.4 60.2 218.4 61 217.9 61.5 217.1 61.5Z" fill="none" stroke="black"/> 
  
  <path class="znack" d="M217.1 80.7H193C192.3 80.7 191.7 80.2 191.7 79.4 191.7 78.7 192.3 78.1 193 78.1H217.1C217.9 78.1 218.4 78.7 218.4 79.4 218.4 80.1 217.9 80.7 217.1 80.7Z" fill="none" stroke="black"/>
  <path class="znack"  d="M217.1 100H193C192.3 100 191.7 99.4 191.7 98.6 191.7 97.9 192.3 97.3 193 97.3H217.1C217.9 97.3 218.4 97.9 218.4 98.6 218.4 99.3 217.9 100 217.1 100Z" fill="none" stroke="black"/>
  <path class="znack" d="M276.7 41.5H257.9C257.1 41.5 256.6 40.9 256.6 40.2 256.6 39.5 257.1 38.9 257.9 38.9H276.7C277.4 38.9 278 39.5 278 40.2 278.1 40.9 277.4 41.5 276.7 41.5Z" fill="none" stroke="black"/>
  <path class="znack" d="M268.7 60.5H257.9C257.1 60.5 256.6 59.9 256.6 59.2 256.6 58.4 257.1 57.9 257.9 57.9H268.7C269.4 57.9 270 58.4 270 59.2 270.1 59.8 269.4 60.5 268.7 60.5Z" fill="none" stroke="black"/>
  
  <path class="border" d="M279 21.9H100.6C99.9 21.9 99.3 21.3 99.3 20.6 99.3 19.9 99.9 19.3 100.6 19.3H279C279.7 19.3 280.3 19.9 280.3 20.6 280.3 21.3 279.7 21.9 279 21.9Z" fill="none" stroke="black"/>
  
  <path  class="znack" d="M304 21.9H285.5C284.7 21.9 284.2 21.3 284.2 20.6 284.2 19.9 284.7 19.3 285.5 19.3H304C304.7 19.3 305.3 19.9 305.3 20.6 305.3 21.3 304.7 21.9 304 21.9Z" fill="none" stroke="black"/>
  <path class="man2" d="M268.9 78.6C268.3 78.6 267.8 78.3 267.6 77.7L264.6 69C264.4 68.3 264.8 67.6 265.4 67.3 266.2 67.1 266.9 67.5 267.1 68.1L270.1 76.8C270.3 77.6 269.9 78.3 269.3 78.5 269.1 78.6 268.9 78.6 268.9 78.6Z" fill="none" stroke="black"/>
  <path class="man2" d="M261.9 91C261.3 91 260.7 90.6 260.6 90 260.3 89.3 260.7 88.6 261.4 88.3L267 86.6C267.7 86.4 268.5 86.8 268.7 87.5 268.9 88.2 268.5 89 267.8 89.2L262.3 90.9C262.1 91 261.9 91 261.9 91Z" fill="none" stroke="black"/>
  <path class="znack"  d="M224.5 149.6L216.4 141.5 224.5 133.3 232.7 141.5 224.5 149.6ZM219.3 141.4L224.5 146.7 229.8 141.4 224.5 136.1 219.3 141.4Z" fill="none" stroke="black"/>
  
  <path class="arrow" d="M275.5 208.9C274.8 208.9 274.3 208.4 274.3 207.6V176.6L267.8 168.6V157.9C267.8 157.2 268.7 156.6 269.4 156.6 270.2 156.6 271.1 157.2 271.1 157.9V167.7L276.8 175.7V207.6C276.8 208.4 276.3 208.9 275.5 208.9Z" fill="black" stroke="#1A1A1A"/>
  <path class="arrow" d="M262.9 163.2L264.1 164.3 269.5 158.5 274.9 164.3 276.1 163.2 269.5 156.1 262.9 163.2Z" fill="black" stroke="#1A1A1A"/>
  
  <path class="diagram" d="M232.9 225H230.2V165.9H245.7V224.4H243V168.6H232.9V225Z" fill="none" stroke="black"/>
  <path class="diagram" d="M264.9 248.1H262.2V200.1H252.4V228.3H249.7V197.4H264.9V248.1Z" fill="none" stroke="black"/>
  <path class="diagram" d="M213.7 237.3H211V187.4H226.2V231H223.5V190.1H213.7V237.3Z" fill="none" stroke="black"/>
  <path class="diagram" d="M207.1 232.2H204.4V203.1H194.7V223.4H192.1V200.4H207.1V232.2Z" fill="none" stroke="black"/>
  <path class="arrow" d="M246.6 262.9H244.2V285.7H246.6V262.9Z" fill="none" stroke="black"/>
  
  <path class="znack" d="M174.9 292.2H171.7V308.5H174.9V292.2Z" fill="none" stroke="black"/> 
  
  <path class="znack" d="M186.8 190.8C186 190.8 185.5 190.2 185.5 189.5V175.4C185.5 174.7 186 174.1 186.8 174.1 187.5 174.1 188 174.7 188 175.4V189.5C188 190.2 187.5 190.8 186.8 190.8Z" fill="none" stroke="black"/>
  <path class="znack" d="M341.1 43.1H338.7V64.3H341.1V43.1Z" fill="none" stroke="black"/> 
  
  <path class="curve" d="M266.1 261.8C265.8 261.8 265.7 261.8 265.4 261.8 259.7 261.6 254.6 254.6 249.7 247.9 245.4 241.9 240.9 235.7 236.8 235.6 235 235.6 233.3 236.7 231.5 239 231 239.6 230.5 240.3 230 240.9 226.2 245.9 221.9 251.5 214.7 252 207 252.5 197.5 246.9 185.5 234.9 177.2 226.6 169.7 222.9 162.5 223.6 150.6 224.7 141.6 238.1 134.4 248.8 133.2 250.6 132.1 252.2 131 253.8 130.6 254.4 129.7 254.5 129.1 254.1 128.5 253.7 128.4 252.8 128.8 252.2 129.8 250.7 131 249.1 132.2 247.3 139.8 236.1 149.1 222.2 162.2 220.9 170.3 220.1 178.5 224.1 187.5 233 198.9 244.4 207.8 249.7 214.6 249.3 220.6 248.9 224.4 244 228 239.3 228.5 238.6 229 238 229.5 237.3 231.9 234.4 234.4 232.9 237 233 242.5 233.1 247.2 239.6 252.1 246.5 256.6 252.6 261.2 259.1 265.8 259.3 273.9 259.6 277.5 251.7 280.3 245.4 280.8 244.3 281.3 243.2 281.8 242.2 282.1 241.6 282.9 241.3 283.6 241.7 284.3 242 284.5 242.8 284.2 243.4 283.7 244.3 283.2 245.4 282.7 246.5 279.5 252.9 275.5 261.8 266.1 261.8Z" fill="none" stroke="black"/>
</svg>

Вариант с stroke-width="0.5" https://jsfiddle.net/alwas/jtwmuk6v/

0
3

Выбрал реализацию анимации с помощью stroke-dasharray

Так как есть ограничение по количеству символов 30.000, то описание не входит (30.484) Придется перенести его во второй ответ.

.man {
stroke-dasharray:0,1030;
animation:man_draw 5s linear forwards,man_fill 2s forwards 4.5s;
}
@keyframes man_draw{
100% {stroke-dasharray:1030,0;}
} 
@keyframes man_fill{
0% {fill:none;}
100% {fill:black;}
} 
.man2 {
stroke-dasharray:0,1030;
animation:man_draw2 5s linear forwards 6.5s, man_fill 2s forwards 8.5s;
}
@keyframes man_draw2{
100% {stroke-dasharray:1030,0;}
}  
.border {
stroke-dasharray:0,823;
animation:border 3s linear forwards 10s, man_fill 2s forwards 12.5s;
}
@keyframes border{
100% {stroke-dasharray:823,0;}
}  
.znack {
stroke-dasharray:0,70;
animation:znack 2s linear forwards 14s, man_fill 2s forwards 15s;
}
@keyframes znack{
100% {stroke-dasharray:35,0;}
}  
.triangle {
stroke-dasharray:0,35;
animation:triangle 2s linear forwards 15s, man_fill 2s forwards 16s;
}
@keyframes triangle{
100% {stroke-dasharray:70,0;}
}  


.diagram {
stroke-dasharray:0,261;
animation:diagram 2s linear forwards 17s, man_fill 2s forwards 18s;
}
@keyframes diagram{
100% {stroke-dasharray:261,0;}
}  
.curve {
stroke-dasharray:0,414;
animation:curve 2s linear forwards 20s, man_fill 2s forwards 22s;
}
@keyframes curve{
100% {stroke-dasharray:414,0;}
}  

.arrow {
stroke-dasharray:0,112;
animation:arrow 2s linear forwards 23.5s, man_fill 2s forwards 25s;
}
@keyframes arrow{
100% {stroke-dasharray:112,0;}
}
.dot {
stroke-dasharray:0,15;
animation:dot 2s linear forwards 27s, man_fill 1s forwards 28s;
}
@keyframes dot{
100% {stroke-dasharray:15,0;}
}
<svg xmlns="http://www.w3.org/2000/svg" width="403" height="348" viewBox="0 0 403 348" fill="none">
  <path class="znack" d="M210.1 293.6C206.6 293.6 203.9 290.7 203.9 287.3 203.9 283.8 206.7 281 210.1 281 213.6 281 216.4 283.9 216.4 287.3 216.4 290.7 213.6 293.6 210.1 293.6ZM210.1 282.7C207.6 282.7 205.5 284.8 205.5 287.3 205.5 289.8 207.6 292 210.1 292 212.7 292 214.8 289.8 214.8 287.3 214.8 284.7 212.7 282.7 210.1 282.7Z" fill="none" stroke="black"/>
  <path class="znack" d="M59.6 71.6C56.2 71.6 53.5 68.9 53.5 65.5 53.5 62.1 56.3 59.4 59.6 59.4 63 59.4 65.7 62.2 65.7 65.5 65.7 68.9 63 71.6 59.6 71.6ZM59.6 61C57.1 61 55.1 63 55.1 65.4 55.1 68 57.2 69.9 59.6 69.9 62.1 69.9 64.1 67.9 64.1 65.4 64.1 63 62.1 61 59.6 61Z" stroke="black" fill="none"/>
 
 <g class="arrow" stroke="#1A1A1A" fill="none">
  <path  d="M160.7 298.4C159.8 298.4 159.5 297.7 159.5 296.8V250.5C159.5 249.6 159.8 248.9 160.7 248.9 161.6 248.9 161.9 249.6 161.9 250.5V296.8C161.9 297.7 161.6 298.4 160.7 298.4Z" />
  <path d="M153.5 254.4L154.7 255.5 160.2 249.6 165.6 255.5 166.8 254.4 160.2 247.3 153.5 254.4Z" />
  </g>
   <g class="arrow" stroke="#1A1A1A" fill="none" >
  <path d="M34.5 159.3C33.7 159.3 33.2 158.7 33.2 158V127.1L43.8 118.3V86.1C43.8 85.4 44.3 84.8 45 84.8 45.8 84.8 46.3 85.4 46.3 86.1V119.6L35.7 128.4V157.9C35.7 158.6 35.2 159.3 34.5 159.3Z" />
  <path d="M38.3 91.3L39.4 92.5 44.9 86.6 50.3 92.5 51.5 91.3 44.9 84.2 38.3 91.3Z" /> 
   </g>
 <g class="arrow" stroke="#1A1A1A" fill="none">
 <path d="M350.5 122.3C349.7 122.3 349.2 121.8 349.2 121V90.7L359.8 81.9V49.8C359.8 49.1 360.7 48.5 361.5 48.5 362.2 48.5 363.1 49.1 363.1 49.8V83.1L351.7 91.9V121C351.7 121.8 351.2 122.3 350.5 122.3Z" />
  <path d="M354.8 54.9L355.9 55.9 361.4 50.1 366.8 55.9 368 54.9 361.4 47.8 354.8 54.9Z" />
  </g>
  <path class="dot" d="M22.6 208.1C22.6 209.4 21.6 210.5 20.3 210.5 19 210.5 17.9 209.4 17.9 208.1 17.9 206.8 19 205.8 20.3 205.8 21.5 205.8 22.6 206.8 22.6 208.1Z" fill="none" stroke="black"/>
  
  <path class="man" id="note" d="M155.6 210H137.7C137 210 136.4 209.1 136.4 208.4 136.4 207.6 137 206.7 137.7 206.7H155.6C156.8 206.7 160.2 206.8 161.8 200.3L167.7 167.1C168 165.4 167.3 164.2 166.7 163.4 165.6 162.1 163.6 161.2 161.6 161.2H136.3C132.8 161.2 130.5 163.4 129.9 167.5L126.3 190.8C126.2 191.5 125.5 192 124.8 191.9 124 191.8 123.6 191.1 123.6 190.4L127.2 167.2C128 161.8 131.4 158.6 136.3 158.6H161.5C164.3 158.6 167 159.8 168.7 161.7 170.1 163.4 170.6 165.4 170.3 167.5L164.3 200.8V201C162.7 208.3 158.7 210 155.6 210Z" fill="none" stroke="black"/>
 
 <path id="circle" d="M296 123.7C307.5 91.6 290.8 56.2 258.7 44.7 226.6 33.2 191.2 49.8 179.6 82 168.1 114.1 184.8 149.4 216.9 161 249.1 172.5 284.5 155.8 296 123.7Z" fill="#F3EC18"/>
  
  <path class="border" d="M296.3 124.4C295.6 124.4 295.1 123.9 295.1 123.1 295.1 122.4 295.7 121.8 296.4 121.8 300.1 121.8 302.8 119 302.8 115V9.8C302.8 6.1 299.5 3.3 295.5 3.3H94.2C90.3 3.3 87 5.9 87 9.8V72C87 72.8 86.5 73.3 85.8 73.3 85 73.3 84.5 72.8 84.5 72V9.8C84.5 4.4 88.8 0 94.2 0H295.6C301 0 305.3 4.6 305.3 9.8V114.9C305.3 120.4 301.5 124.4 296.3 124.4Z" stroke="#1A1A1A" fill="none"/>
  
  <path class="border" d="M255.3 126.2H129.7C128.9 126.2 128.4 125.7 128.4 124.9 128.4 124.2 128.9 123.7 129.7 123.7H255.3C256 123.7 256.6 124.2 256.6 124.9 256.6 125.7 256 126.2 255.3 126.2Z" stroke="#1A1A1A" fill="none"/>
  
  <path class="man" d="M102.7 175.4C102.1 175.4 101.5 174.9 101.4 174.3L96.8 142.3 97 141.9C97.1 141.8 98.1 139.8 98.8 138.5 99.2 137.9 100 137.6 100.7 138 101.3 138.4 101.6 139.3 101.2 139.9 100.7 140.8 100 142.1 99.7 142.7L104.1 173.9C104.2 174.6 103.7 175.2 102.9 175.4 102.9 175.4 102.8 175.4 102.7 175.4Z" stroke="black" fill="none"/>
  
  <path class="man" id ="man_Left1" d="M93 176.6C92.3 176.6 91.6 176 91.7 175.2 91.7 175 91.8 152.3 91.5 143.7L89.6 139.8C89.3 139.2 89.5 138.4 90.2 138 90.8 137.7 91.6 138 92 138.6L94.2 142.9V143.3C94.5 151.6 94.4 175 94.4 175.2 94.3 176 93.7 176.6 93 176.6Z" stroke="black" fill="none"/> 
  
  <path class="man" id ="man_Left2" d="M91.4 232.4C90.7 232.4 90.2 231.9 90.1 231.2 90 230.5 90.5 229.9 91.2 229.7L96.6 228.9C97.3 228.8 98 229.3 98.1 230 98.2 230.7 97.7 231.4 97 231.6L91.6 232.4C91.5 232.4 91.5 232.4 91.4 232.4Z" stroke="black" fill="none"/>
  
  <path class="man" id ="man_Left3" d="M68.9 231.2C68.2 231.2 67.5 230.5 67.5 229.8L67.8 207.1C67.8 206.4 68.5 205.9 69.1 205.9 69.9 205.9 70.5 206.5 70.5 207.2L70.1 229.9C70.3 230.6 69.6 231.2 68.9 231.2Z" stroke="black" fill="none"/>
  
  <path class="man" d="M127 214.6C126.9 214.6 126.8 214.6 126.7 214.6L72.7 202.5C72.2 202.4 71.8 202 71.7 201.5 71.6 201.2 62.5 167.5 60.3 152.3 59.4 145.9 62.6 141.5 71.2 136.8 71.5 136.7 72.2 136.3 73.1 135.7 75.2 134.5 78 132.9 79.2 132.4 79.8 132.1 80.6 132.4 81 133.1 81.3 133.7 81 134.5 80.3 134.9 79.3 135.3 76.4 137 74.5 138 73.6 138.5 72.9 138.9 72.5 139.2 62.8 144.4 62.5 148.4 63 151.9 64.9 165.6 72.7 194.9 74.1 200L126.8 211.9 130.9 209.6C131.5 209.3 132.4 209.5 132.7 210.1 133 210.7 132.8 211.5 132.2 211.9L127.6 214.4C127.4 214.6 127.2 214.6 127 214.6Z" stroke="black" fill="none"/>
 
 <path class="man" id ="man_Left4" d="M128.5 157.5C128.1 157.5 127.7 157.3 127.5 157L118.8 146.1C116.3 143.2 113.2 139.8 112.4 139.3 107.3 136.3 100.5 134.1 100.4 134 99.7 133.7 99.4 133 99.6 132.3 99.9 131.5 100.6 131.2 101.3 131.4 101.6 131.5 108.5 133.9 113.8 137.1 115.4 138 120 143.4 120.9 144.5L129.6 155.4C130.1 155.9 130 156.8 129.3 157.3 129.1 157.4 128.8 157.5 128.5 157.5Z" stroke="black" fill="none"/>
 
  <path class="man" id ="man_Left_Leg"   d="M75.9 346C70.5 346 63.4 345.8 63 345.8H61.6L61.7 344.4C61.7 343.7 64.2 275 67.6 228 67.7 227.2 68.3 226.7 69.1 226.8 69.8 226.8 70.4 227.5 70.3 228.2 67.1 271.6 64.8 333.3 64.3 343.2 69.3 343.3 79.1 343.5 81.2 343.2 81.6 343.1 81.8 342.5 81.9 342.4 82 341.8 81.9 340.8 81.3 340.5 80.8 340.1 80.2 339.8 79.6 339.6 79 339.2 78.4 338.9 77.6 338.5L76.9 338.1 77 337.2C78.7 322.3 80.9 305.1 83.5 285.1 85.7 268.4 87.9 251.2 90.2 232.7L90.2 232.1 90.8 231.7C91.5 231.2 92.5 231.2 93.7 231.3 93.8 231.3 94 231.3 94.2 231.3L95.4 231.2 95.6 232.4C102.2 263.6 114.5 333.1 116.2 342.7 119.6 342.7 130 342.7 133.2 342.8 133.2 342.7 133.5 342.4 133.6 341.8 133.7 341.4 133.7 340.5 132.7 339.7 131.9 339.1 131.7 339 130.3 338.4 130 338.3 129.6 338.1 129 337.9L128.4 337.5 128.3 336.8C126.7 322 123.6 298.5 120.9 277.9 118.8 261.7 116.9 246.4 115.8 237.3 115.7 236 115.4 231.7 115.2 228 115.1 225.7 115 223.6 114.9 223.1 114.8 222.4 115.4 221.7 116.1 221.6 116.9 221.6 117.5 222.1 117.6 222.9 117.7 223.4 117.8 225.4 117.9 227.8 118.1 231.3 118.3 235.7 118.5 236.9 119.6 246.1 121.5 261.3 123.6 277.5 126.2 297.8 129.3 320.9 130.9 335.7 131.1 335.8 131.3 335.9 131.5 336 132.8 336.6 133.2 336.8 134.3 337.6 136.2 339.1 136.4 341.2 136.1 342.7 135.8 344.2 134.8 345.1 133.6 345.3L133.3 345.1C133.3 345.1 133.3 345.1 133.2 345.1 129.7 345.1 115.2 345.2 115 345.2L113.9 345.3 113.7 344.2C113.5 343.5 100.3 267.9 93.2 234 93 234 92.8 234 92.8 234 90.6 252.2 88.2 269.8 86.2 285.4 83.6 305 81.4 321.9 79.7 336.6 80.1 336.9 80.5 337 80.8 337.2 81.4 337.5 82.1 337.9 82.7 338.3 84.4 339.4 84.8 341.5 84.4 343.2 84 344.8 82.9 345.8 81.4 345.9 80.6 346 78.4 346 75.9 346Z" stroke="black" fill="none">
     <!-- <animate attributeName="stroke-dashoffset" dur="10s" values="1030;0" fill="freeze" />  -->
  </path>
  
  <path class="man" id ="man_Left5" d="M96.8 136.7C96.4 136.7 96.1 136.7 95.9 136.4 95.3 135.9 95.3 135 95.8 134.5 97 133.2 98.5 132.3 99.4 131.8 99.3 130.6 99.1 128.3 99.3 125.5V124.8L99.9 124.4C102.6 123 104.3 119.1 104.7 113.2 105.5 100.8 104 97.4 104 97.4 103.7 96.8 103.9 96 104.6 95.6 105.2 95.3 106 95.6 106.4 96.2 106.5 96.5 108.2 100.1 107.3 113.4 106.9 119.9 105.1 124.2 101.9 126.4 101.8 129.9 102.1 132.4 102.1 132.5L102.3 133.6 101.2 134C101.2 134 99.3 134.7 97.7 136.4 97.5 136.6 97.1 136.7 96.8 136.7Z" stroke="black" fill="none"/>
  
  <path class="man" d="M88.4 105.4C87.6 105.4 87 104.8 87.1 104 87.1 102.6 88.5 99.9 92.8 99.9 93.6 99.9 94.3 99.9 95 99.9 100.1 100 102.9 99.9 104 97.6 103.2 94.7 100.5 91.3 95.9 90.2 89.2 88.6 84.5 92.4 83.2 95.1 81.4 98.9 81.9 103 81.9 103 81.9 103.8 81.4 104.4 80.7 104.6 80 104.7 79.3 104.2 79.2 103.5 79.2 103.3 78.5 98.6 80.7 94 82.8 89.5 89.2 85.8 96.6 87.6 101.8 88.8 105.8 92.7 106.8 97.4L106.9 97.8 106.7 98.2C105 102.7 100.3 102.6 95 102.6 94.3 102.6 93.7 102.6 92.9 102.6 90 102.6 89.8 104.1 89.8 104.1 89.7 104.8 89.1 105.4 88.4 105.4Z" fill="none" stroke="black"/>
  <path class="man" d="M79.5 135C79 135 78.6 134.8 78.4 134.4 78 133.7 78.2 132.9 78.8 132.6L81.4 131.1 81.6 117.4C81.6 116.6 82.3 116 83 116.1 83.7 116.1 84.3 116.7 84.3 117.5L84 132.8 80.1 134.9C80 135 79.7 135 79.5 135Z" fill="none" stroke="black"/>
  
  <path class="man" d="M84.7 118.1C84.6 118.1 84.6 118.1 84.5 118.1 80.7 117.6 79.4 115.6 78.9 114 78.1 111.3 79.7 108.4 82.4 107.5 84 107 85.8 107.2 87.1 108.2 87.6 108.6 87.8 109.5 87.4 110 87 110.6 86.1 110.8 85.5 110.4 84.9 110 84.1 109.8 83.3 110 81.9 110.5 81.1 112 81.5 113.3 81.8 114.1 82.3 115.2 84.9 115.5 85.6 115.6 86.1 116.2 86 117 85.9 117.6 85.4 118.1 84.7 118.1Z" fill="none" stroke="black"/>
  
  <path class="man" d="M119.7 200.2C119.6 200.2 119.5 200.2 119.3 200.1L84.2 190C83.7 189.8 83.4 189.5 83.2 189L75.5 153C75.3 152.3 75.8 151.6 76.6 151.4 77.3 151.2 78 151.7 78.2 152.4L85.8 187.6 119.6 197.5 124 195.1C124.6 194.8 125.4 195 125.8 195.7 126.1 196.3 125.8 197.1 125.2 197.5L120.4 200.1C120.2 200.1 120 200.2 119.7 200.2Z" fill="none" stroke="black"/>
  
  <path class="man" d="M133.4 204.8C133.3 204.8 133.2 204.8 133.1 204.8L128.2 203.7C127.5 203.6 127 202.8 127.1 202.1 127.3 201.4 128 200.9 128.8 201L133.7 202.1C134.4 202.3 134.8 203 134.7 203.7 134.6 204.4 134 204.8 133.4 204.8Z" fill="none" stroke="black"/>
  <path d="M115.2 212C115.1 212 115 212 115 212 114.3 211.9 113.8 211.2 113.9 210.5L114.7 204.9C114.8 204.2 115.5 203.7 116.2 203.8 117 203.9 117.4 204.6 117.4 205.4L116.6 210.9C116.4 211.5 115.8 212 115.2 212Z" fill="black"/>
  
  <path class="man" d="M97.7 127.3C96.3 127.3 94.5 127.1 92.8 126.1 92.2 125.7 92 124.9 92.4 124.2 92.8 123.6 93.6 123.3 94.2 123.7 96.9 125.3 100.2 124.3 100.2 124.3 100.9 124 101.6 124.4 101.9 125.2 102.1 125.9 101.7 126.6 101 126.9 100.9 126.9 99.5 127.3 97.7 127.3Z" fill="none" stroke="black"/> 
  
  <path class="dot" d="M266.9 305.8C266.9 307.1 265.8 308.2 264.5 308.2 263.2 308.2 262.2 307.1 262.2 305.8 262.2 304.5 263.2 303.4 264.5 303.4 265.8 303.4 266.9 304.5 266.9 305.8Z" fill="none" stroke="black"/> 
  
  <path class="man" d="M113.9 185.3C113.1 185.3 112.2 184.8 112.2 184V161.1C112.2 160.6 112.6 160.2 113 159.9 113.5 159.7 114 159.7 114.4 159.9L118.3 162.1C118.9 162.5 119.2 163.4 118.8 164 118.3 164.7 117.7 164.9 117 164.5L115.4 163.5V184.2C115.5 184.8 114.6 185.3 113.9 185.3Z" fill="none" stroke="black"/> 
  
  <path class="znack" d="M225.4 309.1C224.9 309.1 224.5 308.6 224.5 308.2 224.5 307.6 225 307.2 225.4 307.2H238.3C238.9 307.2 239.3 307.7 239.3 308.2 239.3 308.7 238.8 309.1 238.3 309.1H225.4Z" fill="none" stroke="black"/> 
  
  <path class="znack" d="M231.9 315.6C231.3 315.6 230.9 315.1 230.9 314.6V301.7C230.9 301.2 231.4 300.7 231.9 300.7 232.5 300.7 232.9 301.2 232.9 301.7V314.6C232.9 315.2 232.5 315.6 231.9 315.6Z" fill="none" stroke="black"/>
  <path class="znack" d="M26.3 244.6C25.7 244.6 25.3 244.1 25.3 243.6 25.3 243 25.8 242.6 26.3 242.6H39.2C39.7 242.6 40.2 243.1 40.2 243.6 40.2 244.2 39.7 244.6 39.2 244.6H26.3Z" fill="none" stroke="black"/>
  
  <path class="znack" d="M32.8 251C32.3 251 31.8 250.5 31.8 250V237.2C31.8 236.6 32.3 236.2 32.8 236.2 33.4 236.2 33.8 236.7 33.8 237.2V250C33.8 250.6 33.4 251 32.8 251Z" fill="none" stroke="black"/>
  
  <path class="znack" d="M327.3 17.9C326.8 17.9 326.4 17.4 326.4 16.9 326.4 16.4 326.8 16 327.3 16H337.8C338.4 16 338.8 16.4 338.8 16.9 338.8 17.5 338.3 17.9 337.8 17.9H327.3Z" fill="none" stroke="black"/>
  <path class="znack" d="M332.5 23.1C332 23.1 331.6 22.6 331.6 22.1V11.6C331.6 11.1 332.1 10.7 332.5 10.7 333.1 10.7 333.5 11.2 333.5 11.6V22.1C333.6 22.7 333.1 23.1 332.5 23.1Z" fill="none" stroke="black"/>
  
  <path class="znack" transform="translate(0,0)" d="M401.7 345.9H1.3C0.6 345.9 0 345.4 0 344.7 0 344 0.6 343.5 1.3 343.5H401.6C402.3 343.5 403 344 403 344.7 403 345.4 402.4 345.9 401.7 345.9Z" fill="none" stroke="black"/>
  
  <path class="arrow" d="M194.9 172.7C194.2 172.7 193.7 172.1 193.7 171.4V150.6C193.7 149.8 194.2 149.3 194.9 149.3 195.6 149.3 196.1 149.8 196.1 150.6V171.4C196.1 172.1 195.6 172.7 194.9 172.7Z" fill="none" stroke="#1a1a1a"/>
  <path class="arrow" d="M189.3 155.1L190.3 155.9 194.8 151.1 199.3 155.9 200.3 155.1 194.8 149.1 189.3 155.1Z" fill="none" stroke="#1a1a1a"/>
  
  <path class="dot" d="M159.2 136.9C159.2 138.2 158.2 139.2 156.9 139.2 155.6 139.2 154.7 138.1 154.7 136.9 154.7 135.6 155.7 134.6 156.9 134.6 158.3 134.6 159.2 135.6 159.2 136.9Z" fill="none" stroke="black"/>
  
  <path class="man2" d="M362.9 234.5C362.8 234.5 362.7 234.5 362.6 234.5 361.9 234.3 361.5 233.6 361.6 232.9L363.4 225.5 354.1 194.4 342.9 174.8 341.7 216.9C341.7 217.6 341 218.1 340.4 218.1H323.2C322.4 218.1 321.9 217.6 321.9 216.9 321.9 216.2 322.4 215.7 323.2 215.7H339.1L340.4 170C340.4 169.5 340.9 168.9 341.4 168.7 342 168.6 342.6 168.8 342.9 169.4L356.6 193.1C356.7 193.2 356.7 193.3 356.7 193.4L366.2 225.1C366.3 225.3 366.3 225.5 366.2 225.8L364.3 233.5C364.1 234.1 363.5 234.5 362.9 234.5Z" fill="none" stroke="black"/>
  
  <path class="man2" d="M375.1 238.5C374.9 238.5 374.6 238.4 374.4 238.2 373.8 237.8 373.7 236.9 374.1 236.4L376.6 232.8 374.8 223.7 365.3 186.1 345.3 147C344.2 146.3 339.8 143.3 334.9 141.5 334.2 141.3 333.9 140.5 334.1 139.8 334.3 139.1 335.2 138.8 335.8 139 341.8 141.1 346.9 144.9 347 145 347.2 145.2 347.4 145.4 347.5 145.5L367.7 185.2C367.8 185.3 367.8 185.3 367.8 185.4L377.4 223.1V223.2L379.3 232.9C379.4 233.3 379.3 233.7 379.1 234L376.2 238.1C376 238.2 375.6 238.5 375.1 238.5Z" fill="none" stroke="black"/> 
  
  <path class="man2" d="M307.8 139.1C307.7 139.1 307.6 139.1 307.5 139.1L300.1 137.5C299.8 137.4 299.6 137.2 299.4 137L281.6 115.1C281.5 115 281.4 114.8 281.3 114.7L269.8 82.8C269.7 82.5 269.7 82 269.8 81.8L273.3 74.3C273.6 73.7 274.4 73.3 275 73.7 275.7 74 276 74.8 275.7 75.5L272.5 82.5 283.8 113.6 301.3 134.9 308.1 136.5C308.8 136.7 309.3 137.4 309.2 138.1 309 138.7 308.4 139.1 307.8 139.1Z" fill="none" stroke="black"/>
  
  <path class="man2" d="M297.8 215.7C297 215.7 296.5 215 296.5 214.3L295.4 154.2C295.4 153.5 296 152.9 296.7 152.9 297.4 152.9 298.1 153.4 298.1 154.2L299.2 214.2C299.2 215 298.6 215.7 297.8 215.7Z" fill="none" stroke="black"/>
  
  <path class="man2" d="M296.3 345.9H296.1C294.9 345.8 294.1 344.8 293.8 343.5 293.4 341.7 294.1 339.8 295.7 338.7 296.6 337.9 297 337.8 298.3 337.1 298.5 337 298.6 337 298.7 337 299.1 323.6 297.3 268.1 297.3 267.5L296.3 211.1C296.3 210.4 296.9 209.7 297.6 209.7 298.3 209.7 299 210.3 299 211.1L300 267.5C300.1 269.8 301.8 326 301.4 337.9V338.7L300.6 339C300.1 339.2 299.7 339.4 299.4 339.6 298.2 340.1 298 340.2 297.2 340.8 296.4 341.4 296.3 342.1 296.3 342.5 296.3 342.9 296.5 343.2 296.5 343.2 299.6 343.2 310.2 342.9 313.8 342.8L314.5 301.2 316.7 258.9C316.7 258.2 317.4 257.6 318.1 257.6 318.9 257.6 319.4 258.3 319.4 259L317.2 301.3 316.4 345.4H315.1C314.5 345.4 299.6 345.9 296.3 345.9Z" fill="none" stroke="black"/>
  
  <path class="man2" d="M321.4 138.3C321.3 138.3 321.2 138.3 321.1 138.3L314.7 136.9 314.5 131.3C312.9 130.6 309.7 128.7 309.4 126.1 308 114 309.7 107.3 309.8 107 310 106.2 310.7 105.8 311.5 106 312.2 106.1 312.6 106.9 312.4 107.6 312.4 107.7 310.7 114.1 312.1 125.7 312.3 126.9 314.7 128.4 316.3 129.1L317.1 129.4 317.3 134.6 321.8 135.6C322.5 135.8 323 136.5 322.9 137.2 322.6 137.9 322 138.3 321.4 138.3Z" fill="none" stroke="black"/>
  
  <path class="man2" d="M334.7 115C334.6 115 334.5 115 334.4 115 333.7 114.8 333.2 114.2 333.4 113.5 333.4 113.5 334 109.8 332.3 105.5 330.5 102.7 325.5 99.1 319.1 100.6 315.9 101.4 314 103.2 312.7 106.5 314 109.3 316.6 110.9 321.7 111.7 322.3 111.8 325.3 111.8 327.3 111.8 328 111.8 328.6 112.2 328.6 112.9 328.6 113.6 328 114 327.3 114 326.4 114 322.3 114.2 321.4 114 315.1 113 311.7 110.9 310.2 107L310 106.5 310.2 106.1C311.8 101.6 314.4 99.1 318.6 98 326.4 96 332.7 100.7 334.8 104.1L334.9 104.3C337 109.4 336.2 113.7 336.2 113.9 335.8 114.5 335.3 115 334.7 115Z" fill="none" stroke="black"/>
  
  <path class="man2" d="M336.5 141.9C336.3 141.9 336.1 141.9 336 141.8L330.1 139.5 330.2 123.5C330.2 122.7 330.8 122.1 331.6 122.1 332.3 122.1 332.9 122.8 332.9 123.6L332.8 137.7 336.9 139.3C337.5 139.6 337.9 140.4 337.6 141.1 337.4 141.5 336.9 141.9 336.5 141.9Z" fill="none" stroke="black"/>
  <path class="man2" d="M330.3 124.9C329.7 124.9 329.1 124.4 329 123.8 328.9 123.1 329.4 122.3 330.1 122.3 332.4 121.8 333 120.9 333.1 120.1 333.4 119 332.8 117.8 331.7 117.4 331 117.3 330.3 117.4 329.7 117.8 329.1 118.3 328.2 118.1 327.8 117.5 327.3 117 327.5 116.1 328.1 115.7 329.3 114.8 330.9 114.4 332.4 114.8 335 115.6 336.5 118.3 335.7 120.9 335.3 122.3 334 124.3 330.6 124.9 330.5 124.9 330.4 124.9 330.3 124.9Z" fill="none" stroke="black"/>
  
  <path class="man2" d="M341.6 171.3C341.1 171.3 340.6 170.9 340.4 170.4L337.9 165.1C337.6 164.4 337.9 163.6 338.6 163.3 339.2 162.9 340 163.3 340.4 163.9L342.8 169.3C343.1 169.9 342.8 170.8 342.2 171.1 341.9 171.3 341.8 171.3 341.6 171.3Z" fill="none" stroke="black"/>
  
  <path class="man2" d="M347.3 345.8C345.7 345.8 344.4 345.8 343.5 345.8H343.5C342.1 345.6 341 344.6 340.5 343.2 340 341.5 340.4 339.9 341.6 339 342.1 338.6 343.1 337.8 344.1 336.9 340.4 323 328.8 280.5 328.8 280.5L317.7 237.2C316.7 236.8 314.4 235.9 312 234.7 311.4 234.3 311.1 233.5 311.5 232.9 311.8 232.2 312.6 232 313.2 232.3 316.4 233.8 319.3 234.9 319.4 234.9L320 235.1 331.4 279.7C331.4 279.7 343.4 323.9 346.9 336.9L347.1 337.7 346.6 338.3C345.4 339.3 343.9 340.5 343.3 341 343.1 341.2 343 341.8 343.1 342.4 343.1 342.5 343.4 343.1 343.7 343.1 346.6 343.2 357 343.1 361.1 343.1L347 275.1C347 274.6 339.7 229.1 338.3 216 338.2 215.3 338.8 214.6 339.6 214.6 340.3 214.5 340.9 215 341 215.8 342.3 228.8 349.6 274.1 349.7 274.6L364.2 345.7H362.6C362.2 345.7 353 345.8 347.3 345.8Z" fill="none" stroke="black"/>
  
  <path class="man2" d="M296.5 156.4C296.1 156.4 295.7 156.3 295.4 155.9L270 123.7C269.9 123.6 269.8 123.4 269.8 123.2L258.3 81.5C257.6 79.1 257.6 74.4 262.2 73.1 262.9 72.8 263.6 73.3 263.8 74 264.1 74.7 263.6 75.5 262.9 75.6 259.7 76.5 260.8 80.6 260.9 80.7L272.3 122.3 297.4 154.2C297.9 154.8 297.8 155.7 297.2 156.1 297 156.4 296.7 156.4 296.5 156.4Z" fill="none" stroke="black"/>
  <path class="man2" d="M319.5 193.6L312.8 186.5 317.4 148.1C317 147.3 316.1 145.5 315.1 143.8 314.7 143.2 315 142.4 315.6 141.9 316.3 141.5 317.1 141.8 317.5 142.4 318.8 144.7 320 147.1 320.1 147.2L320.3 147.5 315.6 185.5 319.7 189.7 324.3 185.3C324.1 181.2 322.6 157.7 321.6 147.7L321.5 147.2 324.6 142.6C325.1 141.9 325.9 141.8 326.5 142.3 327.2 142.7 327.3 143.5 326.8 144.1L324.2 148C325.3 159.1 326.9 185.4 327 185.7V186.4L319.5 193.6Z" fill="none" stroke="black"/> 
  
  <path class="znack" d="M135.9 42.3H115.6C114.8 42.3 114.3 41.8 114.3 41 114.3 40.3 114.8 39.7 115.6 39.7H135.9C136.7 39.7 137.2 40.3 137.2 41 137.2 41.8 136.8 42.3 135.9 42.3Z" fill="none" stroke="black"/>
  
  <path class="znack" d="M135.1 61.5H116.1C115.3 61.5 114.8 61 114.8 60.2 114.8 59.5 115.3 58.9 116.1 58.9H135.1C135.9 58.9 136.4 59.5 136.4 60.2 136.5 61 135.9 61.5 135.1 61.5Z" fill="none" stroke="black"/>
  
  <path class="znack" d="M135.9 80.7H115.6C114.8 80.7 114.3 80.2 114.3 79.4 114.3 78.7 114.8 78.1 115.6 78.1H135.9C136.6 78.1 137.2 78.7 137.2 79.4 137.2 80.2 136.6 80.7 135.9 80.7Z" fill="none" stroke="black"/> 
  
  <path class="znack" d="M136.5 100H115.7C114.9 100 114.4 99.4 114.4 98.6 114.4 97.9 114.9 97.3 115.7 97.3H136.5C137.2 97.3 137.8 97.9 137.8 98.6 137.8 99.3 137.2 100 136.5 100Z" fill="none" stroke="black"/>
  <path class="znack" d="M178.9 42.3H172.9C172.2 42.3 171.6 41.8 171.6 41 171.6 40.3 172.2 39.7 172.9 39.7H178.9C179.6 39.7 180.2 40.3 180.2 41 180.2 41.8 179.6 42.3 178.9 42.3Z" fill="none" stroke="black"/>
  <path class="znack" d="M179.2 61.8H172.9C172.2 61.8 171.6 61.2 171.6 60.5 171.6 59.7 172.2 59.2 172.9 59.2H179.2C179.9 59.2 180.5 59.7 180.5 60.5 180.5 61.2 179.9 61.8 179.2 61.8Z" fill="none" stroke="black"/>
  <path class="znack" d="M179.3 80.5H172.9C172.2 80.5 171.6 79.9 171.6 79.2 171.6 78.5 172.2 77.9 172.9 77.9H179.3C180.1 77.9 180.7 78.5 180.7 79.2 180.7 79.8 180.1 80.5 179.3 80.5Z" fill="none" stroke="black"/>
  <path class="znack" d="M179.6 100H172.9C172.2 100 171.6 99.4 171.6 98.6 171.6 97.9 172.2 97.3 172.9 97.3H179.6C180.3 97.3 180.9 97.9 180.9 98.6 180.9 99.3 180.3 100 179.6 100Z" fill="none" stroke="black"/>
  <path class="znack" d="M162.2 42.3H156.3C155.6 42.3 154.9 41.8 154.9 41 154.9 40.3 155.5 39.7 156.3 39.7H162.2C163 39.7 163.6 40.3 163.6 41 163.6 41.8 163 42.3 162.2 42.3Z" fill="none" stroke="black"/>
  <path class="znack" d="M162.5 61.8H156.2C155.5 61.8 154.8 61.2 154.8 60.5 154.8 59.7 155.4 59.2 156.2 59.2H162.5C163.2 59.2 163.8 59.7 163.8 60.5 163.9 61.2 163.3 61.8 162.5 61.8Z" fill="none" stroke="black"/>
  <path class="znack" d="M162.7 80.5H156.3C155.6 80.5 154.9 79.9 154.9 79.2 154.9 78.5 155.5 77.9 156.3 77.9H162.7C163.5 77.9 164 78.5 164 79.2 164 79.8 163.5 80.5 162.7 80.5Z" fill="none" stroke="black"/>
  <path class="znack" d="M162.9 100H156.2C155.5 100 154.8 99.4 154.8 98.6 154.8 97.9 155.4 97.3 156.2 97.3H162.9C163.6 97.3 164.2 97.9 164.2 98.6 164.3 99.3 163.7 100 162.9 100Z" fill="none" stroke="black"/>
 
 <path class="triangle" d="M237.9 34.7L232.5 44.8H243.3L237.9 34.7Z" fill="none" stroke="#231F20"/>
  <path  class="triangle" d="M237.9 72.9L232.5 83H243.3L237.9 72.9Z" fill="none" stroke="#231F20"/>
  <path class="triangle" d="M237.9 104.5L232.5 94.4H243.3L237.9 104.5Z" fill="none" stroke="#231F20"/>
  <path class="triangle" d="M237.9 66.3L232.5 56.2H243.3L237.9 66.3Z" fill="none" stroke="#231F20"/>

  <path class="znack" d="M217.1 42.3H193C192.3 42.3 191.7 41.8 191.7 41 191.7 40.3 192.3 39.7 193 39.7H217.1C217.9 39.7 218.4 40.3 218.4 41 218.4 41.8 217.9 42.3 217.1 42.3Z" fill="none" stroke="black"/>
  <path class="znack" d="M217.1 61.5H193C192.3 61.5 191.7 61 191.7 60.2 191.7 59.5 192.3 58.9 193 58.9H217.1C217.9 58.9 218.4 59.5 218.4 60.2 218.4 61 217.9 61.5 217.1 61.5Z" fill="none" stroke="black"/> 
  
  <path class="znack" d="M217.1 80.7H193C192.3 80.7 191.7 80.2 191.7 79.4 191.7 78.7 192.3 78.1 193 78.1H217.1C217.9 78.1 218.4 78.7 218.4 79.4 218.4 80.1 217.9 80.7 217.1 80.7Z" fill="none" stroke="black"/>
  <path class="znack"  d="M217.1 100H193C192.3 100 191.7 99.4 191.7 98.6 191.7 97.9 192.3 97.3 193 97.3H217.1C217.9 97.3 218.4 97.9 218.4 98.6 218.4 99.3 217.9 100 217.1 100Z" fill="none" stroke="black"/>
  <path class="znack" d="M276.7 41.5H257.9C257.1 41.5 256.6 40.9 256.6 40.2 256.6 39.5 257.1 38.9 257.9 38.9H276.7C277.4 38.9 278 39.5 278 40.2 278.1 40.9 277.4 41.5 276.7 41.5Z" fill="none" stroke="black"/>
  <path class="znack" d="M268.7 60.5H257.9C257.1 60.5 256.6 59.9 256.6 59.2 256.6 58.4 257.1 57.9 257.9 57.9H268.7C269.4 57.9 270 58.4 270 59.2 270.1 59.8 269.4 60.5 268.7 60.5Z" fill="none" stroke="black"/>
  
  <path class="border" d="M279 21.9H100.6C99.9 21.9 99.3 21.3 99.3 20.6 99.3 19.9 99.9 19.3 100.6 19.3H279C279.7 19.3 280.3 19.9 280.3 20.6 280.3 21.3 279.7 21.9 279 21.9Z" fill="none" stroke="black"/>
  
  <path  class="znack" d="M304 21.9H285.5C284.7 21.9 284.2 21.3 284.2 20.6 284.2 19.9 284.7 19.3 285.5 19.3H304C304.7 19.3 305.3 19.9 305.3 20.6 305.3 21.3 304.7 21.9 304 21.9Z" fill="none" stroke="black"/>
  <path class="man2" d="M268.9 78.6C268.3 78.6 267.8 78.3 267.6 77.7L264.6 69C264.4 68.3 264.8 67.6 265.4 67.3 266.2 67.1 266.9 67.5 267.1 68.1L270.1 76.8C270.3 77.6 269.9 78.3 269.3 78.5 269.1 78.6 268.9 78.6 268.9 78.6Z" fill="none" stroke="black"/>
  <path class="man2" d="M261.9 91C261.3 91 260.7 90.6 260.6 90 260.3 89.3 260.7 88.6 261.4 88.3L267 86.6C267.7 86.4 268.5 86.8 268.7 87.5 268.9 88.2 268.5 89 267.8 89.2L262.3 90.9C262.1 91 261.9 91 261.9 91Z" fill="none" stroke="black"/>
  <path class="znack"  d="M224.5 149.6L216.4 141.5 224.5 133.3 232.7 141.5 224.5 149.6ZM219.3 141.4L224.5 146.7 229.8 141.4 224.5 136.1 219.3 141.4Z" fill="none" stroke="black"/>
  
  <path class="arrow" d="M275.5 208.9C274.8 208.9 274.3 208.4 274.3 207.6V176.6L267.8 168.6V157.9C267.8 157.2 268.7 156.6 269.4 156.6 270.2 156.6 271.1 157.2 271.1 157.9V167.7L276.8 175.7V207.6C276.8 208.4 276.3 208.9 275.5 208.9Z" fill="none" stroke="#1A1A1A"/>
  <path class="arrow" d="M262.9 163.2L264.1 164.3 269.5 158.5 274.9 164.3 276.1 163.2 269.5 156.1 262.9 163.2Z" fill="none" stroke="#1A1A1A"/>
  
  <path class="diagram" d="M232.9 225H230.2V165.9H245.7V224.4H243V168.6H232.9V225Z" fill="none" stroke="black"/>
  <path class="diagram" d="M264.9 248.1H262.2V200.1H252.4V228.3H249.7V197.4H264.9V248.1Z" fill="none" stroke="black"/>
  <path class="diagram" d="M213.7 237.3H211V187.4H226.2V231H223.5V190.1H213.7V237.3Z" fill="none" stroke="black"/>
  <path class="diagram" d="M207.1 232.2H204.4V203.1H194.7V223.4H192.1V200.4H207.1V232.2Z" fill="none" stroke="black"/>
  <path class="arrow" d="M246.6 262.9H244.2V285.7H246.6V262.9Z" fill="none" stroke="black"/>
  
  <path class="znack" d="M174.9 292.2H171.7V308.5H174.9V292.2Z" fill="none" stroke="black"/> 
  
  <path class="znack" d="M186.8 190.8C186 190.8 185.5 190.2 185.5 189.5V175.4C185.5 174.7 186 174.1 186.8 174.1 187.5 174.1 188 174.7 188 175.4V189.5C188 190.2 187.5 190.8 186.8 190.8Z" fill="none" stroke="black"/>
  <path class="znack" d="M341.1 43.1H338.7V64.3H341.1V43.1Z" fill="none" stroke="black"/> 
  
  <path class="curve" d="M266.1 261.8C265.8 261.8 265.7 261.8 265.4 261.8 259.7 261.6 254.6 254.6 249.7 247.9 245.4 241.9 240.9 235.7 236.8 235.6 235 235.6 233.3 236.7 231.5 239 231 239.6 230.5 240.3 230 240.9 226.2 245.9 221.9 251.5 214.7 252 207 252.5 197.5 246.9 185.5 234.9 177.2 226.6 169.7 222.9 162.5 223.6 150.6 224.7 141.6 238.1 134.4 248.8 133.2 250.6 132.1 252.2 131 253.8 130.6 254.4 129.7 254.5 129.1 254.1 128.5 253.7 128.4 252.8 128.8 252.2 129.8 250.7 131 249.1 132.2 247.3 139.8 236.1 149.1 222.2 162.2 220.9 170.3 220.1 178.5 224.1 187.5 233 198.9 244.4 207.8 249.7 214.6 249.3 220.6 248.9 224.4 244 228 239.3 228.5 238.6 229 238 229.5 237.3 231.9 234.4 234.4 232.9 237 233 242.5 233.1 247.2 239.6 252.1 246.5 256.6 252.6 261.2 259.1 265.8 259.3 273.9 259.6 277.5 251.7 280.3 245.4 280.8 244.3 281.3 243.2 281.8 242.2 282.1 241.6 282.9 241.3 283.6 241.7 284.3 242 284.5 242.8 284.2 243.4 283.7 244.3 283.2 245.4 282.7 246.5 279.5 252.9 275.5 261.8 266.1 261.8Z" fill="none" stroke="black"/>
</svg>

3
  • Мне все анимировать не нужно. Долгая прорисовка получается. Нужно только диаграмму и внутри верхнего красного квадрата линии и треугольник. Единственное что толщина линий в итоге получается больше чем в оригинале. 27 мая 2020 в 15:23
  • @Сергей Сейчас дополнительный ответ сделаю, где только графики оставлю, а остальное уберу. Жалко этот вариант удалять 27 мая 2020 в 15:25
  • а как толщиной управлять? 27 мая 2020 в 15:34
2

Выбрал реализацию анимации с помощью stroke-dasharray

Так как объектов анимации очень много, то очень затруднительно писать для каждого объекта свою анимацию.
Решил разбить объекты на группы по функциональному признаку и, чтобы у каждой группы были примерно равны длины контуров.
Каждой группе присваивается свой класс, например - для человека слева - class="man", для фигуры справа - class="man2", для бордюров - class="border", для стрелок - class="arrow" и так далее.

Элементы SVG нарисованы изначально двойными контурами, поэтому применены для рисования линий две анимации:

  1. Анимация stroke-dasharray
  2. Анимация заполнением цветом внутреннего контура
.man {
stroke-dasharray:0,1030;
animation:man_draw 5s linear forwards,man_fill 2s forwards 4.5s;
}
@keyframes man_draw{
100% {stroke-dasharray:1030,0;}
} 

@keyframes man_fill{
0% {fill:none;}
100% {fill:black;}
} 

Вторая анимация, заполнение цветом, начнется после окончания первой анимации рисования линии с задержкой равной продолжительности рисования линии.

Далее начинается анимация для следующего класса функциональной группы class="man2"

И так далее для остальных классов.

Update

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

  1. Полный вариант анимации

  2. Сокращенный вариант

1
  • Круто. прикольно получается.... 27 мая 2020 в 15:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.