我如何使用遮罩来动画和更改 SVG 的 colors
[英]How can i use masking to animate and change colors of an SVG
问题描述
I'm new to animating SVGs and using mask and clipping what I'm trying to do is have the svg change colors from top to bottom from grey to pink for example and then go back from bottom to top and change from pink to blue etc. infinitely.
我不熟悉 SVG 动画并使用遮罩和剪裁我想做的是让 svg 从上到下从灰色到粉红色更改 colors 例如，然后 go 从底部到顶部并从粉红色更改为蓝色等。 无限地。 The SVG colors are [grey-pink-teal-blue]. SVG colors 是 [灰-粉-青-蓝]。
obviously the way I did it doesn't match what I want because the colors don't change in a vertical order but rather every path starts changing at once but I was trying to give you a near example of what I want.显然我做的方式与我想要的不匹配，因为 colors 不会按垂直顺序改变，而是每条路径立即开始改变，但我试图给你一个我想要的接近的例子。
appreciate all the help.感谢所有帮助。
- Update: so I've been working on the problem and here's what I did更新：所以我一直在研究这个问题，这就是我所做的
* { margin: 0; padding: 0; } #svg-fingerprint { position: relative; } #background-rect { animation: animate 10s linear infinite; } @keyframes animate { 0% { transform: translateY(-136px); fill: #bebebe; } 25% { transform: translateY(0); fill: #e51368; } 50% { transform: translateY(-136px); fill: #00adb5; } 75% { transform: translateY(0); fill: #393e46; } 100% { transform: translateY(-136px); fill: #bebebe; } } #background-rect-2 { animation: animate-2 10s linear infinite; position: absolute; height: 100%; width: 100%; } @keyframes animate-2 { 0% { transform: translateY(0); fill: #e51368; } 25% { transform: translateY(136px); fill: #00adb5; } 50% { transform: translateY(0); fill: #393e46; } 75% { transform: translateY(136px); fill: #bebebe; } 100% { transform: translateY(0); fill: #e51368; } }
<svg width="85" height="136" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" id="svg-fingerprint"> <mask id="myMask"> <rect x="0" y="0" width="85" height="136" fill="white" /> <g fill="black"> <path d="M18.1633 104.059C17.7281 103.594 16.9991 103.569 16.5335 104.002C13.3999 106.922 9.55089 108.959 5.40226 109.893C4.78061 110.033 4.39055 110.65 4.53081 111.27C4.65185 111.805 5.12755 112.169 5.65453 112.169C5.73842 112.169 5.82407 112.16 5.90898 112.141C10.4563 111.117 14.6741 108.885 18.1065 105.687C18.5719 105.252 18.5972 104.524 18.1633 104.059Z" /> <path d="M1.81283 90.9205C1.98907 90.9205 2.16793 90.88 2.33587 90.7946C4.00739 89.9431 5.0459 88.2516 5.0459 86.3813C5.0459 84.4698 3.92451 82.7099 2.18949 81.8966C1.61357 81.6256 0.925506 81.8736 0.655901 82.45C0.385714 83.0259 0.63347 83.7119 1.20997 83.9817C2.13938 84.4176 2.7402 85.3596 2.7402 86.3813C2.7402 87.3816 2.18395 88.2864 1.2876 88.743C0.720571 89.032 0.495536 89.7254 0.78495 90.2923C0.988574 90.691 1.39276 90.9205 1.81283 90.9205Z" /> <path d="M45.247 103.85C45.6551 103.362 45.5899 102.636 45.101 102.228C44.613 101.82 43.8861 101.886 43.477 102.373C37.3861 109.654 34.0312 118.885 34.0312 128.364C34.0312 130.356 34.1782 132.36 34.4675 134.317C34.552 134.89 35.0446 135.301 35.6063 135.301C35.6627 135.301 35.7195 135.297 35.7763 135.288C36.4063 135.195 36.8415 134.61 36.7487 133.981C36.4756 132.134 36.3371 130.244 36.3371 128.364C36.3371 119.423 39.5011 110.718 45.247 103.85Z" /> <path d="M84.6492 89.0136C81.4025 88.191 78.0437 87.7742 74.6665 87.7742C72.0794 87.7742 69.5163 88.029 67.0059 88.5119C69.5468 86.911 71.9354 85.0714 74.1368 83.0132C74.2976 83.0982 74.4722 83.1584 74.6665 83.1584C77.8321 83.1584 80.995 83.4885 84.0678 84.139C84.1483 84.1564 84.2287 84.1643 84.3081 84.1643C84.8412 84.1643 85.3197 83.7932 85.4346 83.2518C85.5668 82.6294 85.1688 82.0181 84.5461 81.8864C81.8326 81.3114 79.0522 80.9895 76.2605 80.8965C80.0124 76.9174 83.1196 72.2582 85.3658 67.0433C85.6175 66.459 85.3472 65.7819 84.7623 65.5306C84.1789 65.2781 83.4989 65.5487 83.2479 66.1334C76.0783 82.7777 59.7503 93.5326 41.6499 93.5326C25.7058 93.5326 10.7543 84.9776 2.62939 71.2064C2.30677 70.6587 1.6008 70.4759 1.05082 70.7992C0.502435 71.122 0.319496 71.8277 0.643135 72.3761C3.01217 76.3916 5.94939 79.9662 9.2924 83.0627C9.23764 83.2618 9.21652 83.4716 9.27929 83.684C9.53651 84.557 9.66716 85.4645 9.66716 86.3811C9.66716 91.0412 6.33362 95.0052 1.7415 95.806C1.11432 95.9151 0.694405 96.5117 0.804081 97.1382C0.901522 97.6977 1.38858 98.0919 1.93842 98.0919C2.00382 98.0919 2.07082 98.0862 2.13782 98.0746C7.83675 97.0815 11.973 92.1631 11.973 86.3811C11.973 86.0204 11.9286 85.664 11.8962 85.3065C13.4492 86.5503 15.0745 87.6937 16.7655 88.7335C15.7499 95.9363 10.1149 101.765 2.90337 102.981C2.27561 103.087 1.85234 103.681 1.95881 104.308C2.05334 104.87 2.54142 105.268 3.09432 105.268C3.15797 105.268 3.22278 105.263 3.28745 105.252C11.1761 103.922 17.4137 97.7379 18.9027 89.9776C20.3942 90.7921 21.92 91.5439 23.491 92.1964C22.8943 94.5917 21.9474 96.8781 20.6441 98.9907C20.3095 99.5322 20.4779 100.242 21.0202 100.575C21.2086 100.692 21.4177 100.747 21.624 100.747C22.0108 100.747 22.3886 100.552 22.6065 100.2C23.9874 97.9628 24.9976 95.5458 25.6561 93.017C27.2172 93.5785 28.8089 94.0559 30.4265 94.4529C27.6488 104.893 19.5771 113.275 9.19074 116.412C8.58162 116.596 8.23642 117.238 8.42126 117.847C8.57157 118.345 9.02921 118.666 9.52399 118.666C9.63439 118.666 9.74698 118.65 9.85841 118.616C21.0349 115.241 29.7153 106.208 32.6776 94.9617C34.1925 95.2562 35.7287 95.4617 37.2764 95.6069C36.7113 97.8815 35.9466 100.076 34.9958 102.174C33.7218 104.085 32.593 106.076 31.6183 108.137C27.353 114.3 21.3135 119.178 14.109 122.016C13.5162 122.25 13.2257 122.919 13.4594 123.51C13.6384 123.963 14.0724 124.24 14.5324 124.24C14.6731 124.24 14.816 124.214 14.9545 124.159C20.3477 122.034 25.1244 118.829 29.0621 114.832C28.3407 117.268 27.8183 119.77 27.4963 122.322C25.1078 124.145 22.5376 125.738 19.8433 127.05C19.2707 127.328 19.0327 128.017 19.312 128.589C19.5118 128.998 19.9221 129.236 20.3496 129.236C20.5184 129.236 20.6907 129.199 20.8534 129.12C23.0576 128.047 25.1854 126.798 27.2044 125.394C27.1443 126.379 27.1035 127.368 27.1035 128.364C27.1035 129.586 27.1508 130.819 27.2437 132.032C27.2899 132.636 27.7955 133.096 28.3922 133.096C28.4215 133.096 28.4514 133.095 28.4812 133.092C29.1161 133.044 29.5914 132.49 29.5429 131.856C29.4546 130.702 29.4095 129.527 29.4095 128.364C29.4095 121.647 30.8722 115.178 33.6293 109.285C34.9214 107.398 36.0503 105.398 37.0121 103.304C38.8136 100.622 40.9115 98.1064 43.3053 95.8052C46.2675 95.703 49.1784 95.3273 52.0083 94.6972C50.6581 95.6052 49.3533 96.5901 48.1112 97.6637C47.6298 98.0798 47.5769 98.8075 47.9935 99.2884C48.2215 99.5515 48.5429 99.6864 48.866 99.6864C49.1335 99.6864 49.402 99.5942 49.6199 99.4058C56.58 93.3904 65.475 90.0777 74.6662 90.0777C77.8521 90.0777 81.0206 90.4708 84.0825 91.2462C84.7006 91.4042 85.3274 91.0297 85.4832 90.4127C85.6401 89.7963 85.2669 89.1698 84.6492 89.0136ZM39.6141 95.7678C39.7687 95.7747 39.9235 95.778 40.0782 95.7833C39.8542 96.0198 39.6443 96.2658 39.4258 96.5063C39.4892 96.2603 39.5553 96.0156 39.6141 95.7678Z" /> <path d="M66.4222 98.0887C67.037 97.9218 67.4001 97.2891 67.2335 96.6756C67.0663 96.0626 66.4351 95.7021 65.8186 95.8652C51.1812 99.8327 40.9579 113.197 40.9579 128.364C40.9579 130.553 41.1696 132.74 41.5861 134.867C41.6942 135.416 42.1762 135.797 42.7165 135.797C42.7898 135.797 42.8647 135.79 42.9395 135.776C43.5644 135.653 43.9715 135.048 43.8493 134.424C43.4608 132.443 43.2638 130.405 43.2638 128.364C43.264 114.234 52.7869 101.784 66.4222 98.0887Z" /> <path d="M84.4809 96.1425C81.3123 95.181 78.0105 94.6933 74.6669 94.6933C74.0303 94.6933 73.5139 95.2091 73.5139 95.845C73.5139 96.4809 74.0303 96.9967 74.6669 96.9967C77.7832 96.9967 80.8592 97.451 83.8097 98.3468C83.9217 98.3804 84.0349 98.397 84.1459 98.397C84.6402 98.397 85.0973 98.0765 85.2486 97.5798C85.4334 96.9708 85.09 96.3274 84.4809 96.1425Z" /> <path d="M50.5389 128.364C50.5389 122.624 52.6017 117.06 56.3471 112.698C56.7615 112.215 56.7058 111.488 56.2223 111.074C55.7404 110.661 55.0114 110.715 54.5964 111.198C50.4927 115.978 48.2331 122.074 48.2331 128.364C48.2331 130.405 48.4683 132.44 48.9329 134.412C49.0578 134.943 49.5313 135.3 50.0543 135.3C50.1416 135.3 50.2306 135.291 50.3194 135.27C50.9393 135.125 51.3238 134.504 51.178 133.885C50.754 132.085 50.5389 130.227 50.5389 128.364Z" /> <path d="M83.3242 103.415C80.5447 102.449 77.632 101.96 74.6672 101.96C69.1838 101.96 63.921 103.629 59.447 106.786C58.9269 107.154 58.8035 107.872 59.1707 108.392C59.3953 108.71 59.7516 108.879 60.1136 108.879C60.3433 108.879 60.5759 108.81 60.7781 108.668C64.8602 105.786 69.6631 104.263 74.6673 104.263C77.3736 104.263 80.0315 104.71 82.5677 105.59C83.1684 105.8 83.827 105.481 84.0347 104.88C84.244 104.28 83.9261 103.623 83.3242 103.415Z" /> <path d="M57.8143 128.364C57.8143 127.728 57.2979 127.212 56.6613 127.212C56.0245 127.212 55.5083 127.728 55.5083 128.364C55.5083 129.699 55.6472 131.032 55.9209 132.326C56.0357 132.868 56.5149 133.239 57.048 133.239C57.1268 133.239 57.2073 133.231 57.2877 133.214C57.9104 133.083 58.3091 132.471 58.1772 131.849C57.9365 130.712 57.8143 129.539 57.8143 128.364Z" /> <path d="M80.6662 110.188C78.7363 109.55 76.7176 109.227 74.6671 109.227C65.7062 109.227 57.8294 115.575 55.9384 124.321C55.8038 124.942 56.1996 125.555 56.8222 125.69C56.9039 125.707 56.9861 125.716 57.0666 125.716C57.598 125.716 58.076 125.347 58.1925 124.807C59.8555 117.114 66.784 111.531 74.6669 111.531C76.4713 111.531 78.2458 111.814 79.942 112.375C80.5466 112.574 81.1993 112.246 81.3986 111.643C81.5991 111.039 81.2708 110.388 80.6662 110.188Z" /> <path d="M76.6097 116.653C75.9724 116.547 75.3187 116.494 74.6668 116.494C68.1138 116.494 62.7829 121.819 62.7829 128.364C62.7829 129 63.2991 129.516 63.9359 129.516C64.5725 129.516 65.0889 129 65.0889 128.364C65.0889 123.089 69.3855 118.797 74.6668 118.797C75.1932 118.797 75.7197 118.84 76.2324 118.925C76.8641 119.032 77.4541 118.604 77.5583 117.977C77.6626 117.35 77.238 116.756 76.6097 116.653Z" /> <path d="M6.78264 19.5388C15.4324 9.105 28.1405 3.12122 41.6504 3.12122C58.9834 3.12122 74.5387 12.7896 82.2454 28.3529C82.4464 28.759 82.8551 28.9941 83.2801 28.9941C83.4514 28.9941 83.6259 28.9558 83.7902 28.8749C84.3612 28.5927 84.5946 27.9021 84.3127 27.3319C76.2136 10.9771 59.8668 0.817856 41.6504 0.817856C27.4514 0.817856 14.0952 7.106 5.00712 18.07C4.60061 18.5598 4.66935 19.2858 5.15962 19.6913C5.64989 20.0984 6.37612 20.0285 6.78264 19.5388Z" /> <path d="M41.6503 88.917C53.3762 88.917 64.5378 83.8373 72.2738 74.9808C72.6925 74.5017 72.643 73.7742 72.1628 73.3563C71.6843 72.9386 70.9558 72.9875 70.5363 73.4672C63.2385 81.822 52.7095 86.6136 41.6503 86.6136C20.5149 86.6136 3.32026 69.4385 3.32026 48.327C3.32026 27.2155 20.5148 10.0404 41.6503 10.0404C42.287 10.0404 42.8033 9.52474 42.8033 8.88867C42.8033 8.25259 42.287 7.73698 41.6503 7.73698C19.2436 7.73698 1.01428 25.9457 1.01428 48.327C1.01428 70.7083 19.2436 88.917 41.6503 88.917Z" /> <path d="M74.4837 70.2402C74.674 70.36 74.8863 70.4169 75.0962 70.4169C75.4795 70.4169 75.854 70.2261 76.0735 69.8781C80.1382 63.4235 82.2865 55.9714 82.2865 48.3268C82.2865 31.9874 72.5328 17.3063 57.4382 10.9254C55.1744 9.96892 52.8109 9.21587 50.4133 8.68732C49.7908 8.54736 49.1759 8.94265 49.0391 9.56403C48.9017 10.1848 49.2947 10.7995 49.9167 10.9367C52.177 11.4349 54.4052 12.1445 56.5396 13.0466C70.7791 19.0659 79.9806 32.9147 79.9806 48.3268C79.9806 55.5366 77.9544 62.5649 74.1211 68.6522C73.7821 69.1906 73.9442 69.9011 74.4837 70.2402Z" /> <path d="M57.7875 77.7297C57.9817 77.7297 58.1783 77.6807 58.3589 77.5778C68.8457 71.5882 75.3599 60.3801 75.3599 48.3269C75.3599 29.7605 60.2383 14.656 41.6507 14.656C23.0632 14.656 7.94144 29.7605 7.94144 48.3269C7.94144 48.9629 8.45778 49.4785 9.09443 49.4785C9.73123 49.4785 10.2474 48.9629 10.2474 48.3269C10.2474 31.0308 24.335 16.9593 41.6507 16.9593C58.9664 16.9593 73.0539 31.0309 73.0539 48.3269C73.0539 59.5558 66.9842 69.9979 57.2138 75.5781C56.6615 75.8941 56.4695 76.5977 56.7854 77.1499C56.9982 77.5215 57.3873 77.7297 57.7875 77.7297Z" /> <path d="M10.7004 53.668C10.5924 53.0409 9.99663 52.6203 9.36886 52.7271C8.7411 52.8351 8.31943 53.4301 8.42692 54.0572C9.94871 62.9146 15.0899 70.9348 22.5332 76.0628C22.7331 76.2006 22.9611 76.2664 23.1868 76.2664C23.5532 76.2664 23.9136 76.0927 24.137 75.7687C24.4984 75.245 24.3667 74.5275 23.8426 74.1665C16.9073 69.3888 12.1169 61.9176 10.7004 53.668Z" /> <path d="M52.3672 77.8206C45.6357 80.2623 38.0619 80.309 31.2992 77.9507C30.6997 77.7397 30.0403 78.0586 29.8305 78.6586C29.621 79.2592 29.9379 79.9161 30.5392 80.1257C34.1029 81.368 37.8411 81.9977 41.6502 81.9977C45.6023 81.9977 49.4728 81.3207 53.154 79.9858C53.7525 79.7687 54.0616 79.1079 53.8443 78.5101C53.6277 77.913 52.9679 77.6047 52.3672 77.8206Z" /> <path d="M68.0846 48.3268C68.0846 47.6908 67.5684 47.1751 66.9316 47.1751C66.2949 47.1751 65.7786 47.6908 65.7786 48.3268C65.7786 61.6161 54.9547 72.4278 41.6504 72.4278C28.3466 72.4278 17.5227 61.6161 17.5227 48.3268C17.5227 42.3401 19.7443 36.5964 23.778 32.1534C24.206 31.6821 24.1703 30.9538 23.6986 30.5265C23.2269 30.0986 22.4972 30.1362 22.0698 30.6058C17.6504 35.474 15.2167 41.7672 15.2167 48.327C15.2167 62.8865 27.0747 74.7313 41.6503 74.7313C56.2265 74.7313 68.0846 62.8865 68.0846 48.3268Z" /> <path d="M27.6188 28.7321C31.7319 25.7842 36.5837 24.226 41.6506 24.226C52.6349 24.226 62.2389 31.6423 65.0047 42.2609C65.1399 42.7788 65.6077 43.1224 66.12 43.1224C66.2157 43.1224 66.3136 43.1107 66.411 43.0853C67.027 42.925 67.3969 42.2964 67.2364 41.6806C64.2058 30.0474 53.6849 21.9226 41.6506 21.9226C36.0984 21.9226 30.7817 23.6299 26.2744 26.8605C25.7571 27.2311 25.6389 27.9509 26.0099 28.4677C26.3807 28.9839 27.0991 29.102 27.6188 28.7321Z" /> <path d="M41.6506 67.4641C52.215 67.4641 60.8094 58.8792 60.8094 48.3268C60.8094 37.7744 52.215 29.1898 41.6506 29.1898C31.0862 29.1898 22.4918 37.7744 22.4918 48.3268C22.4918 58.8792 31.0861 67.4641 41.6506 67.4641ZM41.6506 31.4931C50.9433 31.4931 58.5035 39.0448 58.5035 48.327C58.5035 57.6091 50.9433 65.1608 41.6506 65.1608C32.3579 65.1608 24.7978 57.6091 24.7978 48.327C24.7978 39.0448 32.3579 31.4931 41.6506 31.4931Z" /> <path d="M30.92 49.4785C31.5567 49.4785 32.073 48.9629 32.073 48.3268C32.073 43.0514 36.3696 38.7597 41.6504 38.7597C46.9318 38.7597 51.2284 43.0514 51.2284 48.3268C51.2284 53.6022 46.9318 57.894 41.6504 57.894C39.0236 57.894 36.5718 56.8485 34.746 54.9495C34.3047 54.4906 33.574 54.476 33.1157 54.9169C32.6569 55.3573 32.6416 56.0866 33.083 56.5455C35.3473 58.9006 38.3903 60.1974 41.6504 60.1974C48.2035 60.1974 53.5344 54.8725 53.5344 48.3268C53.5344 41.7812 48.2035 36.4563 41.6504 36.4563C35.0979 36.4563 29.767 41.7812 29.767 48.3268C29.767 48.9629 30.2832 49.4785 30.92 49.4785Z" /> <path d="M46.6076 48.3268C46.6076 45.5966 44.3838 43.3754 41.6506 43.3754C38.9175 43.3754 36.6936 45.5967 36.6936 48.3268C36.6936 51.0569 38.9175 53.2782 41.6506 53.2782C44.3838 53.2782 46.6076 51.0571 46.6076 48.3268ZM38.9996 48.3268C38.9996 46.8664 40.1886 45.6788 41.6506 45.6788C43.1127 45.6788 44.3017 46.8664 44.3017 48.3268C44.3017 49.7872 43.1127 50.9749 41.6506 50.9749C40.1886 50.9749 38.9996 49.7872 38.9996 48.3268Z" /> </g> </mask> <rect x="0" y="0" width="85" height="136" id="background-rect"></rect> <rect x="0" y="0" width="85" height="0" id="background-rect-2"></rect> <rect x="0" y="0" width="85" height="136" mask="url(#myMask)" />
This is close to the behavior I want but the colors are still weird i would appreciate the help in timing the various colors still.这接近我想要的行为，但 colors 仍然很奇怪，我将不胜感激帮助计时各种 colors。
thanks for the people who tried to help.感谢那些试图提供帮助的人。
2 个解决方案
解决方案1
1 2021-08-24 12:14:01
The paths themself can be a mask for a <rect> .路径本身可以是<rect>的掩码。 Here I'm just using the linear gradient that you defined yourself.这里我只是使用你自己定义的线性渐变。
<svg id="card-fingerprint" width="86" height="136" viewBox="0 0 86 136" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="lg" x1="0" x2="4" gradientTransform="rotate(90)"> <stop offset="0%" style="stop-color:rgb(0,255,0);stop-opacity:1.00" /> <stop offset="25%" style="stop-color:rgb(0,255,255);stop-opacity:1.00" /> <stop offset="50%" style="stop-color:rgb(0,0,255);stop-opacity:1.00" /> <stop offset="75%" style="stop-color:rgb(255,0,255);stop-opacity:1.00" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1.00" /> <animateTransform attributeName="gradientTransform" attributeType="XML" type="translate" values="0 0;-4 0;0 0" dur="5s" repeatCount="indefinite"/> </linearGradient> <mask id="m1"> <g fill="white"> <path d="M18.1633 104.059C17.7281 103.594 16.9991 103.569 16.5335 104.002C13.3999 106.922 9.55089 108.959 5.40226 109.893C4.78061 110.033 4.39055 110.65 4.53081 111.27C4.65185 111.805 5.12755 112.169 5.65453 112.169C5.73842 112.169 5.82407 112.16 5.90898 112.141C10.4563 111.117 14.6741 108.885 18.1065 105.687C18.5719 105.252 18.5972 104.524 18.1633 104.059Z" /> <path d="M1.81283 90.9205C1.98907 90.9205 2.16793 90.88 2.33587 90.7946C4.00739 89.9431 5.0459 88.2516 5.0459 86.3813C5.0459 84.4698 3.92451 82.7099 2.18949 81.8966C1.61357 81.6256 0.925506 81.8736 0.655901 82.45C0.385714 83.0259 0.63347 83.7119 1.20997 83.9817C2.13938 84.4176 2.7402 85.3596 2.7402 86.3813C2.7402 87.3816 2.18395 88.2864 1.2876 88.743C0.720571 89.032 0.495536 89.7254 0.78495 90.2923C0.988574 90.691 1.39276 90.9205 1.81283 90.9205Z" /> <path d="M45.247 103.85C45.6551 103.362 45.5899 102.636 45.101 102.228C44.613 101.82 43.8861 101.886 43.477 102.373C37.3861 109.654 34.0312 118.885 34.0312 128.364C34.0312 130.356 34.1782 132.36 34.4675 134.317C34.552 134.89 35.0446 135.301 35.6063 135.301C35.6627 135.301 35.7195 135.297 35.7763 135.288C36.4063 135.195 36.8415 134.61 36.7487 133.981C36.4756 132.134 36.3371 130.244 36.3371 128.364C36.3371 119.423 39.5011 110.718 45.247 103.85Z" /> <path d="M84.6492 89.0136C81.4025 88.191 78.0437 87.7742 74.6665 87.7742C72.0794 87.7742 69.5163 88.029 67.0059 88.5119C69.5468 86.911 71.9354 85.0714 74.1368 83.0132C74.2976 83.0982 74.4722 83.1584 74.6665 83.1584C77.8321 83.1584 80.995 83.4885 84.0678 84.139C84.1483 84.1564 84.2287 84.1643 84.3081 84.1643C84.8412 84.1643 85.3197 83.7932 85.4346 83.2518C85.5668 82.6294 85.1688 82.0181 84.5461 81.8864C81.8326 81.3114 79.0522 80.9895 76.2605 80.8965C80.0124 76.9174 83.1196 72.2582 85.3658 67.0433C85.6175 66.459 85.3472 65.7819 84.7623 65.5306C84.1789 65.2781 83.4989 65.5487 83.2479 66.1334C76.0783 82.7777 59.7503 93.5326 41.6499 93.5326C25.7058 93.5326 10.7543 84.9776 2.62939 71.2064C2.30677 70.6587 1.6008 70.4759 1.05082 70.7992C0.502435 71.122 0.319496 71.8277 0.643135 72.3761C3.01217 76.3916 5.94939 79.9662 9.2924 83.0627C9.23764 83.2618 9.21652 83.4716 9.27929 83.684C9.53651 84.557 9.66716 85.4645 9.66716 86.3811C9.66716 91.0412 6.33362 95.0052 1.7415 95.806C1.11432 95.9151 0.694405 96.5117 0.804081 97.1382C0.901522 97.6977 1.38858 98.0919 1.93842 98.0919C2.00382 98.0919 2.07082 98.0862 2.13782 98.0746C7.83675 97.0815 11.973 92.1631 11.973 86.3811C11.973 86.0204 11.9286 85.664 11.8962 85.3065C13.4492 86.5503 15.0745 87.6937 16.7655 88.7335C15.7499 95.9363 10.1149 101.765 2.90337 102.981C2.27561 103.087 1.85234 103.681 1.95881 104.308C2.05334 104.87 2.54142 105.268 3.09432 105.268C3.15797 105.268 3.22278 105.263 3.28745 105.252C11.1761 103.922 17.4137 97.7379 18.9027 89.9776C20.3942 90.7921 21.92 91.5439 23.491 92.1964C22.8943 94.5917 21.9474 96.8781 20.6441 98.9907C20.3095 99.5322 20.4779 100.242 21.0202 100.575C21.2086 100.692 21.4177 100.747 21.624 100.747C22.0108 100.747 22.3886 100.552 22.6065 100.2C23.9874 97.9628 24.9976 95.5458 25.6561 93.017C27.2172 93.5785 28.8089 94.0559 30.4265 94.4529C27.6488 104.893 19.5771 113.275 9.19074 116.412C8.58162 116.596 8.23642 117.238 8.42126 117.847C8.57157 118.345 9.02921 118.666 9.52399 118.666C9.63439 118.666 9.74698 118.65 9.85841 118.616C21.0349 115.241 29.7153 106.208 32.6776 94.9617C34.1925 95.2562 35.7287 95.4617 37.2764 95.6069C36.7113 97.8815 35.9466 100.076 34.9958 102.174C33.7218 104.085 32.593 106.076 31.6183 108.137C27.353 114.3 21.3135 119.178 14.109 122.016C13.5162 122.25 13.2257 122.919 13.4594 123.51C13.6384 123.963 14.0724 124.24 14.5324 124.24C14.6731 124.24 14.816 124.214 14.9545 124.159C20.3477 122.034 25.1244 118.829 29.0621 114.832C28.3407 117.268 27.8183 119.77 27.4963 122.322C25.1078 124.145 22.5376 125.738 19.8433 127.05C19.2707 127.328 19.0327 128.017 19.312 128.589C19.5118 128.998 19.9221 129.236 20.3496 129.236C20.5184 129.236 20.6907 129.199 20.8534 129.12C23.0576 128.047 25.1854 126.798 27.2044 125.394C27.1443 126.379 27.1035 127.368 27.1035 128.364C27.1035 129.586 27.1508 130.819 27.2437 132.032C27.2899 132.636 27.7955 133.096 28.3922 133.096C28.4215 133.096 28.4514 133.095 28.4812 133.092C29.1161 133.044 29.5914 132.49 29.5429 131.856C29.4546 130.702 29.4095 129.527 29.4095 128.364C29.4095 121.647 30.8722 115.178 33.6293 109.285C34.9214 107.398 36.0503 105.398 37.0121 103.304C38.8136 100.622 40.9115 98.1064 43.3053 95.8052C46.2675 95.703 49.1784 95.3273 52.0083 94.6972C50.6581 95.6052 49.3533 96.5901 48.1112 97.6637C47.6298 98.0798 47.5769 98.8075 47.9935 99.2884C48.2215 99.5515 48.5429 99.6864 48.866 99.6864C49.1335 99.6864 49.402 99.5942 49.6199 99.4058C56.58 93.3904 65.475 90.0777 74.6662 90.0777C77.8521 90.0777 81.0206 90.4708 84.0825 91.2462C84.7006 91.4042 85.3274 91.0297 85.4832 90.4127C85.6401 89.7963 85.2669 89.1698 84.6492 89.0136ZM39.6141 95.7678C39.7687 95.7747 39.9235 95.778 40.0782 95.7833C39.8542 96.0198 39.6443 96.2658 39.4258 96.5063C39.4892 96.2603 39.5553 96.0156 39.6141 95.7678Z" /> <path d="M66.4222 98.0887C67.037 97.9218 67.4001 97.2891 67.2335 96.6756C67.0663 96.0626 66.4351 95.7021 65.8186 95.8652C51.1812 99.8327 40.9579 113.197 40.9579 128.364C40.9579 130.553 41.1696 132.74 41.5861 134.867C41.6942 135.416 42.1762 135.797 42.7165 135.797C42.7898 135.797 42.8647 135.79 42.9395 135.776C43.5644 135.653 43.9715 135.048 43.8493 134.424C43.4608 132.443 43.2638 130.405 43.2638 128.364C43.264 114.234 52.7869 101.784 66.4222 98.0887Z" /> <path d="M84.4809 96.1425C81.3123 95.181 78.0105 94.6933 74.6669 94.6933C74.0303 94.6933 73.5139 95.2091 73.5139 95.845C73.5139 96.4809 74.0303 96.9967 74.6669 96.9967C77.7832 96.9967 80.8592 97.451 83.8097 98.3468C83.9217 98.3804 84.0349 98.397 84.1459 98.397C84.6402 98.397 85.0973 98.0765 85.2486 97.5798C85.4334 96.9708 85.09 96.3274 84.4809 96.1425Z" /> <path d="M50.5389 128.364C50.5389 122.624 52.6017 117.06 56.3471 112.698C56.7615 112.215 56.7058 111.488 56.2223 111.074C55.7404 110.661 55.0114 110.715 54.5964 111.198C50.4927 115.978 48.2331 122.074 48.2331 128.364C48.2331 130.405 48.4683 132.44 48.9329 134.412C49.0578 134.943 49.5313 135.3 50.0543 135.3C50.1416 135.3 50.2306 135.291 50.3194 135.27C50.9393 135.125 51.3238 134.504 51.178 133.885C50.754 132.085 50.5389 130.227 50.5389 128.364Z" /> <path d="M83.3242 103.415C80.5447 102.449 77.632 101.96 74.6672 101.96C69.1838 101.96 63.921 103.629 59.447 106.786C58.9269 107.154 58.8035 107.872 59.1707 108.392C59.3953 108.71 59.7516 108.879 60.1136 108.879C60.3433 108.879 60.5759 108.81 60.7781 108.668C64.8602 105.786 69.6631 104.263 74.6673 104.263C77.3736 104.263 80.0315 104.71 82.5677 105.59C83.1684 105.8 83.827 105.481 84.0347 104.88C84.244 104.28 83.9261 103.623 83.3242 103.415Z" /> <path d="M57.8143 128.364C57.8143 127.728 57.2979 127.212 56.6613 127.212C56.0245 127.212 55.5083 127.728 55.5083 128.364C55.5083 129.699 55.6472 131.032 55.9209 132.326C56.0357 132.868 56.5149 133.239 57.048 133.239C57.1268 133.239 57.2073 133.231 57.2877 133.214C57.9104 133.083 58.3091 132.471 58.1772 131.849C57.9365 130.712 57.8143 129.539 57.8143 128.364Z" /> <path d="M80.6662 110.188C78.7363 109.55 76.7176 109.227 74.6671 109.227C65.7062 109.227 57.8294 115.575 55.9384 124.321C55.8038 124.942 56.1996 125.555 56.8222 125.69C56.9039 125.707 56.9861 125.716 57.0666 125.716C57.598 125.716 58.076 125.347 58.1925 124.807C59.8555 117.114 66.784 111.531 74.6669 111.531C76.4713 111.531 78.2458 111.814 79.942 112.375C80.5466 112.574 81.1993 112.246 81.3986 111.643C81.5991 111.039 81.2708 110.388 80.6662 110.188Z" /> <path d="M76.6097 116.653C75.9724 116.547 75.3187 116.494 74.6668 116.494C68.1138 116.494 62.7829 121.819 62.7829 128.364C62.7829 129 63.2991 129.516 63.9359 129.516C64.5725 129.516 65.0889 129 65.0889 128.364C65.0889 123.089 69.3855 118.797 74.6668 118.797C75.1932 118.797 75.7197 118.84 76.2324 118.925C76.8641 119.032 77.4541 118.604 77.5583 117.977C77.6626 117.35 77.238 116.756 76.6097 116.653Z" /> <path d="M6.78264 19.5388C15.4324 9.105 28.1405 3.12122 41.6504 3.12122C58.9834 3.12122 74.5387 12.7896 82.2454 28.3529C82.4464 28.759 82.8551 28.9941 83.2801 28.9941C83.4514 28.9941 83.6259 28.9558 83.7902 28.8749C84.3612 28.5927 84.5946 27.9021 84.3127 27.3319C76.2136 10.9771 59.8668 0.817856 41.6504 0.817856C27.4514 0.817856 14.0952 7.106 5.00712 18.07C4.60061 18.5598 4.66935 19.2858 5.15962 19.6913C5.64989 20.0984 6.37612 20.0285 6.78264 19.5388Z" /> <path d="M41.6503 88.917C53.3762 88.917 64.5378 83.8373 72.2738 74.9808C72.6925 74.5017 72.643 73.7742 72.1628 73.3563C71.6843 72.9386 70.9558 72.9875 70.5363 73.4672C63.2385 81.822 52.7095 86.6136 41.6503 86.6136C20.5149 86.6136 3.32026 69.4385 3.32026 48.327C3.32026 27.2155 20.5148 10.0404 41.6503 10.0404C42.287 10.0404 42.8033 9.52474 42.8033 8.88867C42.8033 8.25259 42.287 7.73698 41.6503 7.73698C19.2436 7.73698 1.01428 25.9457 1.01428 48.327C1.01428 70.7083 19.2436 88.917 41.6503 88.917Z" /> <path d="M74.4837 70.2402C74.674 70.36 74.8863 70.4169 75.0962 70.4169C75.4795 70.4169 75.854 70.2261 76.0735 69.8781C80.1382 63.4235 82.2865 55.9714 82.2865 48.3268C82.2865 31.9874 72.5328 17.3063 57.4382 10.9254C55.1744 9.96892 52.8109 9.21587 50.4133 8.68732C49.7908 8.54736 49.1759 8.94265 49.0391 9.56403C48.9017 10.1848 49.2947 10.7995 49.9167 10.9367C52.177 11.4349 54.4052 12.1445 56.5396 13.0466C70.7791 19.0659 79.9806 32.9147 79.9806 48.3268C79.9806 55.5366 77.9544 62.5649 74.1211 68.6522C73.7821 69.1906 73.9442 69.9011 74.4837 70.2402Z" /> <path d="M57.7875 77.7297C57.9817 77.7297 58.1783 77.6807 58.3589 77.5778C68.8457 71.5882 75.3599 60.3801 75.3599 48.3269C75.3599 29.7605 60.2383 14.656 41.6507 14.656C23.0632 14.656 7.94144 29.7605 7.94144 48.3269C7.94144 48.9629 8.45778 49.4785 9.09443 49.4785C9.73123 49.4785 10.2474 48.9629 10.2474 48.3269C10.2474 31.0308 24.335 16.9593 41.6507 16.9593C58.9664 16.9593 73.0539 31.0309 73.0539 48.3269C73.0539 59.5558 66.9842 69.9979 57.2138 75.5781C56.6615 75.8941 56.4695 76.5977 56.7854 77.1499C56.9982 77.5215 57.3873 77.7297 57.7875 77.7297Z" /> <path d="M10.7004 53.668C10.5924 53.0409 9.99663 52.6203 9.36886 52.7271C8.7411 52.8351 8.31943 53.4301 8.42692 54.0572C9.94871 62.9146 15.0899 70.9348 22.5332 76.0628C22.7331 76.2006 22.9611 76.2664 23.1868 76.2664C23.5532 76.2664 23.9136 76.0927 24.137 75.7687C24.4984 75.245 24.3667 74.5275 23.8426 74.1665C16.9073 69.3888 12.1169 61.9176 10.7004 53.668Z" /> <path d="M52.3672 77.8206C45.6357 80.2623 38.0619 80.309 31.2992 77.9507C30.6997 77.7397 30.0403 78.0586 29.8305 78.6586C29.621 79.2592 29.9379 79.9161 30.5392 80.1257C34.1029 81.368 37.8411 81.9977 41.6502 81.9977C45.6023 81.9977 49.4728 81.3207 53.154 79.9858C53.7525 79.7687 54.0616 79.1079 53.8443 78.5101C53.6277 77.913 52.9679 77.6047 52.3672 77.8206Z" /> <path d="M68.0846 48.3268C68.0846 47.6908 67.5684 47.1751 66.9316 47.1751C66.2949 47.1751 65.7786 47.6908 65.7786 48.3268C65.7786 61.6161 54.9547 72.4278 41.6504 72.4278C28.3466 72.4278 17.5227 61.6161 17.5227 48.3268C17.5227 42.3401 19.7443 36.5964 23.778 32.1534C24.206 31.6821 24.1703 30.9538 23.6986 30.5265C23.2269 30.0986 22.4972 30.1362 22.0698 30.6058C17.6504 35.474 15.2167 41.7672 15.2167 48.327C15.2167 62.8865 27.0747 74.7313 41.6503 74.7313C56.2265 74.7313 68.0846 62.8865 68.0846 48.3268Z" /> <path d="M27.6188 28.7321C31.7319 25.7842 36.5837 24.226 41.6506 24.226C52.6349 24.226 62.2389 31.6423 65.0047 42.2609C65.1399 42.7788 65.6077 43.1224 66.12 43.1224C66.2157 43.1224 66.3136 43.1107 66.411 43.0853C67.027 42.925 67.3969 42.2964 67.2364 41.6806C64.2058 30.0474 53.6849 21.9226 41.6506 21.9226C36.0984 21.9226 30.7817 23.6299 26.2744 26.8605C25.7571 27.2311 25.6389 27.9509 26.0099 28.4677C26.3807 28.9839 27.0991 29.102 27.6188 28.7321Z" /> <path d="M41.6506 67.4641C52.215 67.4641 60.8094 58.8792 60.8094 48.3268C60.8094 37.7744 52.215 29.1898 41.6506 29.1898C31.0862 29.1898 22.4918 37.7744 22.4918 48.3268C22.4918 58.8792 31.0861 67.4641 41.6506 67.4641ZM41.6506 31.4931C50.9433 31.4931 58.5035 39.0448 58.5035 48.327C58.5035 57.6091 50.9433 65.1608 41.6506 65.1608C32.3579 65.1608 24.7978 57.6091 24.7978 48.327C24.7978 39.0448 32.3579 31.4931 41.6506 31.4931Z" /> <path d="M30.92 49.4785C31.5567 49.4785 32.073 48.9629 32.073 48.3268C32.073 43.0514 36.3696 38.7597 41.6504 38.7597C46.9318 38.7597 51.2284 43.0514 51.2284 48.3268C51.2284 53.6022 46.9318 57.894 41.6504 57.894C39.0236 57.894 36.5718 56.8485 34.746 54.9495C34.3047 54.4906 33.574 54.476 33.1157 54.9169C32.6569 55.3573 32.6416 56.0866 33.083 56.5455C35.3473 58.9006 38.3903 60.1974 41.6504 60.1974C48.2035 60.1974 53.5344 54.8725 53.5344 48.3268C53.5344 41.7812 48.2035 36.4563 41.6504 36.4563C35.0979 36.4563 29.767 41.7812 29.767 48.3268C29.767 48.9629 30.2832 49.4785 30.92 49.4785Z" /> <path d="M46.6076 48.3268C46.6076 45.5966 44.3838 43.3754 41.6506 43.3754C38.9175 43.3754 36.6936 45.5967 36.6936 48.3268C36.6936 51.0569 38.9175 53.2782 41.6506 53.2782C44.3838 53.2782 46.6076 51.0571 46.6076 48.3268ZM38.9996 48.3268C38.9996 46.8664 40.1886 45.6788 41.6506 45.6788C43.1127 45.6788 44.3017 46.8664 44.3017 48.3268C44.3017 49.7872 43.1127 50.9749 41.6506 50.9749C40.1886 50.9749 38.9996 49.7872 38.9996 48.3268Z" /> </g> </mask> </defs> <g mask="url(#m1)"> <rect fill="url(#lg)" x="0" y="0" width="136" height="86" transform="rotate(90) translate(0 -86)" /> </g> </svg>
解决方案2
0 2021-08-25 15:25:40
I figured out the answer for anyone curious我想出了任何好奇的人的答案
import "./style.scss"; import { useState, useEffect } from "react"; const Card = () => { const [maskValue, setMaskValue] = useState(0); const [fingerprintValue, setFingerprintValue] = useState(0); const maskColors = ["#bebebe", "#00adb5", "#00adb5", "#bebebe"]; const fingerprintColors = ["#e51368", "#222831"]; useEffect(() => { setInterval(() => { setMaskValue((v) => ++v % maskColors.length); }, 2500); setInterval(() => { setFingerprintValue((v) => ++v % fingerprintColors.length); }, 5000); }, []); return ( < div id = "card-container" > < svg width = "85" height = "136" xmlns = "http://www.w3.org/2000/svg" xmlnsXlink = "http://www.w3.org/1999/xlink" xmlSpace = "preserve" id = "card-fingerprint" > < mask id = "myMask" > < rect x = "0" y = "0" width = "85" height = "136" fill = "white" id = "background-mask" > < /rect> < / mask > < g fill = { maskColors[maskValue] } > < path d = "M18.1633 104.059C17.7281 103.594 16.9991 103.569 16.5335 104.002C13.3999 106.922 9.55089 108.959 5.40226 109.893C4.78061 110.033 4.39055 110.65 4.53081 111.27C4.65185 111.805 5.12755 112.169 5.65453 112.169C5.73842 112.169 5.82407 112.16 5.90898 112.141C10.4563 111.117 14.6741 108.885 18.1065 105.687C18.5719 105.252 18.5972 104.524 18.1633 104.059Z" / > < path d = "M1.81283 90.9205C1.98907 90.9205 2.16793 90.88 2.33587 90.7946C4.00739 89.9431 5.0459 88.2516 5.0459 86.3813C5.0459 84.4698 3.92451 82.7099 2.18949 81.8966C1.61357 81.6256 0.925506 81.8736 0.655901 82.45C0.385714 83.0259 0.63347 83.7119 1.20997 83.9817C2.13938 84.4176 2.7402 85.3596 2.7402 86.3813C2.7402 87.3816 2.18395 88.2864 1.2876 88.743C0.720571 89.032 0.495536 89.7254 0.78495 90.2923C0.988574 90.691 1.39276 90.9205 1.81283 90.9205Z" / > < path d = "M45.247 103.85C45.6551 103.362 45.5899 102.636 45.101 102.228C44.613 101.82 43.8861 101.886 43.477 102.373C37.3861 109.654 34.0312 118.885 34.0312 128.364C34.0312 130.356 34.1782 132.36 34.4675 134.317C34.552 134.89 35.0446 135.301 35.6063 135.301C35.6627 135.301 35.7195 135.297 35.7763 135.288C36.4063 135.195 36.8415 134.61 36.7487 133.981C36.4756 132.134 36.3371 130.244 36.3371 128.364C36.3371 119.423 39.5011 110.718 45.247 103.85Z" / > < path d = "M84.6492 89.0136C81.4025 88.191 78.0437 87.7742 74.6665 87.7742C72.0794 87.7742 69.5163 88.029 67.0059 88.5119C69.5468 86.911 71.9354 85.0714 74.1368 83.0132C74.2976 83.0982 74.4722 83.1584 74.6665 83.1584C77.8321 83.1584 80.995 83.4885 84.0678 84.139C84.1483 84.1564 84.2287 84.1643 84.3081 84.1643C84.8412 84.1643 85.3197 83.7932 85.4346 83.2518C85.5668 82.6294 85.1688 82.0181 84.5461 81.8864C81.8326 81.3114 79.0522 80.9895 76.2605 80.8965C80.0124 76.9174 83.1196 72.2582 85.3658 67.0433C85.6175 66.459 85.3472 65.7819 84.7623 65.5306C84.1789 65.2781 83.4989 65.5487 83.2479 66.1334C76.0783 82.7777 59.7503 93.5326 41.6499 93.5326C25.7058 93.5326 10.7543 84.9776 2.62939 71.2064C2.30677 70.6587 1.6008 70.4759 1.05082 70.7992C0.502435 71.122 0.319496 71.8277 0.643135 72.3761C3.01217 76.3916 5.94939 79.9662 9.2924 83.0627C9.23764 83.2618 9.21652 83.4716 9.27929 83.684C9.53651 84.557 9.66716 85.4645 9.66716 86.3811C9.66716 91.0412 6.33362 95.0052 1.7415 95.806C1.11432 95.9151 0.694405 96.5117 0.804081 97.1382C0.901522 97.6977 1.38858 98.0919 1.93842 98.0919C2.00382 98.0919 2.07082 98.0862 2.13782 98.0746C7.83675 97.0815 11.973 92.1631 11.973 86.3811C11.973 86.0204 11.9286 85.664 11.8962 85.3065C13.4492 86.5503 15.0745 87.6937 16.7655 88.7335C15.7499 95.9363 10.1149 101.765 2.90337 102.981C2.27561 103.087 1.85234 103.681 1.95881 104.308C2.05334 104.87 2.54142 105.268 3.09432 105.268C3.15797 105.268 3.22278 105.263 3.28745 105.252C11.1761 103.922 17.4137 97.7379 18.9027 89.9776C20.3942 90.7921 21.92 91.5439 23.491 92.1964C22.8943 94.5917 21.9474 96.8781 20.6441 98.9907C20.3095 99.5322 20.4779 100.242 21.0202 100.575C21.2086 100.692 21.4177 100.747 21.624 100.747C22.0108 100.747 22.3886 100.552 22.6065 100.2C23.9874 97.9628 24.9976 95.5458 25.6561 93.017C27.2172 93.5785 28.8089 94.0559 30.4265 94.4529C27.6488 104.893 19.5771 113.275 9.19074 116.412C8.58162 116.596 8.23642 117.238 8.42126 117.847C8.57157 118.345 9.02921 118.666 9.52399 118.666C9.63439 118.666 9.74698 118.65 9.85841 118.616C21.0349 115.241 29.7153 106.208 32.6776 94.9617C34.1925 95.2562 35.7287 95.4617 37.2764 95.6069C36.7113 97.8815 35.9466 100.076 34.9958 102.174C33.7218 104.085 32.593 106.076 31.6183 108.137C27.353 114.3 21.3135 119.178 14.109 122.016C13.5162 122.25 13.2257 122.919 13.4594 123.51C13.6384 123.963 14.0724 124.24 14.5324 124.24C14.6731 124.24 14.816 124.214 14.9545 124.159C20.3477 122.034 25.1244 118.829 29.0621 114.832C28.3407 117.268 27.8183 119.77 27.4963 122.322C25.1078 124.145 22.5376 125.738 19.8433 127.05C19.2707 127.328 19.0327 128.017 19.312 128.589C19.5118 128.998 19.9221 129.236 20.3496 129.236C20.5184 129.236 20.6907 129.199 20.8534 129.12C23.0576 128.047 25.1854 126.798 27.2044 125.394C27.1443 126.379 27.1035 127.368 27.1035 128.364C27.1035 129.586 27.1508 130.819 27.2437 132.032C27.2899 132.636 27.7955 133.096 28.3922 133.096C28.4215 133.096 28.4514 133.095 28.4812 133.092C29.1161 133.044 29.5914 132.49 29.5429 131.856C29.4546 130.702 29.4095 129.527 29.4095 128.364C29.4095 121.647 30.8722 115.178 33.6293 109.285C34.9214 107.398 36.0503 105.398 37.0121 103.304C38.8136 100.622 40.9115 98.1064 43.3053 95.8052C46.2675 95.703 49.1784 95.3273 52.0083 94.6972C50.6581 95.6052 49.3533 96.5901 48.1112 97.6637C47.6298 98.0798 47.5769 98.8075 47.9935 99.2884C48.2215 99.5515 48.5429 99.6864 48.866 99.6864C49.1335 99.6864 49.402 99.5942 49.6199 99.4058C56.58 93.3904 65.475 90.0777 74.6662 90.0777C77.8521 90.0777 81.0206 90.4708 84.0825 91.2462C84.7006 91.4042 85.3274 91.0297 85.4832 90.4127C85.6401 89.7963 85.2669 89.1698 84.6492 89.0136ZM39.6141 95.7678C39.7687 95.7747 39.9235 95.778 40.0782 95.7833C39.8542 96.0198 39.6443 96.2658 39.4258 96.5063C39.4892 96.2603 39.5553 96.0156 39.6141 95.7678Z" / > < path d = "M66.4222 98.0887C67.037 97.9218 67.4001 97.2891 67.2335 96.6756C67.0663 96.0626 66.4351 95.7021 65.8186 95.8652C51.1812 99.8327 40.9579 113.197 40.9579 128.364C40.9579 130.553 41.1696 132.74 41.5861 134.867C41.6942 135.416 42.1762 135.797 42.7165 135.797C42.7898 135.797 42.8647 135.79 42.9395 135.776C43.5644 135.653 43.9715 135.048 43.8493 134.424C43.4608 132.443 43.2638 130.405 43.2638 128.364C43.264 114.234 52.7869 101.784 66.4222 98.0887Z" / > < path d = "M84.4809 96.1425C81.3123 95.181 78.0105 94.6933 74.6669 94.6933C74.0303 94.6933 73.5139 95.2091 73.5139 95.845C73.5139 96.4809 74.0303 96.9967 74.6669 96.9967C77.7832 96.9967 80.8592 97.451 83.8097 98.3468C83.9217 98.3804 84.0349 98.397 84.1459 98.397C84.6402 98.397 85.0973 98.0765 85.2486 97.5798C85.4334 96.9708 85.09 96.3274 84.4809 96.1425Z" / > < path d = "M50.5389 128.364C50.5389 122.624 52.6017 117.06 56.3471 112.698C56.7615 112.215 56.7058 111.488 56.2223 111.074C55.7404 110.661 55.0114 110.715 54.5964 111.198C50.4927 115.978 48.2331 122.074 48.2331 128.364C48.2331 130.405 48.4683 132.44 48.9329 134.412C49.0578 134.943 49.5313 135.3 50.0543 135.3C50.1416 135.3 50.2306 135.291 50.3194 135.27C50.9393 135.125 51.3238 134.504 51.178 133.885C50.754 132.085 50.5389 130.227 50.5389 128.364Z" / > < path d = "M83.3242 103.415C80.5447 102.449 77.632 101.96 74.6672 101.96C69.1838 101.96 63.921 103.629 59.447 106.786C58.9269 107.154 58.8035 107.872 59.1707 108.392C59.3953 108.71 59.7516 108.879 60.1136 108.879C60.3433 108.879 60.5759 108.81 60.7781 108.668C64.8602 105.786 69.6631 104.263 74.6673 104.263C77.3736 104.263 80.0315 104.71 82.5677 105.59C83.1684 105.8 83.827 105.481 84.0347 104.88C84.244 104.28 83.9261 103.623 83.3242 103.415Z" / > < path d = "M57.8143 128.364C57.8143 127.728 57.2979 127.212 56.6613 127.212C56.0245 127.212 55.5083 127.728 55.5083 128.364C55.5083 129.699 55.6472 131.032 55.9209 132.326C56.0357 132.868 56.5149 133.239 57.048 133.239C57.1268 133.239 57.2073 133.231 57.2877 133.214C57.9104 133.083 58.3091 132.471 58.1772 131.849C57.9365 130.712 57.8143 129.539 57.8143 128.364Z" / > < path d = "M80.6662 110.188C78.7363 109.55 76.7176 109.227 74.6671 109.227C65.7062 109.227 57.8294 115.575 55.9384 124.321C55.8038 124.942 56.1996 125.555 56.8222 125.69C56.9039 125.707 56.9861 125.716 57.0666 125.716C57.598 125.716 58.076 125.347 58.1925 124.807C59.8555 117.114 66.784 111.531 74.6669 111.531C76.4713 111.531 78.2458 111.814 79.942 112.375C80.5466 112.574 81.1993 112.246 81.3986 111.643C81.5991 111.039 81.2708 110.388 80.6662 110.188Z" / > < path d = "M76.6097 116.653C75.9724 116.547 75.3187 116.494 74.6668 116.494C68.1138 116.494 62.7829 121.819 62.7829 128.364C62.7829 129 63.2991 129.516 63.9359 129.516C64.5725 129.516 65.0889 129 65.0889 128.364C65.0889 123.089 69.3855 118.797 74.6668 118.797C75.1932 118.797 75.7197 118.84 76.2324 118.925C76.8641 119.032 77.4541 118.604 77.5583 117.977C77.6626 117.35 77.238 116.756 76.6097 116.653Z" / > < path d = "M6.78264 19.5388C15.4324 9.105 28.1405 3.12122 41.6504 3.12122C58.9834 3.12122 74.5387 12.7896 82.2454 28.3529C82.4464 28.759 82.8551 28.9941 83.2801 28.9941C83.4514 28.9941 83.6259 28.9558 83.7902 28.8749C84.3612 28.5927 84.5946 27.9021 84.3127 27.3319C76.2136 10.9771 59.8668 0.817856 41.6504 0.817856C27.4514 0.817856 14.0952 7.106 5.00712 18.07C4.60061 18.5598 4.66935 19.2858 5.15962 19.6913C5.64989 20.0984 6.37612 20.0285 6.78264 19.5388Z" / > < path d = "M41.6503 88.917C53.3762 88.917 64.5378 83.8373 72.2738 74.9808C72.6925 74.5017 72.643 73.7742 72.1628 73.3563C71.6843 72.9386 70.9558 72.9875 70.5363 73.4672C63.2385 81.822 52.7095 86.6136 41.6503 86.6136C20.5149 86.6136 3.32026 69.4385 3.32026 48.327C3.32026 27.2155 20.5148 10.0404 41.6503 10.0404C42.287 10.0404 42.8033 9.52474 42.8033 8.88867C42.8033 8.25259 42.287 7.73698 41.6503 7.73698C19.2436 7.73698 1.01428 25.9457 1.01428 48.327C1.01428 70.7083 19.2436 88.917 41.6503 88.917Z" / > < path d = "M74.4837 70.2402C74.674 70.36 74.8863 70.4169 75.0962 70.4169C75.4795 70.4169 75.854 70.2261 76.0735 69.8781C80.1382 63.4235 82.2865 55.9714 82.2865 48.3268C82.2865 31.9874 72.5328 17.3063 57.4382 10.9254C55.1744 9.96892 52.8109 9.21587 50.4133 8.68732C49.7908 8.54736 49.1759 8.94265 49.0391 9.56403C48.9017 10.1848 49.2947 10.7995 49.9167 10.9367C52.177 11.4349 54.4052 12.1445 56.5396 13.0466C70.7791 19.0659 79.9806 32.9147 79.9806 48.3268C79.9806 55.5366 77.9544 62.5649 74.1211 68.6522C73.7821 69.1906 73.9442 69.9011 74.4837 70.2402Z" / > < path d = "M57.7875 77.7297C57.9817 77.7297 58.1783 77.6807 58.3589 77.5778C68.8457 71.5882 75.3599 60.3801 75.3599 48.3269C75.3599 29.7605 60.2383 14.656 41.6507 14.656C23.0632 14.656 7.94144 29.7605 7.94144 48.3269C7.94144 48.9629 8.45778 49.4785 9.09443 49.4785C9.73123 49.4785 10.2474 48.9629 10.2474 48.3269C10.2474 31.0308 24.335 16.9593 41.6507 16.9593C58.9664 16.9593 73.0539 31.0309 73.0539 48.3269C73.0539 59.5558 66.9842 69.9979 57.2138 75.5781C56.6615 75.8941 56.4695 76.5977 56.7854 77.1499C56.9982 77.5215 57.3873 77.7297 57.7875 77.7297Z" / > < path d = "M10.7004 53.668C10.5924 53.0409 9.99663 52.6203 9.36886 52.7271C8.7411 52.8351 8.31943 53.4301 8.42692 54.0572C9.94871 62.9146 15.0899 70.9348 22.5332 76.0628C22.7331 76.2006 22.9611 76.2664 23.1868 76.2664C23.5532 76.2664 23.9136 76.0927 24.137 75.7687C24.4984 75.245 24.3667 74.5275 23.8426 74.1665C16.9073 69.3888 12.1169 61.9176 10.7004 53.668Z" / > < path d = "M52.3672 77.8206C45.6357 80.2623 38.0619 80.309 31.2992 77.9507C30.6997 77.7397 30.0403 78.0586 29.8305 78.6586C29.621 79.2592 29.9379 79.9161 30.5392 80.1257C34.1029 81.368 37.8411 81.9977 41.6502 81.9977C45.6023 81.9977 49.4728 81.3207 53.154 79.9858C53.7525 79.7687 54.0616 79.1079 53.8443 78.5101C53.6277 77.913 52.9679 77.6047 52.3672 77.8206Z" / > < path d = "M68.0846 48.3268C68.0846 47.6908 67.5684 47.1751 66.9316 47.1751C66.2949 47.1751 65.7786 47.6908 65.7786 48.3268C65.7786 61.6161 54.9547 72.4278 41.6504 72.4278C28.3466 72.4278 17.5227 61.6161 17.5227 48.3268C17.5227 42.3401 19.7443 36.5964 23.778 32.1534C24.206 31.6821 24.1703 30.9538 23.6986 30.5265C23.2269 30.0986 22.4972 30.1362 22.0698 30.6058C17.6504 35.474 15.2167 41.7672 15.2167 48.327C15.2167 62.8865 27.0747 74.7313 41.6503 74.7313C56.2265 74.7313 68.0846 62.8865 68.0846 48.3268Z" / > < path d = "M27.6188 28.7321C31.7319 25.7842 36.5837 24.226 41.6506 24.226C52.6349 24.226 62.2389 31.6423 65.0047 42.2609C65.1399 42.7788 65.6077 43.1224 66.12 43.1224C66.2157 43.1224 66.3136 43.1107 66.411 43.0853C67.027 42.925 67.3969 42.2964 67.2364 41.6806C64.2058 30.0474 53.6849 21.9226 41.6506 21.9226C36.0984 21.9226 30.7817 23.6299 26.2744 26.8605C25.7571 27.2311 25.6389 27.9509 26.0099 28.4677C26.3807 28.9839 27.0991 29.102 27.6188 28.7321Z" / > < path d = "M41.6506 67.4641C52.215 67.4641 60.8094 58.8792 60.8094 48.3268C60.8094 37.7744 52.215 29.1898 41.6506 29.1898C31.0862 29.1898 22.4918 37.7744 22.4918 48.3268C22.4918 58.8792 31.0861 67.4641 41.6506 67.4641ZM41.6506 31.4931C50.9433 31.4931 58.5035 39.0448 58.5035 48.327C58.5035 57.6091 50.9433 65.1608 41.6506 65.1608C32.3579 65.1608 24.7978 57.6091 24.7978 48.327C24.7978 39.0448 32.3579 31.4931 41.6506 31.4931Z" / > < path d = "M30.92 49.4785C31.5567 49.4785 32.073 48.9629 32.073 48.3268C32.073 43.0514 36.3696 38.7597 41.6504 38.7597C46.9318 38.7597 51.2284 43.0514 51.2284 48.3268C51.2284 53.6022 46.9318 57.894 41.6504 57.894C39.0236 57.894 36.5718 56.8485 34.746 54.9495C34.3047 54.4906 33.574 54.476 33.1157 54.9169C32.6569 55.3573 32.6416 56.0866 33.083 56.5455C35.3473 58.9006 38.3903 60.1974 41.6504 60.1974C48.2035 60.1974 53.5344 54.8725 53.5344 48.3268C53.5344 41.7812 48.2035 36.4563 41.6504 36.4563C35.0979 36.4563 29.767 41.7812 29.767 48.3268C29.767 48.9629 30.2832 49.4785 30.92 49.4785Z" / > < path d = "M46.6076 48.3268C46.6076 45.5966 44.3838 43.3754 41.6506 43.3754C38.9175 43.3754 36.6936 45.5967 36.6936 48.3268C36.6936 51.0569 38.9175 53.2782 41.6506 53.2782C44.3838 53.2782 46.6076 51.0571 46.6076 48.3268ZM38.9996 48.3268C38.9996 46.8664 40.1886 45.6788 41.6506 45.6788C43.1127 45.6788 44.3017 46.8664 44.3017 48.3268C44.3017 49.7872 43.1127 50.9749 41.6506 50.9749C40.1886 50.9749 38.9996 49.7872 38.9996 48.3268Z" / > < /g> < g mask = "url(#myMask)" fill = { fingerprintColors[fingerprintValue] } > < path d = "M18.1633 104.059C17.7281 103.594 16.9991 103.569 16.5335 104.002C13.3999 106.922 9.55089 108.959 5.40226 109.893C4.78061 110.033 4.39055 110.65 4.53081 111.27C4.65185 111.805 5.12755 112.169 5.65453 112.169C5.73842 112.169 5.82407 112.16 5.90898 112.141C10.4563 111.117 14.6741 108.885 18.1065 105.687C18.5719 105.252 18.5972 104.524 18.1633 104.059Z" / > < path d = "M1.81283 90.9205C1.98907 90.9205 2.16793 90.88 2.33587 90.7946C4.00739 89.9431 5.0459 88.2516 5.0459 86.3813C5.0459 84.4698 3.92451 82.7099 2.18949 81.8966C1.61357 81.6256 0.925506 81.8736 0.655901 82.45C0.385714 83.0259 0.63347 83.7119 1.20997 83.9817C2.13938 84.4176 2.7402 85.3596 2.7402 86.3813C2.7402 87.3816 2.18395 88.2864 1.2876 88.743C0.720571 89.032 0.495536 89.7254 0.78495 90.2923C0.988574 90.691 1.39276 90.9205 1.81283 90.9205Z" / > < path d = "M45.247 103.85C45.6551 103.362 45.5899 102.636 45.101 102.228C44.613 101.82 43.8861 101.886 43.477 102.373C37.3861 109.654 34.0312 118.885 34.0312 128.364C34.0312 130.356 34.1782 132.36 34.4675 134.317C34.552 134.89 35.0446 135.301 35.6063 135.301C35.6627 135.301 35.7195 135.297 35.7763 135.288C36.4063 135.195 36.8415 134.61 36.7487 133.981C36.4756 132.134 36.3371 130.244 36.3371 128.364C36.3371 119.423 39.5011 110.718 45.247 103.85Z" / > < path d = "M84.6492 89.0136C81.4025 88.191 78.0437 87.7742 74.6665 87.7742C72.0794 87.7742 69.5163 88.029 67.0059 88.5119C69.5468 86.911 71.9354 85.0714 74.1368 83.0132C74.2976 83.0982 74.4722 83.1584 74.6665 83.1584C77.8321 83.1584 80.995 83.4885 84.0678 84.139C84.1483 84.1564 84.2287 84.1643 84.3081 84.1643C84.8412 84.1643 85.3197 83.7932 85.4346 83.2518C85.5668 82.6294 85.1688 82.0181 84.5461 81.8864C81.8326 81.3114 79.0522 80.9895 76.2605 80.8965C80.0124 76.9174 83.1196 72.2582 85.3658 67.0433C85.6175 66.459 85.3472 65.7819 84.7623 65.5306C84.1789 65.2781 83.4989 65.5487 83.2479 66.1334C76.0783 82.7777 59.7503 93.5326 41.6499 93.5326C25.7058 93.5326 10.7543 84.9776 2.62939 71.2064C2.30677 70.6587 1.6008 70.4759 1.05082 70.7992C0.502435 71.122 0.319496 71.8277 0.643135 72.3761C3.01217 76.3916 5.94939 79.9662 9.2924 83.0627C9.23764 83.2618 9.21652 83.4716 9.27929 83.684C9.53651 84.557 9.66716 85.4645 9.66716 86.3811C9.66716 91.0412 6.33362 95.0052 1.7415 95.806C1.11432 95.9151 0.694405 96.5117 0.804081 97.1382C0.901522 97.6977 1.38858 98.0919 1.93842 98.0919C2.00382 98.0919 2.07082 98.0862 2.13782 98.0746C7.83675 97.0815 11.973 92.1631 11.973 86.3811C11.973 86.0204 11.9286 85.664 11.8962 85.3065C13.4492 86.5503 15.0745 87.6937 16.7655 88.7335C15.7499 95.9363 10.1149 101.765 2.90337 102.981C2.27561 103.087 1.85234 103.681 1.95881 104.308C2.05334 104.87 2.54142 105.268 3.09432 105.268C3.15797 105.268 3.22278 105.263 3.28745 105.252C11.1761 103.922 17.4137 97.7379 18.9027 89.9776C20.3942 90.7921 21.92 91.5439 23.491 92.1964C22.8943 94.5917 21.9474 96.8781 20.6441 98.9907C20.3095 99.5322 20.4779 100.242 21.0202 100.575C21.2086 100.692 21.4177 100.747 21.624 100.747C22.0108 100.747 22.3886 100.552 22.6065 100.2C23.9874 97.9628 24.9976 95.5458 25.6561 93.017C27.2172 93.5785 28.8089 94.0559 30.4265 94.4529C27.6488 104.893 19.5771 113.275 9.19074 116.412C8.58162 116.596 8.23642 117.238 8.42126 117.847C8.57157 118.345 9.02921 118.666 9.52399 118.666C9.63439 118.666 9.74698 118.65 9.85841 118.616C21.0349 115.241 29.7153 106.208 32.6776 94.9617C34.1925 95.2562 35.7287 95.4617 37.2764 95.6069C36.7113 97.8815 35.9466 100.076 34.9958 102.174C33.7218 104.085 32.593 106.076 31.6183 108.137C27.353 114.3 21.3135 119.178 14.109 122.016C13.5162 122.25 13.2257 122.919 13.4594 123.51C13.6384 123.963 14.0724 124.24 14.5324 124.24C14.6731 124.24 14.816 124.214 14.9545 124.159C20.3477 122.034 25.1244 118.829 29.0621 114.832C28.3407 117.268 27.8183 119.77 27.4963 122.322C25.1078 124.145 22.5376 125.738 19.8433 127.05C19.2707 127.328 19.0327 128.017 19.312 128.589C19.5118 128.998 19.9221 129.236 20.3496 129.236C20.5184 129.236 20.6907 129.199 20.8534 129.12C23.0576 128.047 25.1854 126.798 27.2044 125.394C27.1443 126.379 27.1035 127.368 27.1035 128.364C27.1035 129.586 27.1508 130.819 27.2437 132.032C27.2899 132.636 27.7955 133.096 28.3922 133.096C28.4215 133.096 28.4514 133.095 28.4812 133.092C29.1161 133.044 29.5914 132.49 29.5429 131.856C29.4546 130.702 29.4095 129.527 29.4095 128.364C29.4095 121.647 30.8722 115.178 33.6293 109.285C34.9214 107.398 36.0503 105.398 37.0121 103.304C38.8136 100.622 40.9115 98.1064 43.3053 95.8052C46.2675 95.703 49.1784 95.3273 52.0083 94.6972C50.6581 95.6052 49.3533 96.5901 48.1112 97.6637C47.6298 98.0798 47.5769 98.8075 47.9935 99.2884C48.2215 99.5515 48.5429 99.6864 48.866 99.6864C49.1335 99.6864 49.402 99.5942 49.6199 99.4058C56.58 93.3904 65.475 90.0777 74.6662 90.0777C77.8521 90.0777 81.0206 90.4708 84.0825 91.2462C84.7006 91.4042 85.3274 91.0297 85.4832 90.4127C85.6401 89.7963 85.2669 89.1698 84.6492 89.0136ZM39.6141 95.7678C39.7687 95.7747 39.9235 95.778 40.0782 95.7833C39.8542 96.0198 39.6443 96.2658 39.4258 96.5063C39.4892 96.2603 39.5553 96.0156 39.6141 95.7678Z" / > < path d = "M66.4222 98.0887C67.037 97.9218 67.4001 97.2891 67.2335 96.6756C67.0663 96.0626 66.4351 95.7021 65.8186 95.8652C51.1812 99.8327 40.9579 113.197 40.9579 128.364C40.9579 130.553 41.1696 132.74 41.5861 134.867C41.6942 135.416 42.1762 135.797 42.7165 135.797C42.7898 135.797 42.8647 135.79 42.9395 135.776C43.5644 135.653 43.9715 135.048 43.8493 134.424C43.4608 132.443 43.2638 130.405 43.2638 128.364C43.264 114.234 52.7869 101.784 66.4222 98.0887Z" / > < path d = "M84.4809 96.1425C81.3123 95.181 78.0105 94.6933 74.6669 94.6933C74.0303 94.6933 73.5139 95.2091 73.5139 95.845C73.5139 96.4809 74.0303 96.9967 74.6669 96.9967C77.7832 96.9967 80.8592 97.451 83.8097 98.3468C83.9217 98.3804 84.0349 98.397 84.1459 98.397C84.6402 98.397 85.0973 98.0765 85.2486 97.5798C85.4334 96.9708 85.09 96.3274 84.4809 96.1425Z" / > < path d = "M50.5389 128.364C50.5389 122.624 52.6017 117.06 56.3471 112.698C56.7615 112.215 56.7058 111.488 56.2223 111.074C55.7404 110.661 55.0114 110.715 54.5964 111.198C50.4927 115.978 48.2331 122.074 48.2331 128.364C48.2331 130.405 48.4683 132.44 48.9329 134.412C49.0578 134.943 49.5313 135.3 50.0543 135.3C50.1416 135.3 50.2306 135.291 50.3194 135.27C50.9393 135.125 51.3238 134.504 51.178 133.885C50.754 132.085 50.5389 130.227 50.5389 128.364Z" / > < path d = "M83.3242 103.415C80.5447 102.449 77.632 101.96 74.6672 101.96C69.1838 101.96 63.921 103.629 59.447 106.786C58.9269 107.154 58.8035 107.872 59.1707 108.392C59.3953 108.71 59.7516 108.879 60.1136 108.879C60.3433 108.879 60.5759 108.81 60.7781 108.668C64.8602 105.786 69.6631 104.263 74.6673 104.263C77.3736 104.263 80.0315 104.71 82.5677 105.59C83.1684 105.8 83.827 105.481 84.0347 104.88C84.244 104.28 83.9261 103.623 83.3242 103.415Z" / > < path d = "M57.8143 128.364C57.8143 127.728 57.2979 127.212 56.6613 127.212C56.0245 127.212 55.5083 127.728 55.5083 128.364C55.5083 129.699 55.6472 131.032 55.9209 132.326C56.0357 132.868 56.5149 133.239 57.048 133.239C57.1268 133.239 57.2073 133.231 57.2877 133.214C57.9104 133.083 58.3091 132.471 58.1772 131.849C57.9365 130.712 57.8143 129.539 57.8143 128.364Z" / > < path d = "M80.6662 110.188C78.7363 109.55 76.7176 109.227 74.6671 109.227C65.7062 109.227 57.8294 115.575 55.9384 124.321C55.8038 124.942 56.1996 125.555 56.8222 125.69C56.9039 125.707 56.9861 125.716 57.0666 125.716C57.598 125.716 58.076 125.347 58.1925 124.807C59.8555 117.114 66.784 111.531 74.6669 111.531C76.4713 111.531 78.2458 111.814 79.942 112.375C80.5466 112.574 81.1993 112.246 81.3986 111.643C81.5991 111.039 81.2708 110.388 80.6662 110.188Z" / > < path d = "M76.6097 116.653C75.9724 116.547 75.3187 116.494 74.6668 116.494C68.1138 116.494 62.7829 121.819 62.7829 128.364C62.7829 129 63.2991 129.516 63.9359 129.516C64.5725 129.516 65.0889 129 65.0889 128.364C65.0889 123.089 69.3855 118.797 74.6668 118.797C75.1932 118.797 75.7197 118.84 76.2324 118.925C76.8641 119.032 77.4541 118.604 77.5583 117.977C77.6626 117.35 77.238 116.756 76.6097 116.653Z" / > < path d = "M6.78264 19.5388C15.4324 9.105 28.1405 3.12122 41.6504 3.12122C58.9834 3.12122 74.5387 12.7896 82.2454 28.3529C82.4464 28.759 82.8551 28.9941 83.2801 28.9941C83.4514 28.9941 83.6259 28.9558 83.7902 28.8749C84.3612 28.5927 84.5946 27.9021 84.3127 27.3319C76.2136 10.9771 59.8668 0.817856 41.6504 0.817856C27.4514 0.817856 14.0952 7.106 5.00712 18.07C4.60061 18.5598 4.66935 19.2858 5.15962 19.6913C5.64989 20.0984 6.37612 20.0285 6.78264 19.5388Z" / > < path d = "M41.6503 88.917C53.3762 88.917 64.5378 83.8373 72.2738 74.9808C72.6925 74.5017 72.643 73.7742 72.1628 73.3563C71.6843 72.9386 70.9558 72.9875 70.5363 73.4672C63.2385 81.822 52.7095 86.6136 41.6503 86.6136C20.5149 86.6136 3.32026 69.4385 3.32026 48.327C3.32026 27.2155 20.5148 10.0404 41.6503 10.0404C42.287 10.0404 42.8033 9.52474 42.8033 8.88867C42.8033 8.25259 42.287 7.73698 41.6503 7.73698C19.2436 7.73698 1.01428 25.9457 1.01428 48.327C1.01428 70.7083 19.2436 88.917 41.6503 88.917Z" / > < path d = "M74.4837 70.2402C74.674 70.36 74.8863 70.4169 75.0962 70.4169C75.4795 70.4169 75.854 70.2261 76.0735 69.8781C80.1382 63.4235 82.2865 55.9714 82.2865 48.3268C82.2865 31.9874 72.5328 17.3063 57.4382 10.9254C55.1744 9.96892 52.8109 9.21587 50.4133 8.68732C49.7908 8.54736 49.1759 8.94265 49.0391 9.56403C48.9017 10.1848 49.2947 10.7995 49.9167 10.9367C52.177 11.4349 54.4052 12.1445 56.5396 13.0466C70.7791 19.0659 79.9806 32.9147 79.9806 48.3268C79.9806 55.5366 77.9544 62.5649 74.1211 68.6522C73.7821 69.1906 73.9442 69.9011 74.4837 70.2402Z" / > < path d = "M57.7875 77.7297C57.9817 77.7297 58.1783 77.6807 58.3589 77.5778C68.8457 71.5882 75.3599 60.3801 75.3599 48.3269C75.3599 29.7605 60.2383 14.656 41.6507 14.656C23.0632 14.656 7.94144 29.7605 7.94144 48.3269C7.94144 48.9629 8.45778 49.4785 9.09443 49.4785C9.73123 49.4785 10.2474 48.9629 10.2474 48.3269C10.2474 31.0308 24.335 16.9593 41.6507 16.9593C58.9664 16.9593 73.0539 31.0309 73.0539 48.3269C73.0539 59.5558 66.9842 69.9979 57.2138 75.5781C56.6615 75.8941 56.4695 76.5977 56.7854 77.1499C56.9982 77.5215 57.3873 77.7297 57.7875 77.7297Z" / > < path d = "M10.7004 53.668C10.5924 53.0409 9.99663 52.6203 9.36886 52.7271C8.7411 52.8351 8.31943 53.4301 8.42692 54.0572C9.94871 62.9146 15.0899 70.9348 22.5332 76.0628C22.7331 76.2006 22.9611 76.2664 23.1868 76.2664C23.5532 76.2664 23.9136 76.0927 24.137 75.7687C24.4984 75.245 24.3667 74.5275 23.8426 74.1665C16.9073 69.3888 12.1169 61.9176 10.7004 53.668Z" / > < path d = "M52.3672 77.8206C45.6357 80.2623 38.0619 80.309 31.2992 77.9507C30.6997 77.7397 30.0403 78.0586 29.8305 78.6586C29.621 79.2592 29.9379 79.9161 30.5392 80.1257C34.1029 81.368 37.8411 81.9977 41.6502 81.9977C45.6023 81.9977 49.4728 81.3207 53.154 79.9858C53.7525 79.7687 54.0616 79.1079 53.8443 78.5101C53.6277 77.913 52.9679 77.6047 52.3672 77.8206Z" / > < path d = "M68.0846 48.3268C68.0846 47.6908 67.5684 47.1751 66.9316 47.1751C66.2949 47.1751 65.7786 47.6908 65.7786 48.3268C65.7786 61.6161 54.9547 72.4278 41.6504 72.4278C28.3466 72.4278 17.5227 61.6161 17.5227 48.3268C17.5227 42.3401 19.7443 36.5964 23.778 32.1534C24.206 31.6821 24.1703 30.9538 23.6986 30.5265C23.2269 30.0986 22.4972 30.1362 22.0698 30.6058C17.6504 35.474 15.2167 41.7672 15.2167 48.327C15.2167 62.8865 27.0747 74.7313 41.6503 74.7313C56.2265 74.7313 68.0846 62.8865 68.0846 48.3268Z" / > < path d = "M27.6188 28.7321C31.7319 25.7842 36.5837 24.226 41.6506 24.226C52.6349 24.226 62.2389 31.6423 65.0047 42.2609C65.1399 42.7788 65.6077 43.1224 66.12 43.1224C66.2157 43.1224 66.3136 43.1107 66.411 43.0853C67.027 42.925 67.3969 42.2964 67.2364 41.6806C64.2058 30.0474 53.6849 21.9226 41.6506 21.9226C36.0984 21.9226 30.7817 23.6299 26.2744 26.8605C25.7571 27.2311 25.6389 27.9509 26.0099 28.4677C26.3807 28.9839 27.0991 29.102 27.6188 28.7321Z" / > < path d = "M41.6506 67.4641C52.215 67.4641 60.8094 58.8792 60.8094 48.3268C60.8094 37.7744 52.215 29.1898 41.6506 29.1898C31.0862 29.1898 22.4918 37.7744 22.4918 48.3268C22.4918 58.8792 31.0861 67.4641 41.6506 67.4641ZM41.6506 31.4931C50.9433 31.4931 58.5035 39.0448 58.5035 48.327C58.5035 57.6091 50.9433 65.1608 41.6506 65.1608C32.3579 65.1608 24.7978 57.6091 24.7978 48.327C24.7978 39.0448 32.3579 31.4931 41.6506 31.4931Z" / > < path d = "M30.92 49.4785C31.5567 49.4785 32.073 48.9629 32.073 48.3268C32.073 43.0514 36.3696 38.7597 41.6504 38.7597C46.9318 38.7597 51.2284 43.0514 51.2284 48.3268C51.2284 53.6022 46.9318 57.894 41.6504 57.894C39.0236 57.894 36.5718 56.8485 34.746 54.9495C34.3047 54.4906 33.574 54.476 33.1157 54.9169C32.6569 55.3573 32.6416 56.0866 33.083 56.5455C35.3473 58.9006 38.3903 60.1974 41.6504 60.1974C48.2035 60.1974 53.5344 54.8725 53.5344 48.3268C53.5344 41.7812 48.2035 36.4563 41.6504 36.4563C35.0979 36.4563 29.767 41.7812 29.767 48.3268C29.767 48.9629 30.2832 49.4785 30.92 49.4785Z" / > < path d = "M46.6076 48.3268C46.6076 45.5966 44.3838 43.3754 41.6506 43.3754C38.9175 43.3754 36.6936 45.5967 36.6936 48.3268C36.6936 51.0569 38.9175 53.2782 41.6506 53.2782C44.3838 53.2782 46.6076 51.0571 46.6076 48.3268ZM38.9996 48.3268C38.9996 46.8664 40.1886 45.6788 41.6506 45.6788C43.1127 45.6788 44.3017 46.8664 44.3017 48.3268C44.3017 49.7872 43.1127 50.9749 41.6506 50.9749C40.1886 50.9749 38.9996 49.7872 38.9996 48.3268Z" / > < /g> < / svg > < /div> ); }; export default Card;
#card-container { max-width: 500px; position: relative; #card-logo { position: absolute; top: 5%; left: 5%; width: 125px; } #card-fingerprint { position: absolute; bottom: 10%; right: 6%; #background-mask { animation: animate 2.5s linear alternate infinite; @keyframes animate { 0% { height: 0; } 100% { height: 136px; } } } } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
我可以对 SVG 使用 animate()<path> ?</path> - Can i use animate() for SVG <path>?
如何在悬停时为 svg 图标设置动画？ - How can I animate an svg icon on hover?
我想把 SVG class colors 改成 rainbow animation 怎么办？ - I want to change SVG class colors to rainbow animation. How can I do it?
我如何使用SVG更改页面和发布数据 - How can i use svg to change page and post data
如何在 SVG 的路径中填充多个 colors？ - How can I fill multiple colors in a path for SVG?
如何使用CSS或JavaScript动画或转换SVG路径？ - How can I animate or transition SVG paths with CSS or JavaScript?
如何使用JavaScript动画跟踪SVG矩形？ - How can I animate the tracing a SVG rectangle using JavaScript?
如何为svg路径的渐进式绘制设置动画？ - How can I animate a progressive drawing of svg path?
如何停止屏蔽 svg？ - How to stop masking on svg?
如何在SVG中从0到100％制作饼图零件的动画？ - How can I animate a pie chart part from 0 to 100% in svg?
相关标签