有svg
.pict path {
stroke-width: 2;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 2s linear forwards;
}
@keyframes dash {
to {
stroke: black;
stroke-dashoffset: 0;
}
}
<div class="pict">
<svg class="pict__icon" width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M52.7299 229.162C57.7491 229.167 62.6786 227.842 67.0195 225.325C75.4615 232.771 87.4813 234.581 97.74 229.949C107.999 225.318 114.592 215.105 114.592 203.848V32.7414C114.614 23.4661 109.392 14.9732 101.105 10.8068C92.8153 6.64028 82.886 7.51718 75.4542 13.0668C68.0223 18.6165 64.3646 27.8918 66.0069 37.0193C53.1417 33.422 39.3342 37.0483 29.899 46.5029C20.4614 55.9598 16.8642 69.7746 20.4905 82.6326C13.1289 85.9415 7.59379 92.3197 5.35552 100.074C3.11724 107.83 4.40352 116.175 8.87281 122.897C10.1421 124.811 11.6488 126.555 13.3542 128.093C3.1996 136.513 -1.69117 149.711 0.522881 162.714C2.73935 175.717 11.7215 186.552 24.0902 191.136V200.525C24.1095 216.333 36.9215 229.145 52.7299 229.162ZM7.4436 156.5C7.46298 140.215 20.6601 127.015 36.9481 126.998C39.0023 126.998 40.6689 125.332 40.6689 123.278C40.6689 121.221 39.0023 119.557 36.9481 119.557C30.9794 119.552 25.1003 121.003 19.8171 123.784C14.5799 119.891 11.5641 113.695 11.7336 107.174C11.9032 100.653 15.2388 94.6209 20.6698 91.0067C21.4861 90.4665 22.3412 89.9845 23.2254 89.5678C23.4918 90.0814 23.7656 90.5901 24.0538 91.0915C24.7151 92.2543 25.9481 92.9737 27.2853 92.9761C28.62 92.9785 29.8578 92.2639 30.5216 91.1036C31.1853 89.9433 31.1756 88.5165 30.4949 87.3635C23.5136 75.2637 25.9723 59.9277 36.3861 50.6185C46.7999 41.3069 62.3152 40.5753 73.5599 48.8623C74.6306 49.6568 76.0428 49.8215 77.2637 49.291C78.487 48.7581 79.3324 47.6147 79.4802 46.2897C79.6279 44.9671 79.0563 43.6638 77.9831 42.8766C77.082 42.2104 76.1543 41.5951 75.2071 41.0162C71.7455 34.7834 72.528 27.0512 77.1717 21.6396C81.8153 16.228 89.3368 14.2804 96.025 16.7561C102.711 19.2318 107.151 25.6075 107.151 32.7389V203.848C107.156 211.917 102.575 219.288 95.3395 222.859C88.1038 226.43 79.4681 225.579 73.0657 220.667C78.3877 215.316 81.372 208.073 81.3672 200.527C81.3672 198.471 79.703 196.806 77.6464 196.806C75.5923 196.806 73.9257 198.471 73.9257 200.527C73.9257 212.232 64.4372 221.723 52.7299 221.723C41.0226 221.723 31.5317 212.232 31.5317 200.527V193.044C33.3243 193.311 35.1362 193.447 36.9481 193.447C39.0023 193.447 40.6689 191.78 40.6689 189.726C40.6689 187.672 39.0023 186.005 36.9481 186.005C20.6625 185.986 7.46298 172.789 7.4436 156.5Z" fill="#BDC4CA"/>
<path d="M84.7566 123.246C85.5851 117.785 84.0953 112.226 80.6434 107.914C79.3571 106.313 77.0147 106.056 75.4111 107.343C73.8099 108.626 73.5531 110.969 74.837 112.573C77.6445 116.083 78.3204 120.84 76.6029 124.992C68.6406 128.563 63.963 136.932 65.0918 145.587C65.3364 147.435 66.911 148.821 68.7762 148.823C68.9409 148.821 69.1032 148.811 69.268 148.789C71.3052 148.523 72.7392 146.653 72.4703 144.616C72.2281 142.777 72.4074 140.905 72.996 139.144C74.2314 135.416 77.1697 132.499 80.9075 131.288C84.6428 130.077 88.7341 130.716 91.9244 133.01C93.591 134.212 95.9165 133.834 97.118 132.165C98.3195 130.498 97.9416 128.173 96.2726 126.971C92.9176 124.556 88.8892 123.253 84.7566 123.246Z" fill="#BDC4CA"/>
<path d="M43.823 110.242C45.2595 108.771 45.2304 106.417 43.7625 104.98C42.5319 103.774 41.6841 102.233 41.3231 100.547C43.6559 96.7975 44.3584 92.258 43.2707 87.9752C42.7596 85.9865 40.7321 84.7874 38.7409 85.2985C36.7497 85.8096 35.5506 87.8372 36.0642 89.8283C37.0888 93.8616 35.1509 98.062 31.418 99.9006C29.5698 100.802 28.8019 103.028 29.7006 104.876C30.6017 106.722 32.8279 107.492 34.6761 106.591C34.9595 106.453 35.2284 106.296 35.5022 106.143C36.2919 107.681 37.3262 109.084 38.5592 110.297C40.0296 111.734 42.3841 111.705 43.8206 110.237L43.823 110.242Z" fill="#BDC4CA"/>
<path d="M62.7902 65.5253C66.184 64.663 69.7643 65.896 71.9056 68.6647C74.0494 71.4335 74.3425 75.21 72.6566 78.2767C72.0074 79.4419 72.034 80.8638 72.7196 82.0048C73.4075 83.1481 74.655 83.8336 75.9873 83.807C77.3196 83.7779 78.5333 83.0391 79.1728 81.8691C80.6553 79.173 81.3432 76.1087 81.1567 73.0371C85.3643 72.933 89.3637 71.1913 92.3044 68.1827C93.2443 67.2355 93.6053 65.8548 93.2492 64.5685C92.8907 63.2798 91.8708 62.2818 90.5773 61.9548C89.2813 61.6277 87.9103 62.0177 86.9825 62.9819C84.8242 65.1838 81.6654 66.0873 78.6689 65.3655C78.6059 65.2613 78.5454 65.1571 78.4751 65.0554C74.655 59.3095 67.6229 56.6086 60.9396 58.3139C58.9484 58.8251 57.7493 60.8526 58.2604 62.8438C58.7715 64.835 60.7991 66.034 62.7902 65.5229V65.5253Z" fill="#BDC4CA"/>
<path d="M50.7513 176.09C50.7828 176.225 50.8216 176.359 50.8676 176.492C52.1781 181.412 51.0396 186.663 47.8033 190.597C46.5219 192.184 46.7569 194.507 48.3314 195.806C49.9059 197.104 52.2314 196.893 53.5443 195.331C56.8315 191.339 58.6919 186.363 58.8348 181.194C65.414 182.926 72.4243 181.676 78.0006 177.776C79.6818 176.596 80.0911 174.278 78.9139 172.594C77.7342 170.911 75.4135 170.501 73.73 171.681C68.941 175.022 62.6936 175.443 57.5001 172.769C56.3422 169.525 54.4745 166.582 52.0376 164.15C51.0977 163.198 49.7218 162.822 48.4307 163.164C47.1396 163.508 46.1295 164.518 45.7879 165.809C45.4463 167.103 45.8242 168.479 46.7787 169.414C48.639 171.274 50.0053 173.568 50.7513 176.09Z" fill="#BDC4CA"/>
<path d="M230.053 103.189C236.448 101.637 240.677 95.5541 239.905 89.0185C239.132 82.4805 233.602 77.551 227.02 77.5316L212.386 57.1497C216.313 52.8912 216.943 46.547 213.934 41.5981C210.926 36.6492 205.001 34.2922 199.415 35.8183L184.406 29.6073L182.896 19.9057C182.695 18.6049 181.823 17.51 180.602 17.0207L167.173 11.6503C165.911 5.50228 160.443 1.13231 154.169 1.25343C147.898 1.37455 142.605 5.95526 141.583 12.1444L126.629 22.0229C125.849 22.5388 125.292 23.3285 125.067 24.2369L121.656 38.0517C121.584 38.3424 121.547 38.6428 121.547 38.9432V203.849C121.547 204.481 121.71 205.101 122.015 205.653L129.234 218.669C126.46 222.944 126.436 228.446 129.173 232.745C131.913 237.045 136.908 239.349 141.956 238.641C147.004 237.934 151.175 234.346 152.626 229.46H171.526C174.086 235.71 181.002 238.961 187.448 236.95C193.894 234.937 197.731 228.329 196.28 221.733L205.374 210.723C210.809 211.477 216.129 208.732 218.67 203.871C221.211 199.009 220.426 193.076 216.706 189.043C218.157 188.256 219.554 187.372 220.887 186.396C227.095 189.692 234.798 187.464 238.287 181.362C241.772 175.26 239.784 167.491 233.791 163.817V137.061C233.791 135.591 232.926 134.259 231.581 133.66L223.963 130.274C224.169 129.932 224.319 129.559 224.404 129.169L230.053 103.189ZM232.55 90.5518C232.55 93.6331 230.053 96.133 226.969 96.133C223.888 96.133 221.388 93.6331 221.388 90.5518C221.388 87.4682 223.888 84.9707 226.969 84.9707C230.05 84.9731 232.548 87.4706 232.55 90.5518ZM208.365 48.3831C208.365 51.4644 205.868 53.9643 202.784 53.9643C199.703 53.9643 197.203 51.4644 197.203 48.3831C197.203 45.2995 199.703 42.802 202.784 42.802C205.865 42.8044 208.363 45.3019 208.365 48.3831ZM154.414 8.69497C157.498 8.69497 159.995 11.1924 159.995 14.2761C159.995 17.3574 157.498 19.8573 154.414 19.8573C151.333 19.8573 148.833 17.3574 148.833 14.2761C148.838 11.1949 151.335 8.69739 154.414 8.69497ZM140.151 76.2889H151.934V91.7194C146.415 93.3618 142.632 98.4367 142.632 104.195C142.632 109.953 146.415 115.025 151.934 116.667V122.171H128.989V56.9002H136.43V72.5681C136.43 74.6223 138.097 76.2889 140.151 76.2889ZM174.503 76.2889C175.436 81.0416 178.921 84.8883 183.56 86.2812V100.474H168.13C166.868 96.2711 163.578 92.9839 159.375 91.7194V76.2889H174.503ZM187.281 79.3895C184.2 79.3895 181.7 76.8896 181.7 73.8084C181.7 70.7247 184.2 68.2272 187.281 68.2272C190.365 68.2272 192.862 70.7247 192.862 73.8084C192.86 76.8896 190.362 79.3847 187.281 79.3895ZM155.654 109.776C152.573 109.776 150.073 107.276 150.073 104.195C150.073 101.111 152.573 98.6135 155.654 98.6135C158.738 98.6135 161.236 101.111 161.236 104.195C161.233 107.276 158.736 109.771 155.654 109.776ZM128.989 173.649H151.243C152.505 177.852 155.795 181.139 159.995 182.401V192.253C159.995 194.307 161.662 195.974 163.716 195.974H179.839V212.024C175.201 213.417 171.715 217.264 170.782 222.019H152.626C151.568 218.46 149.039 215.522 145.679 213.948C142.317 212.371 138.441 212.308 135.028 213.771L128.989 202.882V173.649ZM163.716 175.509C160.635 175.509 158.135 173.009 158.135 169.928C158.135 166.845 160.635 164.347 163.716 164.347C166.8 164.347 169.297 166.845 169.297 169.928C169.295 173.009 166.797 175.505 163.716 175.509ZM140.151 231.321C137.07 231.321 134.57 228.821 134.57 225.74C134.57 222.656 137.07 220.159 140.151 220.159C143.235 220.159 145.732 222.656 145.732 225.74C145.73 228.821 143.232 231.316 140.151 231.321ZM183.56 230.081C180.479 230.081 177.979 227.581 177.979 224.499C177.979 221.416 180.479 218.918 183.56 218.918C186.644 218.918 189.141 221.416 189.141 224.499C189.139 227.581 186.641 230.076 183.56 230.081ZM192.298 214.871C190.859 213.558 189.146 212.586 187.281 212.024V192.253C187.281 190.196 185.617 188.532 183.56 188.532H167.437V182.401C173.406 180.623 177.279 174.867 176.678 168.669C176.08 162.47 171.172 157.564 164.976 156.966C158.777 156.365 153.021 160.239 151.243 166.207H128.989V129.613H164.549L170.036 151.007C170.458 152.654 171.94 153.805 173.638 153.805H195.892C197.155 158.008 200.444 161.295 204.645 162.557V185.054C199.802 185.986 195.902 189.581 194.58 194.331C193.257 199.084 194.739 204.176 198.404 207.477L192.298 214.871ZM208.365 155.665C205.284 155.665 202.784 153.165 202.784 150.084C202.784 147 205.284 144.503 208.365 144.503C211.449 144.503 213.946 147 213.946 150.084C213.944 153.165 211.447 155.66 208.365 155.665ZM207.125 203.415C206.682 203.413 206.241 203.357 205.81 203.25C205.468 203.064 205.098 202.931 204.715 202.858C202.164 201.623 200.95 198.667 201.893 195.995C202.837 193.324 205.638 191.785 208.399 192.425C211.161 193.064 213.002 195.676 212.675 198.49C212.35 201.305 209.959 203.427 207.125 203.418V203.415ZM226.969 180.47C224.811 180.48 222.841 179.242 221.911 177.295C220.981 175.347 221.257 173.039 222.619 171.365C223.982 169.691 226.189 168.952 228.285 169.47C228.626 169.657 228.994 169.79 229.377 169.86C231.729 170.982 232.991 173.586 232.415 176.127C231.838 178.668 229.576 180.473 226.969 180.47ZM226.349 161.898C221.88 162.104 217.83 164.597 215.63 168.492C213.428 172.387 213.384 177.142 215.516 181.078C214.419 181.81 213.273 182.466 212.086 183.043V162.557C218.055 160.779 221.928 155.023 221.327 148.824C220.729 142.626 215.821 137.72 209.625 137.122C203.426 136.521 197.671 140.395 195.892 146.363H176.526L171.041 124.969C170.62 123.322 169.137 122.171 167.437 122.171H159.375V116.667C163.578 115.405 166.868 112.118 168.13 107.915H198.407V124.55C198.426 126.052 199.298 127.411 200.655 128.057L226.349 139.479V161.898ZM205.848 122.224V104.195C205.848 102.138 204.182 100.474 202.128 100.474H191.002V86.2812C196.813 84.5516 200.66 79.0383 200.279 72.9872C199.899 66.9361 195.391 61.9484 189.41 60.9601C183.427 59.9694 177.555 63.2396 175.247 68.8474H143.872V53.1795C143.872 51.1253 142.208 49.4587 140.151 49.4587H128.989V39.3961L131.944 27.432L142.847 20.2279C145.153 24.7238 149.853 27.4756 154.901 27.2891C159.949 27.1026 164.433 24.0116 166.405 19.3607L175.872 23.1444L179.885 48.9548C180.203 50.9848 182.104 52.3752 184.134 52.0579C186.164 51.743 187.555 49.8414 187.24 47.8115L185.748 38.2164L192.167 40.8714C188.991 45.314 188.935 51.2706 192.026 55.7714C195.12 60.2722 200.696 62.3578 205.984 60.9916L219.542 79.8716C215.545 82.6428 213.431 87.4125 214.058 92.233C214.688 97.0559 217.956 101.123 222.529 102.775L217.205 127.27L205.848 122.224Z" fill="#BDC4CA"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="240" height="240" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
如何为给定的 svg 设置动画 - 比如用不同的颜色填充轮廓?
像这样的东西?