仅使用 JS 或 CSS 的 Svg 动画

Question

我想在网站初始化时为 svg 制作动画。

我可以仅用 JS 或 CSS 创建一些类似视频的动画吗？ https://elements.envato.com/dots-logo-reveal-2in1-V72XYFP

这是 svg：

<svg width="701" height="116" viewBox="0 0 701 116" fill="none" xmlns="http://www.w3.org/2000/svg">
  <mask id="mask0_10_37" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="175" height="116">
    <path d="M98.9317 113.213C98.783 114.239 99.5055 115.161 100.525 115.307C101.567 115.454 102.501 114.742 102.65 113.737C102.799 112.731 102.076 111.789 101.057 111.642C100.972 111.642 100.865 111.642 100.78 111.642C99.8667 111.642 99.0592 112.313 98.9317 113.234M83.7393 111.056C83.548 112.313 84.4405 113.464 85.7153 113.653C86.969 113.841 88.1589 112.962 88.3501 111.705C88.5414 110.47 87.6489 109.297 86.374 109.108C86.2678 109.108 86.1403 109.108 86.0553 109.108C84.9079 109.108 83.9092 109.925 83.7605 111.077M68.3768 108.878C68.1856 110.135 69.078 111.286 70.3529 111.475C71.6278 111.663 72.7964 110.784 72.9876 109.548C73.1789 108.292 72.2865 107.14 71.0116 106.951C70.9053 106.951 70.7778 106.951 70.6716 106.951C69.5454 106.951 68.5468 107.768 68.3768 108.92M53.758 106.763C53.6093 107.768 54.3317 108.71 55.3516 108.857C56.3928 109.004 57.3489 108.292 57.4764 107.286C57.6252 106.26 56.9027 105.339 55.8828 105.192C55.7978 105.192 55.6916 105.192 55.6278 105.192C54.7142 105.192 53.9067 105.862 53.7792 106.784M130.868 102.135C130.677 103.391 131.569 104.543 132.844 104.731C134.119 104.92 135.287 104.04 135.479 102.784C135.67 101.548 134.778 100.376 133.503 100.187C133.396 100.187 133.269 100.187 133.184 100.187C132.036 100.187 131.059 101.004 130.889 102.156M114.889 99.831C114.634 101.59 115.867 103.203 117.651 103.454C119.415 103.705 121.072 102.491 121.327 100.732C121.582 98.9934 120.35 97.3599 118.586 97.1086C118.416 97.1086 118.268 97.0667 118.119 97.0667C116.525 97.0667 115.144 98.2185 114.91 99.8101M99.8029 97.7368C99.5479 99.475 100.78 101.109 102.565 101.36C104.329 101.611 105.986 100.396 106.241 98.6583C106.496 96.8991 105.264 95.2866 103.5 95.0353C103.351 95.0353 103.203 94.9934 103.033 94.9934C101.439 94.9934 100.037 96.1452 99.8029 97.7368ZM85.0354 95.6636C84.7804 97.4018 86.0128 99.0352 87.7977 99.2865C89.5613 99.5379 91.2186 98.3232 91.4736 96.585C91.7286 94.8259 90.4962 93.2133 88.7113 92.962C88.5414 92.9411 88.3926 92.9201 88.2439 92.9201C86.6503 92.9201 85.2691 94.072 85.0354 95.6636ZM69.6729 93.4646C69.418 95.2238 70.6504 96.8363 72.414 97.0876C74.1988 97.3389 75.8349 96.1243 76.0899 94.3861C76.3449 92.627 75.1125 91.0144 73.3276 90.7631C73.1576 90.7422 73.0089 90.7212 72.8602 90.7212C71.2665 90.7212 69.8854 91.873 69.6517 93.4646M54.6079 91.3495C54.353 93.1086 55.5853 94.7212 57.3702 94.9725C59.1338 95.2238 60.7912 94.0091 61.0461 92.2709C61.3011 90.5118 60.0687 88.8993 58.3051 88.648C58.1564 88.648 58.0076 88.627 57.8377 88.627C56.244 88.627 54.8629 89.7788 54.6292 91.3704M40.4566 89.339C40.2654 90.5746 41.1578 91.7474 42.4327 91.9359C43.7076 92.1243 44.8762 91.2448 45.0675 89.9883C45.2587 88.7317 44.3663 87.5799 43.0914 87.3914C42.9851 87.3914 42.8577 87.3914 42.7514 87.3914C41.6253 87.3914 40.6266 88.2082 40.4566 89.36M149.248 89.1506C149.056 90.3862 149.949 91.5589 151.224 91.7474C152.499 91.9359 153.667 91.0563 153.858 89.7998C154.05 88.5432 153.157 87.3914 151.904 87.2029C151.797 87.2029 151.67 87.182 151.564 87.182C150.416 87.182 149.439 87.9987 149.269 89.1506M25.3916 87.2029C25.2004 88.4385 26.0928 89.6113 27.3677 89.7998C28.6213 89.9883 29.8112 89.1087 30.0025 87.8731C30.1725 86.6166 29.3013 85.4648 28.0264 85.2763C27.9201 85.2763 27.7927 85.2763 27.7077 85.2763C26.5603 85.2763 25.5828 86.093 25.4129 87.2448M132.164 86.7422C131.909 88.4804 133.141 90.1139 134.926 90.3652C136.711 90.6165 138.347 89.4019 138.602 87.6637C138.857 85.9045 137.625 84.292 135.861 84.0407C135.712 84.0198 135.542 83.9988 135.394 83.9988C133.8 83.9988 132.398 85.1506 132.164 86.7422ZM115.739 84.3967C115.378 86.9098 117.141 89.2134 119.67 89.5903C122.22 89.9464 124.557 88.2082 124.918 85.7161C125.28 83.2239 123.516 80.8994 120.987 80.5434C120.754 80.5015 120.541 80.5015 120.329 80.5015C118.055 80.5015 116.079 82.1559 115.739 84.4177M99.7392 82.1559C99.293 85.1506 101.418 87.9359 104.456 88.3757C107.516 88.7946 110.342 86.7213 110.767 83.7266C111.213 80.7109 109.088 77.9465 106.05 77.5067C105.795 77.4649 105.519 77.4439 105.264 77.4439C102.544 77.4439 100.143 79.4125 99.7604 82.1559M84.9717 80.0617C84.5467 83.0564 86.6503 85.8417 89.6888 86.2815C92.7485 86.7003 95.5533 84.6271 95.9995 81.6323C96.4245 78.6376 94.3209 75.8523 91.2824 75.4125C91.0274 75.3707 90.7512 75.3497 90.4962 75.3497C87.7764 75.3497 85.3754 77.3183 84.9929 80.0617M165.906 75.9152C165.757 76.9413 166.48 77.8837 167.5 78.0094C168.52 78.156 169.476 77.4439 169.625 76.4387C169.773 75.4125 169.051 74.4701 168.031 74.3445C167.925 74.3445 167.84 74.3445 167.755 74.3445C166.841 74.3445 166.034 75.0146 165.906 75.9361M69.6092 77.8837C69.1842 80.8784 71.2878 83.6637 74.3263 84.1035C77.386 84.5433 80.1908 82.4491 80.637 79.4544C81.062 76.4387 78.9584 73.6743 75.9199 73.2346C75.6437 73.1927 75.3887 73.1717 75.1125 73.1717C72.3927 73.1717 70.0129 75.1403 69.6092 77.8837ZM55.4579 75.8733C55.0966 78.3863 56.8602 80.69 59.41 81.046C61.9386 81.402 64.2971 79.6847 64.6583 77.1717C65.0196 74.6796 63.256 72.355 60.7274 71.999C60.4937 71.9571 60.2812 71.9571 60.0475 71.9571C57.7739 71.9571 55.7978 73.6115 55.4579 75.8733ZM150.565 73.7581C150.31 75.4963 151.542 77.1298 153.306 77.3811C155.091 77.6324 156.727 76.4178 156.982 74.6796C157.237 72.9204 156.004 71.3079 154.241 71.0566C154.092 71.0566 153.943 71.0356 153.773 71.0356C152.18 71.0356 150.777 72.1875 150.565 73.7791M40.3929 73.7372C40.0316 76.2293 41.7952 78.5539 44.3238 78.9099C46.8523 79.2659 49.2109 77.5277 49.5721 75.0356C49.9333 72.5225 48.1697 70.2189 45.6412 69.8629C45.4074 69.8419 45.195 69.821 44.9612 69.821C42.6877 69.821 40.7116 71.4754 40.3716 73.7581M26.6877 71.7896C26.4328 73.5487 27.6652 75.1612 29.45 75.4125C31.2136 75.6638 32.871 74.4492 33.126 72.711C33.3809 70.9519 32.1485 69.3393 30.3637 69.088C30.215 69.0671 30.045 69.0461 29.8962 69.0461C28.3026 69.0461 26.9215 70.198 26.6877 71.7896ZM12.5364 69.8001C12.3452 71.0566 13.2376 72.2084 14.5125 72.3969C15.7874 72.5854 16.9561 71.7058 17.1473 70.4493C17.3385 69.1927 16.4461 68.0409 15.1712 67.8524C15.065 67.8524 14.9375 67.8315 14.8525 67.8315C13.7051 67.8315 12.7064 68.6482 12.5577 69.8001M133.035 71.266C132.674 73.7581 134.438 76.0827 136.966 76.4387C139.516 76.7947 141.853 75.0565 142.236 72.5644C142.597 70.0723 140.833 67.7477 138.305 67.3917C138.071 67.3708 137.859 67.3498 137.646 67.3498C135.372 67.3498 133.375 69.0043 133.056 71.2869M117.035 69.0043C116.589 71.999 118.714 74.7843 121.752 75.2241C124.812 75.6429 127.617 73.5696 128.063 70.5749C128.488 67.5593 126.384 64.7949 123.346 64.3551C123.091 64.3132 122.815 64.2923 122.56 64.2923C119.84 64.2923 117.46 66.2608 117.056 69.0043M101.588 66.8263C101.12 70.0304 103.373 73.0042 106.645 73.4649C109.896 73.9257 112.913 71.7058 113.381 68.4807C113.848 65.2766 111.596 62.3028 108.323 61.8421C108.047 61.8002 107.75 61.7792 107.474 61.7792C104.563 61.7792 102.013 63.8944 101.588 66.8263ZM86.8203 64.7321C86.3528 67.9362 88.6051 70.91 91.8773 71.3707C95.1283 71.8314 98.1456 69.6116 98.613 66.3865C99.0805 63.1824 96.8282 60.2086 93.5559 59.7478C93.2797 59.706 92.9822 59.685 92.706 59.685C89.795 59.685 87.2452 61.8002 86.8203 64.7321ZM167.691 60.5855C167.5 61.8421 168.392 62.9939 169.667 63.1823C170.942 63.3708 172.111 62.4913 172.302 61.2347C172.493 59.9991 171.601 58.8264 170.326 58.6379C170.22 58.6379 170.092 58.6379 170.007 58.6379C168.86 58.6379 167.882 59.4547 167.712 60.6065M71.4578 62.5541C70.9903 65.7582 73.2426 68.732 76.5149 69.1927C79.7658 69.6535 82.7831 67.4336 83.2506 64.2085C83.718 61.0044 81.4657 58.0306 78.1935 57.5699C77.9172 57.528 77.6198 57.507 77.3435 57.507C74.4325 57.507 71.8827 59.6222 71.4578 62.5331M56.754 60.4599C56.329 63.4546 58.4326 66.2399 61.4711 66.6797C64.5309 67.1195 67.3356 65.0253 67.7818 62.0305C68.228 59.0149 66.1032 56.2296 63.0647 55.8107C62.8097 55.7688 62.5335 55.7479 62.2573 55.7479C59.5375 55.7479 57.1577 57.7165 56.754 60.4599ZM151.415 58.2819C151.054 60.7949 152.817 63.0986 155.346 63.4546C157.896 63.8106 160.254 62.0934 160.615 59.5803C160.977 57.0673 159.213 54.7636 156.684 54.4076C156.451 54.3657 156.238 54.3657 156.004 54.3657C153.731 54.3657 151.755 56.0201 151.415 58.2819ZM42.2415 58.4075C41.859 61.1091 43.7501 63.6221 46.4911 63.9991C49.2321 64.376 51.7607 62.5122 52.1644 59.8107C52.5468 57.1091 50.6558 54.617 47.9147 54.2191C47.681 54.1772 47.426 54.1563 47.1923 54.1563C44.7275 54.1563 42.5814 55.9364 42.2415 58.3866M27.5377 56.3343C27.1765 58.8264 28.9401 61.151 31.4686 61.507C33.9971 61.863 36.3557 60.1248 36.7169 57.6327C37.0781 55.1196 35.3145 52.816 32.786 52.46C32.5523 52.439 32.3398 52.4181 32.106 52.4181C29.8325 52.4181 27.8564 54.0725 27.5164 56.3552M13.8538 54.3867C13.5988 56.1458 14.8312 57.7583 16.6161 58.0096C18.3797 58.261 20.0371 57.0463 20.292 55.2872C20.547 53.549 19.3146 51.9155 17.551 51.6642C17.4023 51.6642 17.2535 51.6223 17.0835 51.6223C15.4899 51.6223 14.0875 52.7741 13.8751 54.3657M134.331 55.8736C133.885 58.8892 136.01 61.6536 139.048 62.0934C142.087 62.5122 144.913 60.4389 145.359 57.4442C145.805 54.4495 143.681 51.6642 140.642 51.2244C140.366 51.1825 140.09 51.1616 139.835 51.1616C137.115 51.1616 134.735 53.1301 134.331 55.8736ZM0.148706 52.439C-3.13942e-05 53.4652 0.722409 54.3867 1.74232 54.5542C2.76224 54.7008 3.71841 53.9888 3.86715 52.9835C4.01588 51.9783 3.29344 51.0359 2.27353 50.8893C2.18854 50.8893 2.0823 50.8893 1.9973 50.8893C1.08363 50.8893 0.276196 51.5595 0.148706 52.4809M119.266 53.7375C118.841 56.7322 120.945 59.5175 123.983 59.9573C127.022 60.397 129.848 58.3028 130.273 55.3081C130.719 52.3134 128.594 49.5281 125.556 49.0883C125.301 49.0464 125.025 49.0255 124.748 49.0255C122.029 49.0255 119.649 50.994 119.245 53.7375M103.819 51.5385C103.351 54.7427 105.604 57.7165 108.876 58.1772C112.127 58.6379 115.144 56.418 115.612 53.193C116.079 49.9888 113.827 47.015 110.555 46.5543C110.278 46.5124 109.981 46.4915 109.705 46.4915C106.794 46.4915 104.244 48.6066 103.819 51.5385ZM89.0513 49.4443C88.5839 52.6485 90.8362 55.6222 94.0871 56.083C97.3381 56.5437 100.355 54.3238 100.823 51.1197C101.29 47.9155 99.038 44.9418 95.7658 44.481C95.4895 44.4392 95.1921 44.4182 94.9158 44.4182C92.0048 44.4182 89.455 46.5334 89.0301 49.4653M170.347 45.3816C170.198 46.3868 170.921 47.3292 171.941 47.4758C172.961 47.6224 173.917 46.9103 174.065 45.9051C174.214 44.8789 173.492 43.9575 172.472 43.8109C172.387 43.8109 172.281 43.8109 172.196 43.8109C171.282 43.8109 170.475 44.481 170.347 45.4025M73.6888 47.2663C73.2214 50.4705 75.4737 53.4443 78.7459 53.905C81.9969 54.3657 85.0142 52.1459 85.4816 48.9208C85.9491 45.7166 83.6968 42.7428 80.4245 42.2821C80.1483 42.2402 79.8508 42.2193 79.5746 42.2193C76.6636 42.2193 74.1138 44.3344 73.6888 47.2663ZM58.9851 45.1931C58.5601 48.1878 60.6637 50.9731 63.7022 51.4129C66.7407 51.8527 69.5667 49.7585 70.0129 46.7637C70.4591 43.769 68.3343 40.9837 65.2958 40.5439C65.0196 40.502 64.7646 40.4811 64.5096 40.4811C61.7898 40.4811 59.3888 42.4497 58.9851 45.1931ZM155.027 43.2036C154.772 44.9418 156.005 46.5753 157.768 46.8266C159.553 47.0779 161.189 45.8632 161.444 44.125C161.699 42.3659 160.467 40.7533 158.682 40.502C158.533 40.4811 158.384 40.4602 158.214 40.4602C156.621 40.4602 155.24 41.612 155.006 43.2036M44.4725 43.1407C44.0688 45.8423 45.9811 48.3344 48.7222 48.7323C51.4632 49.1302 53.9917 47.2454 54.3954 44.5439C54.7992 41.8423 52.8868 39.3293 50.1458 38.9523C49.9121 38.9314 49.6571 38.9104 49.4234 38.9104C46.9586 38.9104 44.8125 40.6905 44.4513 43.1617M29.7687 41.0465C29.4075 43.5596 31.1711 45.8632 33.6997 46.2402C36.2282 46.5962 38.5868 44.858 38.948 42.3659C39.3092 39.8738 37.5456 37.5492 34.9958 37.1932C34.7621 37.1513 34.5496 37.1513 34.3371 37.1513C32.0636 37.1513 30.0875 38.8057 29.7475 41.0675M137.476 40.7324C137.115 43.2245 138.878 45.5491 141.407 45.9051C143.957 46.2611 146.294 44.5229 146.677 42.0308C147.038 39.5178 145.274 37.2141 142.746 36.8372C142.512 36.8162 142.299 36.7953 142.087 36.7953C139.813 36.7953 137.837 38.4497 137.497 40.7324M16.0849 39.1199C15.8299 40.8581 17.0623 42.4915 18.8259 42.7428C20.6108 42.9942 22.2469 41.7795 22.5018 40.0413C22.7568 38.2822 21.5244 36.6696 19.7396 36.4183C19.5908 36.4183 19.4209 36.3974 19.2721 36.3974C17.6785 36.3974 16.2974 37.5492 16.0636 39.1408M2.35852 37.1722C2.20978 38.1775 2.93222 39.1199 3.95214 39.2665C4.97206 39.4131 5.92823 38.701 6.07696 37.6958C6.2257 36.6696 5.50326 35.7482 4.48335 35.5806C4.39835 35.5806 4.31336 35.5806 4.22837 35.5806C3.31469 35.5806 2.50726 36.2508 2.35852 37.1722ZM121.497 38.4497C121.051 41.4654 123.176 44.2297 126.214 44.6695C129.274 45.0884 132.079 43.0151 132.525 40.0204C132.95 37.0257 130.847 34.2404 127.808 33.8006C127.553 33.7587 127.277 33.7377 127.022 33.7377C124.302 33.7377 121.901 35.7063 121.519 38.4497M106.411 36.3136C105.986 39.3083 108.09 42.0936 111.128 42.5334C114.167 42.9732 116.993 40.879 117.439 37.8843C117.864 34.8896 115.76 32.1043 112.722 31.6645C112.446 31.6226 112.191 31.6016 111.914 31.6016C109.195 31.6016 106.815 33.5702 106.411 36.3136ZM91.6648 34.2404C91.2186 37.2351 93.3435 40.0204 96.382 40.4602C99.4417 40.8999 102.246 38.8057 102.693 35.811C103.139 32.8163 101.014 30.031 97.9756 29.5912C97.6993 29.5493 97.4444 29.5284 97.1681 29.5284C94.4484 29.5284 92.0686 31.5179 91.6648 34.2404ZM77.1948 32.188C76.8336 34.6801 78.5972 37.0047 81.1257 37.3607C83.6543 37.7167 86.0128 35.9785 86.374 33.4864C86.7353 30.9734 84.9717 28.6698 82.4431 28.3137C82.2094 28.2928 81.9969 28.2718 81.7844 28.2718C79.5109 28.2718 77.5348 29.9263 77.1948 32.209M62.1298 30.0519C61.7686 32.565 63.5322 34.8686 66.0607 35.2246C68.6105 35.5806 70.9478 33.8425 71.309 31.3503C71.6703 28.8373 69.9067 26.5337 67.3781 26.1776C67.1444 26.1358 66.9319 26.1358 66.7194 26.1358C64.4459 26.1358 62.4698 27.7902 62.1298 30.0519ZM158.172 28.0624C157.981 29.319 158.873 30.4708 160.127 30.6593C161.402 30.8477 162.57 29.9682 162.761 28.7326C162.953 27.4761 162.06 26.3242 160.785 26.1358C160.679 26.1358 160.552 26.1358 160.445 26.1358C159.298 26.1358 158.321 26.9525 158.151 28.1043M47.0648 27.9158C46.7036 30.4289 48.4672 32.7325 50.9957 33.0885C53.5455 33.4446 55.8828 31.7064 56.244 29.2142C56.6053 26.7012 54.8417 24.3976 52.3131 24.0206C52.0794 23.9997 51.8669 23.9787 51.6544 23.9787C49.3809 23.9787 47.4048 25.6331 47.0648 27.9158ZM33.3809 25.9892C33.126 27.7274 34.3584 29.3608 36.122 29.6121C37.9068 29.8635 39.5429 28.6488 39.7979 26.9106C40.0529 25.1515 38.8205 23.5389 37.0356 23.2876C36.8869 23.2876 36.7382 23.2457 36.5682 23.2457C34.9746 23.2457 33.5934 24.3976 33.3597 25.9892M141.088 25.6541C140.833 27.3923 142.066 29.0258 143.851 29.2771C145.635 29.5284 147.271 28.3137 147.526 26.5546C147.781 24.8164 146.549 23.1829 144.764 22.9316C144.615 22.9316 144.467 22.8897 144.297 22.8897C142.703 22.8897 141.322 24.0415 141.088 25.6331M19.2296 23.9787C19.0384 25.2352 19.9308 26.3871 21.2057 26.5755C22.4593 26.764 23.6493 25.8845 23.8405 24.6489C24.0317 23.3923 23.1393 22.2405 21.8644 22.052C21.7582 22.052 21.6307 22.052 21.5244 22.052C20.3983 22.052 19.3996 22.8688 19.2296 24.0206M124.642 23.3086C124.281 25.8007 126.044 28.1253 128.594 28.4813C131.123 28.8373 133.481 27.0991 133.843 24.607C134.204 22.0939 132.44 19.7903 129.912 19.4133C129.678 19.3924 129.465 19.3715 129.232 19.3715C126.958 19.3715 124.982 21.0259 124.642 23.2876M109.577 21.1725C109.216 23.6855 110.979 25.9892 113.508 26.3452C116.058 26.7012 118.416 24.963 118.778 22.4709C119.139 19.9788 117.375 17.6542 114.847 17.2982C114.613 17.2563 114.4 17.2563 114.167 17.2563C111.893 17.2563 109.917 18.9107 109.577 21.1725ZM94.8096 19.0783C94.4484 21.5913 96.212 23.8949 98.7405 24.251C101.269 24.607 103.628 22.8688 103.989 20.3767C104.35 17.8846 102.586 15.56 100.058 15.204C99.8242 15.1621 99.6117 15.1621 99.3992 15.1621C97.1256 15.1621 95.1496 16.8165 94.8096 19.0783ZM80.807 17.1097C80.552 18.8688 81.7844 20.4814 83.548 20.7327C85.3329 20.9631 86.969 19.7694 87.224 18.0102C87.4789 16.272 86.2466 14.6385 84.4617 14.3872C84.313 14.3872 84.143 14.3453 83.9942 14.3453C82.4006 14.3453 81.0195 15.4972 80.7858 17.0888M66.6557 15.0993C66.4644 16.3348 67.3569 17.5076 68.6318 17.6961C69.9067 17.8846 71.0753 17.005 71.2665 15.7485C71.4578 14.5129 70.5654 13.3401 69.2905 13.1516C69.1842 13.1516 69.0567 13.1307 68.9505 13.1307C67.8243 13.1307 66.8257 13.9474 66.6557 15.0993ZM51.5907 12.9632C51.3994 14.2197 52.2919 15.3715 53.5455 15.56C54.8204 15.7485 55.9891 14.8689 56.1803 13.6124C56.3715 12.3768 55.4791 11.204 54.2042 11.0156C54.098 11.0156 53.9705 11.0156 53.8642 11.0156C52.7381 11.0156 51.7394 11.8323 51.5694 12.9841M144.233 10.492C144.042 11.7485 144.934 12.9003 146.209 13.0888C147.484 13.2773 148.653 12.3977 148.844 11.1412C149.035 9.90562 148.143 8.73286 146.889 8.54438C146.783 8.54438 146.655 8.54438 146.549 8.54438C145.402 8.54438 144.424 9.36112 144.254 10.5129M128.254 8.23025C127.999 9.98939 129.232 11.6019 131.017 11.8532C132.78 12.1045 134.438 10.8899 134.693 9.1517C134.948 7.39257 133.715 5.78002 131.951 5.52872C131.803 5.52872 131.654 5.50778 131.484 5.50778C129.89 5.50778 128.509 6.65959 128.276 8.25119M113.168 6.09415C112.913 7.83235 114.145 9.46583 115.909 9.71714C117.694 9.96844 119.33 8.7538 119.585 7.01561C119.84 5.25647 118.608 3.64393 116.823 3.39262C116.674 3.39262 116.525 3.35074 116.355 3.35074C114.762 3.35074 113.381 4.50255 113.147 6.09415M99.3355 4.1256C99.1442 5.38212 100.037 6.53394 101.312 6.72242C102.586 6.9109 103.755 6.03133 103.946 4.7748C104.138 3.51827 103.245 2.36646 101.97 2.17798C101.864 2.17798 101.737 2.15704 101.652 2.15704C100.504 2.15704 99.5267 2.97378 99.3567 4.1256M86.1191 0C85.0354 0.0628263 84.1217 0.879569 83.973 1.96856C83.7818 3.20414 84.6742 4.3769 85.9278 4.56538C87.2027 4.75386 88.3714 3.87429 88.5626 2.61776C88.7538 1.36124 87.8614 0.209421 86.5865 0.0209421C86.5228 0.0209421 86.459 0.0209421 86.3953 0.0209421H86.1191V0Z" fill="white"/>
  </mask>
  <g mask="url(#mask0_10_37)">
    <path d="M174.214 0H0V115.454H174.214V0Z" fill="url(#paint0_linear_10_37)"/>
  </g>
  <defs>
    <linearGradient id="paint0_linear_10_37" x1="-1.27319" y1="57.6553" x2="172.405" y2="57.6553" gradientUnits="userSpaceOnUse">
      <stop stop-color="#5F8BFA"/>
      <stop offset="1" stop-color="#5FEDFA"/>
    </linearGradient>
  </defs>
</svg>

我检查了一些工具行 Threejs 或 Animate.css，但看起来很复杂。我正在寻找一些方法来做到这一点。如果有人使用这个工具或者有更好的想法那就太好了。

Answer 1

我的建议是您使用 canvas 来渲染动画和徽标。如果您有很多动画元素并且 DOM 中不需要它们（每个点不应该是可点击的等），那么 Canvas 是更好的选择。

我不会写代码，因为它很多，但它是这样的：

1. 在画布上渲染徽标。它可以是简单的形状、文本、SVG 图像或任何其他图像。画布应该在屏幕外作为起点（我们还没有开始动画......）。
2. 根据画布的整体大小，按像素将画布分成块。因此，它可以是 4x4、8x8 或 10x10 像素。如果块中的任何像素/颜色数组已被着色，则每个块都保存在数组中的对象（具有像素颜色数组和初始位置）中。
3. 现在，动画可以开始了。清除画布并使其在屏幕上可见（好吧，现在完全白色）。给所有块一个新的开始位置（可能是随机的等）。
4. 在画布上渲染数组中的每个块，并随着时间的推移对位置进行动画处理，以便每个块最终位于正确的（初始）位置。

这是基础知识。现在，我们可以想象每个块随着动画的时间而改变颜色，根据鼠标或其他位置的位置移动。