Как плавно отрисовать svg с разной шириной строки

Question

Как плавно отрисовать svg с разной шириной строки

Рейтинг: 1Ответов: 3Опубликовано: 06.02.2023

Всем Привет! Как можно отрисовать такую svg с одного края до другого? https://codepen.io/AlexeyArnaut/pen/ZEjPjaq

<svg width="2155" height="1310" viewBox="0 0 2155 1310" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path fill-rule="evenodd" clip-rule="evenodd"
        d="M707.543 1056.11C711.672 1055.9 716 1055.69 720.549 1055.47C720.549 1055.47 694.281 1062.6 657.739 1057.43C671.117 1057.9 686.815 1057.13 707.543 1056.11ZM657.739 1057.43C634.781 1056.63 618.655 1052.17 595.661 1039.02C595.352 1038.87 595.042 1038.71 594.732 1038.55C591.2 1036.75 587.581 1034.91 584.06 1032.9C568.345 1051.21 538.041 1073.99 526.265 1081.97C514.489 1089.95 493.989 1098.62 459.859 1106.97C299.309 1146.27 0 1131.37 0 1131.37L24.3092 1111.66C24.3092 1111.66 330.992 1121.38 435.709 1089.55C467.09 1080 488.78 1070.3 506.023 1060.68C523.267 1051.07 542.722 1032.45 556.841 1015.96C548.499 1009.98 540.877 1003.56 534.795 996.706C518.846 978.983 506.353 947.887 531.508 930.993C546.373 920.982 560.979 923.281 574.223 929.387L575.088 929.9C582.248 933.323 588.989 937.821 595.15 941.931C596.36 942.738 597.547 943.531 598.712 944.297C622.744 960.401 609.601 994.545 598.167 1013.61C594.723 1019.3 590.698 1024.86 586.273 1030.22C586.273 1030.22 610.293 1045.33 628.933 1051.04C639.003 1054.12 648.686 1056.15 657.739 1057.43ZM559.891 1011.24C560.013 1011.4 560.137 1011.56 560.261 1011.72C564.154 1006.96 567.738 1001.99 570.985 996.959C580.143 982.798 590.086 957.85 582.603 940.375C561.045 939.905 543.059 958.633 544.581 975.071C545.74 986.9 550.6 998.283 557.96 1008.65C558.55 1009.51 559.206 1010.36 559.891 1011.24Z"
        fill="url(#paint0_linear_426_3748)" />
    <path
        d="M1765.22 1022.56C1784.23 1045.25 1858.81 1080.17 1936.13 1043.15C1971.5 1026.22 2001.12 983.526 2022.03 944.639C2046.91 905.143 2055.79 868.874 2055.79 868.874C2055.79 868.874 2043.48 904.757 2022.03 944.639C1995.86 986.19 1951.97 1031.31 1882.08 1041.53C1852.3 1045.89 1806.55 1022.1 1792.44 1005.61C1788.54 1000.86 1781.54 991.64 1778.29 986.611C1769.13 972.45 1759.19 947.502 1766.67 930.027L1773.13 919.951C1765.97 923.374 1760.29 927.473 1754.13 931.583C1752.92 932.391 1751.73 933.183 1750.56 933.949C1726.53 950.053 1739.67 984.197 1751.11 1003.26C1754.55 1008.95 1758.58 1014.51 1763 1019.87C1763 1019.87 1764.34 1021.52 1765.22 1022.56Z"
        fill="url(#paint1_linear_426_3748)" />
    <path
        d="M910.295 887.395C962.15 920.49 1107.94 1008.28 1166.96 1032.55C1225.97 1056.83 1294.39 1090.73 1505.34 1091.09C1682.45 1091.39 1740.77 1061.8 1796.94 1018.06C1827 994.654 1836.87 966.101 1827.39 939.61C1812.68 898.49 1768.12 922.379 1768.12 922.379L1761.89 932.057C1761.89 932.057 1783.3 933.756 1792.17 947.195C1806.86 969.455 1779.24 1001.24 1779.24 1001.24C1779.24 1001.24 1696.48 1077.29 1505.34 1072.42C1321.45 1067.73 1262.47 1051.02 1188.05 1024.56C1113.64 998.1 951.632 904.887 885.88 862.501C855.467 842.917 826.095 821.851 799.027 798.342C792.41 792.572 785.75 786.622 779.351 780.515C778.05 779.203 776.676 778.004 775.375 776.693C775.217 776.444 770.611 771.629 769.268 770.137C759.203 758.993 749.357 747.513 740.126 735.698C673.647 650.956 612.026 537.482 628.113 426.478C645.634 305.529 771.88 232.846 891.212 227.434C954.952 224.532 1027.26 241.748 1082.85 273.064C1094.5 282.779 1101.59 295.97 1101.59 295.97C1107.23 310.246 1112.73 329.481 1111.98 344.878C1110.86 366.264 1090 388.195 1068.69 384.93L1075.66 398.91C1087.82 408.419 1102.72 413.954 1119.07 402.878C1146.74 384.195 1138.48 344.545 1125.5 319.722C1125.5 319.722 1114.36 295.786 1108.43 289.421C1100.54 280.949 1085.26 269.72 1085.26 269.72C1081.81 266.44 1076.65 262.519 1073.16 259.532C1047.43 237.896 1015.7 223.666 982.775 214.946C914.933 197.026 845.53 198.216 778.305 220.49C720.651 239.562 664.071 271.226 631.997 323.101C572.834 418.925 609.635 538.71 660.314 628.023C719.269 731.848 808.128 822.27 910.295 887.395Z"
        fill="url(#paint2_linear_426_3748)" />
    <path
        d="M853.268 1030.24C984.872 1004.34 1164.55 960.175 1307.52 829.004C1474.53 675.776 1560.13 562.379 1576.12 429.017C1582.8 373.399 1571.26 317.973 1543.41 269.617C1536.23 257.223 1527.91 245.477 1518.64 234.335C1521.34 237.895 1515.9 232.944 1509.84 227.421L1509.84 227.421C1505.59 223.549 1501.03 219.397 1498.74 217.698C1491.07 212.08 1482.86 207.158 1474.53 202.551C1443.04 185.122 1407.05 176.455 1370.73 174.431C1297.5 170.335 1224.44 197.407 1165.28 238.816C1106.12 280.225 1089.41 313.447 1089.41 313.447C1078.05 330.581 1064.18 361.532 1068.8 384.995L1075.77 398.977C1069.21 393.68 1063.25 387.05 1057.8 380.99L1057.67 380.852C1056.64 379.707 1055.63 378.583 1054.64 377.493C1033.37 353.756 1069.99 261.537 1148.61 208.861C1224.3 158.145 1296.02 140.805 1375.01 152.493C1450.1 163.668 1516.3 212.278 1559.36 269.617C1596.88 319.411 1610.6 361.335 1610.6 424.788C1610.6 519.431 1543.52 643.263 1437.32 756.734C1378.1 820.009 1314.45 883.055 1231.49 929.319C1176.35 960.07 1136.75 985.85 1063.78 1005.17C840.394 1064.32 702.996 1058.54 702.996 1058.54C702.996 1058.54 679.094 1059.19 666.248 1058.54C655.001 1057.97 641.509 1056.14 641.509 1056.14L637.212 1054.63C637.212 1054.63 757.447 1049.16 853.268 1030.24Z"
        fill="url(#paint3_linear_426_3748)" />
    <g opacity="0.5" filter="url(#filter0_f_426_3748)">
        <path fill-rule="evenodd" clip-rule="evenodd"
            d="M1528.12 246.797C1528.12 246.797 1638.49 160.68 1560.91 228.598C1555.14 234.545 1545.11 245.606 1535.31 253.826C1525.51 262.045 1472.05 298.522 1472.05 298.522L1528.12 246.797Z"
            fill="#FFA739" />
    </g>
    <g clip-path="url(#clip0_426_3748)">
        <g filter="url(#filter1_f_426_3748)">
            <path d="M1496 211H1594V310H1496V211Z" fill="url(#pattern0)" />
        </g>
        <path d="M1495 213H1593V312H1495V213Z" fill="url(#pattern1)" />
    </g>
    <defs>
        <filter id="filter0_f_426_3748" x="1461.8" y="192.26" width="136.988"
            height="116.504" filterUnits="userSpaceOnUse"
            color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix" />
            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix"
                result="shape" />
            <feGaussianBlur stdDeviation="5.12105"
                result="effect1_foregroundBlur_426_3748" />
        </filter>
        <filter id="filter1_f_426_3748" x="1480" y="195" width="130" height="131"
            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix" />
            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix"
                result="shape" />
            <feGaussianBlur stdDeviation="8" result="effect1_foregroundBlur_426_3748" />
        </filter>
        <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
            <use xlink:href="#image0_426_3748" transform="scale(0.012987 0.0128205)" />
        </pattern>
        <pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
            <use xlink:href="#image1_426_3748" transform="scale(0.012987 0.0128205)" />
        </pattern>
        <linearGradient id="paint0_linear_426_3748" x1="-463.625" y1="1060.09" x2="506.473"
            y2="616.75" gradientUnits="userSpaceOnUse">
            <stop offset="0.585458" stop-color="#FCE1A2" />
            <stop offset="0.708489" stop-color="#FAD788" />
            <stop offset="0.782794" stop-color="#FAD486" />
            <stop offset="0.864145" stop-color="#DE9142" />
            <stop offset="0.886666" stop-color="#EFB259" />
            <stop offset="0.911288" stop-color="#FFF9C5" />
            <stop offset="0.954736" stop-color="#F7C777" />
        </linearGradient>
        <linearGradient id="paint1_linear_426_3748" x1="1672.87" y1="930.81" x2="2054.48"
            y2="1065.22" gradientUnits="userSpaceOnUse">
            <stop stop-color="#FBD994" />
            <stop offset="0.0975583" stop-color="#F4CD6F" />
            <stop offset="0.18999" stop-color="#F1C66E" />
            <stop offset="0.313302" stop-color="#F7ED97" />
            <stop offset="0.4153" stop-color="#F4CC76" />
            <stop offset="0.551347" stop-color="#AD8D4D" />
            <stop offset="0.638845" stop-color="#A36A30" />
            <stop offset="0.779765" stop-color="#F8E5A1" />
            <stop offset="0.906358" stop-color="#FAD087" />
            <stop offset="1" stop-color="#FCE0A0" />
        </linearGradient>
        <linearGradient id="paint2_linear_426_3748" x1="555.341" y1="545.858" x2="1855.89"
            y2="537.465" gradientUnits="userSpaceOnUse">
            <stop stop-color="#FEF6BD" />
            <stop offset="0.0743805" stop-color="#F4C872" />
            <stop offset="0.18633" stop-color="#ECD180" />
            <stop offset="0.276608" stop-color="#E1D78B" />
            <stop offset="0.317988" stop-color="#A0672E" />
            <stop offset="0.36739" stop-color="#9C7B41" />
            <stop offset="0.430421" stop-color="#4C3C22" />
            <stop offset="0.535767" stop-color="#9A7E46" />
            <stop offset="0.610728" stop-color="#FEEFB7" />
            <stop offset="0.673759" stop-color="#FAD587" />
            <stop offset="0.715368" stop-color="#EFB65C" />
            <stop offset="0.770927" stop-color="#FADA8B" />
            <stop offset="0.854866" stop-color="#FADB8C" />
            <stop offset="0.963519" stop-color="#DE9242" />
            <stop offset="0.975212" stop-color="#EAAC55" />
            <stop offset="1" stop-color="#F5C779" />
        </linearGradient>
        <linearGradient id="paint3_linear_426_3748" x1="1806.69" y1="444.84" x2="559.857"
            y2="725.623" gradientUnits="userSpaceOnUse">
            <stop stop-color="#FBD994" />
            <stop offset="0.0975583" stop-color="#F4CD6F" />
            <stop offset="0.18999" stop-color="#F1C66E" />
            <stop offset="0.313302" stop-color="#F7ED97" />
            <stop offset="0.4153" stop-color="#F4CC76" />
            <stop offset="0.551347" stop-color="#AD8D4D" />
            <stop offset="0.638845" stop-color="#A36A30" />
            <stop offset="0.779765" stop-color="#F8E5A1" />
            <stop offset="0.906358" stop-color="#FAD087" />
            <stop offset="1" stop-color="#FCE0A0" />
        </linearGradient>
        <clipPath id="clip0_426_3748">
            <rect width="99" height="100" fill="white" transform="translate(1496 211)" />
        </clipPath>
        <image id="image0_426_3748" width="77" height="78"
            xlink:href="data:image/png;base64,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" />
        <image id="image1_426_3748" width="77" height="78"
            xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAABOCAYAAABlnZseAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH5wICDxIIai+lrQAAHYhJREFUeNrtfHmQXMd539f9rrnv2XNmd3HtAouDBAGQAEGQ4iEe4iFSlKgjsWVZFUlmknIsVSlVqpQrdlKxrERyxU5JriiqkHIsiRRokyYtkyJNGSRA3CBAkNgbxO7MLnZ37vPNO7q//DHzZt/M7lIUOaxymfyqFjPzZl6/r3/99Xc3CCLC1ngYAAAQAAgAjCcyQAgh34RvwQN/kCf/3hVA9a/+N1ICAIhgMAQAgMlkBiwaaYxBGp+REKCIgNZnRABCgDSeY/2W48p7hFYiAEApAc4RZJECAgDjCIwjKCIFjggMAThHkAQCHAE4IogCBcYROEcQGvcTUn+Wnef3SiK8A+M++G/05Oyd8ucViZRHt9cOj73FCVn51XAsDJTUP00kMjASDzeBJwAAhAA0gCOEtICFtkVCgFXf2XlpAb4F1fr40Bi/8aMW0NsXohNErcHtzA3HwoCIeAUAynpGlhws4osogU9uGyUWg5PJTJOpiUSmyaT13poA2kZuf07/wV7ROJC1LrcA9k7U8r0dSFwboolkBsYTmY5IWRO0pnTYuNkaD0MYgOdLuqaWVE4U2uOPKEHB46dNYNtAGm9IWxMYYkkdaV6znjWZzBLxUlXpORWU2sFswcQGEmmTXOtaXWtg6wQQYSKZgXvFx4XH7rqX7r37LjocC3cONNLYTwgASOqfOQB8GxHnxkeMUqFS5tyUFIUM3bkr5v3MoRipTzzTBNgCayKRqU8e69O1A2EH5w+//nUASpWo3y3HNozSd5Kudbcn4hpbFuDSbJp8Q5Toj24+KBf7/kh5NrMsf2L7Dvy1IvybgNY+MWt1h+NhOLz4c7ZUNNVysVqihAf7HNKWKg36rrnuILUAs+u0kXioIbUrHLbrJgIA2RffoIIkyDqC4v4vf9SiCy0pbSdCSFN6bRdbeL/R10++s31UmtgUc51RDLfmEARhOW0+8eRjOJno4PZsV7p24LYNRuFLvGIuLhazOoOqIotDcbe4a4OS7tp/cESwBhqJhxtblQCusdHsVyaSWaINMhBlqggycT576+3YbhAQG+Cso7Ps1tgCsuir0ZBXdCb7vH7uAD9DDSMkpy4lrvDbE5kOyZkNNGpbabC955zDTacmWeBYrTQ9l05ojDGvw7G9J+DauafL5x1PZJr3jMTDtm1Zn6BACAiU1l8b7x8EgGIlryjM6NI5miOxEEJDLRCCjdcVJlYsxQqHxGY5JxIZuHljr/JAaINPiNBexc3DFJmeWVqqfO/FcfMIIv/HWBhHOqnTENbRFw0Wt8bD8G2cYsVEIZNYzk9XddMM+D27+n3Oa373vl3BiWR2ZY6N1SfNyQEwzoEh1v84h6dKj4BiMD8VcIPOeI1QCgKlQCkFSgWghAClFCS6BkgNvs5fvJUAIXBbaED4vYM7PbIo9fhD8pDDI4WAc61QLJafurhoPApAhmNhmEhmYKJD1pMgYlOJNy/asbPQpRQ+dkuEli6p3oGNvdcO9UVvkinQxFL65Mx87nXNZ2bOvZ7lK4MQoABACYDBsWXLb3cS4o31bzbN6p0LqepPUqqewzb/yvLBGELTmbWcW8vZvaHLJwpBdySgOAY8DiGCItUqqpYsZfPz3z8yXSaEEETsuKtGG0JVl3Rcec9t7xEBGOPwgx+P8cRcrnp1KTubr1RTsqL0DPX3fHxjPHSDWBL6Qm633A46EAISJSBSClJjm44MugRZgIAk0KhDAIk2GLH+CCEgCqTpEFsSbM1/IpmB4VhIcUS8G/t8rgMhv2OfIFJ3LltanM3m5lP+cOVRALIlFvogfNt6RNAe2qx1DQFgJBYGogimK5W/6nTJb7pdSrw7HNq2KdbnVAQh5HHkjs2WaOLybEkHazWgrstsigkWZEXyghARRNEvSqJCqNHczgAAuslAEISWZ1uAuYsa/eyNm30DEe/OLr97h0uRenTdyKTypdlMVb0ysu9B9YmfP44YX62/hmPhzoVR9uVoD2Favq+bd3x+bFl/yClNuB2OXpes9Pd2R3YKlATKqkYKpnFkY5gvXM5Wdbs7IAkUEBE27/ARWuCSIyT0MZRCVARXuK+L5BdTtv3ZcIYRAWHFmY0ootzd5wvGo97rY13BmyVR9Kq12uxirnQ+WVTHnjg6Vdk2GF0zsuiUY9sErZ3a3Q6boa+7IQMRTGVrRcmRfSMU9G4LBv2b+vp7ttdMppiceUXdeKUiOCfzml8zS4sIlALjHHSGoKRqAG6H1+VQhjjHsCSgV9KLRKAEAQA0g61i5nOfjZPjL6fd/QHPSHfQva8vHNgd9LvjuUJ5cj5dOD1ztXBeywjl0YFI00kHaI1WJpOZjgHXBK19dVrCF1h9McfBELKV+enE0mm3y9nrcrs+NjK8cRch1KMZJs1X0hrRUokjcxl152AECSUAyEGO+CnUNK/b5dyECFGRUn8g4ITZxSpQRBBF2sKgTIl49IWUZ7DLd9/oUM9NPRH/JlkSfcVSOTF3NXtmPls5O5OulICjPcytS1c8DJOJOlj2CKYjoFm7yGL3nYJmBADkHDgAVESoJTLFs/65xd6uUGA4EPBvG926eWtVqwiarnsWhNJr+7f3XMjUzLyLI4qCAGhyQaQ07vN7NnGDhVGkXbOzBREA9HatLYrU0e1VQvGo997rRgbvH4p1jTCT4eJyZurC1Pzfv52qPLuYq5YAAO0Zj6Z02SQNocM6zT6wJVnthqE9YgAAKOUNrptGPuopnpiZu7rF5fb0bNs6PHjrwZv9AacrduLCpU2MFQlh/HWXgxSW8wz1muFUZGFHOBIe0Ao1mRn8FqdMnymqRAfefKYoCsQZ9cpbhrr9nx4d6j8wvCm+WQagY/OzF0+NzT63kC4/k8hrZUTkYFnWtvTQSDzcgmOnQgLRGs6yTgTqQbv1MIS6r7WWxAEAGDI1Ly8UrwBNvCjJdDgQCHRtHtnmu+GGg7FMIXcwW1LTGsNqzcTLIbeg6ox2i6JwR3d3T6CEWSJSEhAocQKiAQBACBG8iuAIuMWHtsXCt11/zfD+wVhfyKVIdGzq8tzZieRLVxZLhxdLWhEAmAVS3T1pLCmu+IWTycwq8DoDWsty1AG0SxglBExeDwZpuxQiQtnktUym8tbk7MLJrkh4U6S3z9s3tNF564Hr48VC6TPGlaWeomq+VtV4ghLmdXncW3t7+xWhNouyIo6ImhlyO0UfIKgywR1+t3Tt5l7/LXt3btmxa/u2KJgGO/P6xaWXzkz8TSJbfTxV1osAYLYsojUHUre0loqz9Jl9oTsCWouVxFbvvZmramJqpazrv+BQj09TVaPgzJWPvH0lsTfWe3kgEO3xbbzpE/K/9rkHfvTXhz89lsztkCV41SHSEb/bMRDs6QMt6yNeRdqWE7SbPRI9KlCy3SnR/YMRz0O3H9oXH926VUGmm0ePn0z/4tTEk8tF7X9lS3oJASypXFlAREBi5wys3d7x7O0ql2PNB7Q5bgQABErr0te4UjFQT1eM6fNTiWOmXvMvLy3uu+WOu4Kxu75Gfp9nnH/8o1/szlT0Ia9X8UaiQdET7QW33wM+tyJ7Kup3RYKXKSHdm3u8wYN7tyv7D91GqqU8/+U/vHz1718bfyxV1L5f1ngFAfRV/DX0GeO8yZ/1Sshq/dwR0NqjAGL7YGk6S2MgIFBSt7MyJaAx3mRqqagXGMOfnplZLiVSOcVJSh+7/5qbSOjB78Ef8hp+5yfHQoGgH3q7u0D2dYPLHYRA0E18lbLfKZPdd+7ZAIfu/jREtu0DXsriPz73tPbCibGns1UzXdZYBYDU7OFUHS8EAQDMNpViB+gD357N1zWeQGz/WtbKKdUzFCXNBADgRdUsIiGnKIWhZ4+N33TTdX8hRR/6Cwh96gfkPyp/AC9eWISuvj4grijI3gBEIyGoVkrwmVtGYfS3/jtQVx/Upl+Ep374P+GZo2/9JFU2XqnU+As6Q72Zp7NyaZyDQxKAWQmBlpoEWRXZdIpakpCWKFtZhvZs6koau5UVRAS/SwKREmubpA2TTxVrZvp7/+9XUD73QwAACN77Z3D3xw9Bb/8moIITFG8X9A72w9d/9y7Y8dWfAnXFQJ/9Ffz4z/4rPv3qW2O5snlY1fiJmm7q2FBRBACckgASaWFg1cLa6xGdppbYczJZrwwN94ewJ5khi7EwYiMPTwDgs4/8Djl68iRsOKaS5YMVKAZDpGs5DT6/yE1OyXyuKANyRQTiEESQJJFIxWoNfvb44/A7A3tAjOwG375HwbF8FIAQkKN9cMcDD4HUdycAAGiJV/Cvv/uf4dU3E7ymm2dqnL1Zz8EBQ0AQBAIeWQCDIdhLiRZw64HUaYkjAEC29Idwaj5rBQQkEPHRUECCkZADcFGjVZ9bkFRDJk5Rkik4QQK3QMHtUCSBUFrWNJ1RSryUQJQD3uYQYYsiizd4XGJXyCUTf9ALB67bAge+/EMAIq08nZcBqAcAAPSrR+Dwn/8xnHorybMl3cxVzD/JV83HVY1rFZ0tyZQwnSN4FRF0k4PJOJgc69uTcWCwYgjWmyhAvWL2viUNEXE4FoYt/SFel7YMIYTwge4hIZnIyQ5ZlOVaxUtkwYecRxjQmMRJUBQlLxCIypQE3T5nWJGlsNupdPscStjn97iDoaAQCASJP+AHp4OC20WhOnkYXCOfX3l6AzBWPAGvPfN/IFvRMOh1gIlIEeD3JZEEVB2fjnAExrACDNSoR2C+ogReswSJcAAlIuCFhTT+j099kX795/+Xr5ds6KikISKMxMJrijYCwLd2KGT8hatwMeinuk8UHVQQuEKdoAhuwSn3KhTvC/sdg0G3c2M46InHekPheF+3s6uni7qDvSCGY+CODoIrvAWI4FqHDQ6sOo3m/FuQTUzx5Nwcn5lbYLNzKS1dqixWy9pYSTUTQOAoQ1iQqZCRReBV1WAMsMw0puY5NzwSNWaoisWeJfb24frIw41EZHth+32D1u41t5togRIQKAGTcRAECiIAbFQlUgxRUXaBAgA+RSDdJsLDXpe81aPQXQGvc0Mk6BV6eiKkrzcK/YNx2HztdSDH7l+9NGYKuJZGVDPIq0UwM0u8kl82c6k0S2fz6sJSprScLS/lC9WFQqk6ny3XZlOl2rhh4JyJrIQGrxhVXjORmcUFlSXVMtsOwF8BgG8CwDOxUNNUrAXaowDw/d8AtBY/zb4iLTXIVVATmPOYWCoxQ1SpsWFLtHppbGmxJ+yc0NHw5ovswXxV/0pBVXcXSxUoFHJwzZYoyP13rzUYoFGAK6+fgZnxN8h8MslTqRTkckW9VFZTqsamqrrxtq6zhZrB84j4JkO4WkO+7GJc9XFkzouLrBcAXQ/eQv7dzBE80B/EJUJgGACefhcg/CaANUF7p2ztSu2xteQPhDa/W5hJcwIAyxm16pAF9Cj0NSrQHlkxt/oU3fXJg8MQ2v9lABARAAgrngXBtwe4+gZQZQSAKuglGZi6dIHNJlI8U6yqxap+XNXwsCiSlw0TC8iJphtc95mMK2hifCyFPwKEvsEosoEwIBBgZy7iT2KhFgFYNZcO0KpisX1we72x6YXbXrHxXVVn1hiUEKCCSGVZhOvjPpfzG7/9Cei97d+C6NuMXE9D4shfQnVxDgEAp488D1r6AhIxjMGd9+Ld+7aQYknFYkUrFsvGs+midiKZ1edD4UhuLlWuJHOqcbGgsSmT8Jc2dWFsQxfa+zrsAKHtr9PU4qetF4a0gNlgsKyzehaGcRAEAoQAUCCyUxY+4XUIozuHord99bf/FXTd8ghQyYPVq6fxwgtPwnIuD/v3XwtepuP09ASml5Zh68F7IDCwG2K3fQkempmljz1/SRApIRRQqqkGnh2bQ9rCA8B6uR4rZCdtM+gkeO8csK+RDTUZBxNao4QGmJJHEVwhnzx43abu3/vi5z8rhXYdglxiHBfeOs1fP3MaLs/OYSzWT9ViivPqFbI4v0yv1K5wLjjIbk8IXcFBuP5TX4XLV//U89K5xN2KLl6khiEzgxkat2U1bP10hBBAzgHWiDY/KLejpYS3KnPbiAQYR+C0tW2hCRYiIIIYkEWv3yX9mxuGY1955OEHQ9Gt15Kly1N48eSvzFeOnzIWs6Wa4hAl2eF0VEpFMPPzJJPJmcvZEmHsBEqyUxi5/lbw9O8kH7//0/LbiR9tKtXyw15JmGI+sZZJacxawKLKABHBLQsrGVuOLXytBqpzQdWahsCKQxuYNMBZw2AQAAJECHulQMjj+Mqhazb91gP33t8X3biZpJNJfvrYS9WXXj2dWM5XLugG/pPPhFtL5cq91UpJquVSNJ0t1TKFymypoqlq7YURraY7r731Ltp/7S3kntsnIqmnfnlgjuvJvGoclT1CVS8zXuepvphVnYEiCc1Afa1sxso10jFD0Nye7etggdXugqx8SQAQSNAp+UNu5at37hn5wj333DPgifaSqQvntAvnz+SPnht/bSlb+UXF4FdMhktUpEZZ1XerZbUvtzRPChVtoVgxv6E4IT09t/SQeOr4Fx1Ob/e26w/R0YMfdx6aTe57+cylCV6CgkjJm4VqtcR4Kzg1gzV7c9v5tPe12ROWHQFt/eJw/cOqQgshoKBAA17BFw26vnDHnuFP3nHrx/odXh8ZP3+68urR41fOzcw/ly1qs2WDP2UY3EAA7BOFsqYbD1eraji9vMRquvlaRWeXZ9NqtSfk+Bm9nNBc7mNfcnh8Pf3xQbjlzvt6OME7jp4Z165k1ExOIlXQkNlT8pZa4Y3tydvn0wCr8zUCG0hoB2mNSg4CgK77haEePTrU5X/wlj2jD+/evWMDCMDPnz6aeunouRPj85lfFCrmc+WaWdZNzhSRmggAJmBJ1cy5SlEdFeSsioAvUipcLddM7fJiNSUi/vj1ixO6QKSHrrluz8a+gQ2Oa67du6mYLe+tGLNpk0MxIaspuURZG3tNgFoao60MTYfTHC0ux7rlLrLyEqnoNDxgdm2MR+7aPbrxjq3DGzak05nipcnphaMXZl56O118U62x51Wd6aJADWsIxhG4znVQ6KWyauxn+UKKMTLdF3Jql5fKHBBhPm9c1YziY5S/uWBy9jlksMvviyh7b9i7U2fMODqWUFkZX7rjs9eXDx8+xjnHFkVvb/BrlkJtc+i4TlvPNDddIgIggkgHh0OhgR7fzTu2xG/riQTj+Xw+c+rCpbPHx+aez1TMI+WqWVYNbggCWZWn6fIpum4aSVWtLWtQTpqMp6myIuyFqs40naZFqfIPwtg0p0gym7ds2h70h4J7r9u1vVKpZk9OLaWfe+7UKQBSQ7CluLFeerTzv1YComOgrevIwooRuDXkFjDo6Y73BG4c6o/eHPR7w7licXp6dvHCq2/OvZZWzXPlqq5RQljrnQCySEEGgItzBXO437Vcq7FFSvVpUzMLR87N14u9Nq++OyAUZ5OZXwqE5pCbn9iwYWhPMBj27dm1dXexZuTYbC4jhuTJn56YNffHwmjp2fVaK5oZZ/IBuBwt0mX7fGNfRHA4pa7uXv81sd7wDpdLlrPF4sWpKwunzk4vvbFcNhKlmm4IhPIVK7XCulW1emDIQa8SpaQabIFU1GkCqDV70GyK58Rkmd0X3pAbX1o8LkgCQdPk8aH4rmA04tm/Y/M+wmfSk6lC5cA1vUnItNY/15Uo0mGXw2rNbOmsbjz5nniv5HCLoVCPd7PP7eg2mZGbT1UvzcynJifnMm9fLRvlqmZySkkjNW6LXQkBhyg0LVt2ogD+3T7R5PSKXlWnwhwMZ8PPIoRAvWGofvdz6cvIEYvM5CcNXS8ZulEajPXsDYXDvutGzRvl8StZkizU1G4xdXVZZQxxtVqBTrq07ZKGrbIBCPCt7TeQuVMnqSGJHne3N+bxKCHOWSabV8dnUsW58bnC8sSim4c9Wd40FGSlexERm2BZlmxzsUiSSLhhGvPlcm1Z7d3NjfTxusLmdo26Ms3HziXzX83xcyIHJJybXdHAiMPpcA/Gu3ZpHJenFnL6/Qk5/3RM42slHj6IoL3VTyMA42O3kx2jL+NrS9NC/8Y+p7PXE1ZckofpZjaVLyeuFivZ5ZJaffnNWXP7YATqfSCNurYtG2K1BtTLgfVr43vi3C1IVYNjDhmplGeOA7NZQMHWzGeZ8kMDYRx++0BtIXj2vCiLjBMsBt3OLT63K7ox3rVfIcRMSPk3Js9mywD1TO16KaGOGgL7ygjen8N/+PwXxN75Sw4j6PRLTiKzmrE0myqkF7Vq4We/mjYAALbFwyBQ0pKWaSGEunK3tQtseH0DmTuQU0UghVq+Zlys8qZ0WMOoRr0J2RoXAWBy8AhiGquiaVwEBlXWFch5FWmTW5H93T3B0YphZj+/d+vs2cXl6lpgdZpa/TQA+PPPfYFkUlfkkl9xOyUUUNcLb80sZwtc0P729DTfORQF3eTNsKWlWcZ2IILbpAUaVaJLd/WAo1iqMeB0bgHZKqfTCt0amYuWrUYIvJ6vVV2yPkHNbJVHfBWnIg5QIN6o3zcARrF8k+w0j+mqvtp16qxmazEEDyVHqZycFUAyJEFGxqmZe/X0svrs1LwBADA6EAFba3+rlBHSIh0rLQ1WUwNAz5Nb8OrNY7oDOHl7qAuEtwtN38qanP1QhdXEYj88djA0YJyaTiYFoQRBr9OQJLHb6xC7eMirLurcOCT3Z1+ZmW72e9TXpbMyRxsiAgAAsUdEsuTjok6AjSWXKv/pideLFmDWQdq6Ul+5p3VFV7qK2okAwN/2/wAZVwwiKxqbTzGzcSbAOhvAsR45aCZvnINq03GI8J3x0+ibekCfm6gmF/Llc5WqNmmYvCxR8AQDzjCrFZy3ys5VGelOwtY8sfKtHfvpTIYKC1WVT1WWtSdOzKkAAKODUWgej2mTrPXONaydmgGYnM+SAlJT0Q1jamYGW9og2u6zW/Rmxrjx/L+L/yWeraW16pnFpVyxOqYzTCIQ1SEIvqBL7hL9Hu9dZRTqJ4mzxH5OomOgTc1nyd9lzpNnhJdZ1lfSN56cNbcPRevS1dah8+sOgFgBcosWsUnfzCwAjUYYNBourN+um11dK6XTOFT0ioPr4rmrmXy5luQ1luacqJIkOkjA6WIjvcpkMmN1D3R0f1p+GoLVigkAWwciK+fPbQBYXnt74WVVjGdrPQVoNNw13k8n3fy+v/oV/In1M4Q1w57249trhUGICJjOMkj40rX+kEYEdAnAZaciKDkmO788vBkf7tlc+xuYxsn5LNnS35kTLMQuOdviYeDQKClZxWFKwWQcKKmfj6JQP/hf/1w/vqMaDCitn4USKAGdYUu+y5rqZGPFLebXah+wSBHrhzUst2VFHTT0HOfN7zgA7C6bQu+1MYdblBwoUEeZyBwy5XLAI2rXp7eZ38j9kiO0dny/V6IA9eM71vHqpqPaLjaN902LaVPS9rCp/R67Vz4cC+FwLNxau4F1dKBdslb5gthyLwGA826Rzf/TZA10UwXVKAmVsip7/bRUFOTxrVfJ2NjthAAAKz3yvrdqy8niptK1VXsshlvza6urVO3WdEWftdYbAHGV4l8rRd2yAI2/FReHrKnrDoPJZ7JMDwfdNbEm6B5BZ654GCrTHvHHD5fhtkSGCN4n3/cWbR4PaekktLKe7WtrbRHLiW1KAsBaaZdm9te+CACrx4XV29P+HOvZqxeo9a5tAxF84s1xlnrmpDEYLurLi5oRzRaYFPQT56JTCHzu3o4YBPIBHIf8Z0E5QsgPYSPNXisI/ecjyG/ezDP7bkD9uz+Fb+NR/n7Gpu/n5n/OFETEb+IMe96QzepXimhMTOHByFQLYI++V5/X8r0+DH8AAGFAwkqfga/ZfOffdJx/sduznWxxMrGSnl9DgB+8h+Lehwa0VRNvoPhezrj/i9Vp69FaYK2bE1yHPnSgWWA1UvB24N41ch860ACaAK3qzXq3wH0oQQNo3Z7YIIB3B9yHErRfp/xJgxrvV3//YbOe7+Z/hfl1v/nQgfZu6Z2A+1Buz7WIrE5wfiRpnaSPJK2N3o3X8RFobbTeziPtwetH1EpknfKkBdxHkmYjW1y65vdNB/gjSfvN6SNJa6OPwqj3QIiIvw64/w8Oy5ht26WuQwAAAABJRU5ErkJggg==" /></defs>    </svg>

css svg

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Это изображение SVG, с разной шириной строки и многочисленными градиентами, анимировать не просто. Но есть технический прием - Handwriting, который позволит реализовать анимацию.

Суть его заключается в следующем:

#1. По середине широкой строки изображения проводится в векторном редакторе осевая линия, повторяющая изгибы наружного контура:

#2. После сохранения файла в векторном редакторе получаем path этой осевой линии и назначаем максимальную ширину строки, в нашем случае: stroke-width="55",которая гарантировано перекрывает исходное изображение.

#3. Далее будет использована маска и анимация этой широкой строки, входящей в состав маски.
Маска при движении вдоль осевой линии, будет прорезать черный слой и показывать изображение, которое расположено под ней. Таким образом будет реализована анимация появление исходного изображения с разной шириной строки.

Откройте сниппет на полный экран и щёлкните для начала анимации:

<svg id="svg1" width="1077" height="655" viewBox="0 0 2155 1310" fill="none"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                    <!-- Фон -->
                            <rect width="100%" height="100%" fill="dodgerblue" />
                            <g id=all-gr" mask="url(#msk)">
                               <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M707.543 1056.11C711.672 1055.9 716 1055.69 720.549 1055.47C720.549 1055.47 694.281 1062.6 657.739 1057.43C671.117 1057.9 686.815 1057.13 707.543 1056.11ZM657.739 1057.43C634.781 1056.63 618.655 1052.17 595.661 1039.02C595.352 1038.87 595.042 1038.71 594.732 1038.55C591.2 1036.75 587.581 1034.91 584.06 1032.9C568.345 1051.21 538.041 1073.99 526.265 1081.97C514.489 1089.95 493.989 1098.62 459.859 1106.97C299.309 1146.27 0 1131.37 0 1131.37L24.3092 1111.66C24.3092 1111.66 330.992 1121.38 435.709 1089.55C467.09 1080 488.78 1070.3 506.023 1060.68C523.267 1051.07 542.722 1032.45 556.841 1015.96C548.499 1009.98 540.877 1003.56 534.795 996.706C518.846 978.983 506.353 947.887 531.508 930.993C546.373 920.982 560.979 923.281 574.223 929.387L575.088 929.9C582.248 933.323 588.989 937.821 595.15 941.931C596.36 942.738 597.547 943.531 598.712 944.297C622.744 960.401 609.601 994.545 598.167 1013.61C594.723 1019.3 590.698 1024.86 586.273 1030.22C586.273 1030.22 610.293 1045.33 628.933 1051.04C639.003 1054.12 648.686 1056.15 657.739 1057.43ZM559.891 1011.24C560.013 1011.4 560.137 1011.56 560.261 1011.72C564.154 1006.96 567.738 1001.99 570.985 996.959C580.143 982.798 590.086 957.85 582.603 940.375C561.045 939.905 543.059 958.633 544.581 975.071C545.74 986.9 550.6 998.283 557.96 1008.65C558.55 1009.51 559.206 1010.36 559.891 1011.24Z"
                                    fill="url(#paint0_linear_426_3748)" />
                                <path
                                    d="M1765.22 1022.56C1784.23 1045.25 1858.81 1080.17 1936.13 1043.15C1971.5 1026.22 2001.12 983.526 2022.03 944.639C2046.91 905.143 2055.79 868.874 2055.79 868.874C2055.79 868.874 2043.48 904.757 2022.03 944.639C1995.86 986.19 1951.97 1031.31 1882.08 1041.53C1852.3 1045.89 1806.55 1022.1 1792.44 1005.61C1788.54 1000.86 1781.54 991.64 1778.29 986.611C1769.13 972.45 1759.19 947.502 1766.67 930.027L1773.13 919.951C1765.97 923.374 1760.29 927.473 1754.13 931.583C1752.92 932.391 1751.73 933.183 1750.56 933.949C1726.53 950.053 1739.67 984.197 1751.11 1003.26C1754.55 1008.95 1758.58 1014.51 1763 1019.87C1763 1019.87 1764.34 1021.52 1765.22 1022.56Z"
                                    fill="url(#paint1_linear_426_3748)" />
                                <path
                                    d="M910.295 887.395C962.15 920.49 1107.94 1008.28 1166.96 1032.55C1225.97 1056.83 1294.39 1090.73 1505.34 1091.09C1682.45 1091.39 1740.77 1061.8 1796.94 1018.06C1827 994.654 1836.87 966.101 1827.39 939.61C1812.68 898.49 1768.12 922.379 1768.12 922.379L1761.89 932.057C1761.89 932.057 1783.3 933.756 1792.17 947.195C1806.86 969.455 1779.24 1001.24 1779.24 1001.24C1779.24 1001.24 1696.48 1077.29 1505.34 1072.42C1321.45 1067.73 1262.47 1051.02 1188.05 1024.56C1113.64 998.1 951.632 904.887 885.88 862.501C855.467 842.917 826.095 821.851 799.027 798.342C792.41 792.572 785.75 786.622 779.351 780.515C778.05 779.203 776.676 778.004 775.375 776.693C775.217 776.444 770.611 771.629 769.268 770.137C759.203 758.993 749.357 747.513 740.126 735.698C673.647 650.956 612.026 537.482 628.113 426.478C645.634 305.529 771.88 232.846 891.212 227.434C954.952 224.532 1027.26 241.748 1082.85 273.064C1094.5 282.779 1101.59 295.97 1101.59 295.97C1107.23 310.246 1112.73 329.481 1111.98 344.878C1110.86 366.264 1090 388.195 1068.69 384.93L1075.66 398.91C1087.82 408.419 1102.72 413.954 1119.07 402.878C1146.74 384.195 1138.48 344.545 1125.5 319.722C1125.5 319.722 1114.36 295.786 1108.43 289.421C1100.54 280.949 1085.26 269.72 1085.26 269.72C1081.81 266.44 1076.65 262.519 1073.16 259.532C1047.43 237.896 1015.7 223.666 982.775 214.946C914.933 197.026 845.53 198.216 778.305 220.49C720.651 239.562 664.071 271.226 631.997 323.101C572.834 418.925 609.635 538.71 660.314 628.023C719.269 731.848 808.128 822.27 910.295 887.395Z"
                                    fill="url(#paint2_linear_426_3748)" />
                                <path
                                    d="M853.268 1030.24C984.872 1004.34 1164.55 960.175 1307.52 829.004C1474.53 675.776 1560.13 562.379 1576.12 429.017C1582.8 373.399 1571.26 317.973 1543.41 269.617C1536.23 257.223 1527.91 245.477 1518.64 234.335C1521.34 237.895 1515.9 232.944 1509.84 227.421L1509.84 227.421C1505.59 223.549 1501.03 219.397 1498.74 217.698C1491.07 212.08 1482.86 207.158 1474.53 202.551C1443.04 185.122 1407.05 176.455 1370.73 174.431C1297.5 170.335 1224.44 197.407 1165.28 238.816C1106.12 280.225 1089.41 313.447 1089.41 313.447C1078.05 330.581 1064.18 361.532 1068.8 384.995L1075.77 398.977C1069.21 393.68 1063.25 387.05 1057.8 380.99L1057.67 380.852C1056.64 379.707 1055.63 378.583 1054.64 377.493C1033.37 353.756 1069.99 261.537 1148.61 208.861C1224.3 158.145 1296.02 140.805 1375.01 152.493C1450.1 163.668 1516.3 212.278 1559.36 269.617C1596.88 319.411 1610.6 361.335 1610.6 424.788C1610.6 519.431 1543.52 643.263 1437.32 756.734C1378.1 820.009 1314.45 883.055 1231.49 929.319C1176.35 960.07 1136.75 985.85 1063.78 1005.17C840.394 1064.32 702.996 1058.54 702.996 1058.54C702.996 1058.54 679.094 1059.19 666.248 1058.54C655.001 1057.97 641.509 1056.14 641.509 1056.14L637.212 1054.63C637.212 1054.63 757.447 1049.16 853.268 1030.24Z"
                                    fill="url(#paint3_linear_426_3748)" />
                                
                                <g clip-path="url(#clip0_426_3748)">
                                    <g filter="url(#filter1_f_426_3748)">
                                        <path d="1M1496 211H1594V310H1496V211Z" fill="url(#pattern0)" />
                                    </g>
                                    <path d="M1495 213H1593V312H1495V213Z" fill="url(#pattern1)" />
                                </g>
                                </g>
                                <defs>
                                    <filter id="filter0_f_426_3748" x="1461.8" y="192.26" width="136.988"
                                        height="116.504" filterUnits="userSpaceOnUse"
                                        color-interpolation-filters="sRGB">
                                        <feFlood flood-opacity="0" result="BackgroundImageFix" />
                                        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix"
                                            result="shape" />
                                        <feGaussianBlur stdDeviation="5.12105"
                                            result="effect1_foregroundBlur_426_3748" />
                                    </filter>
                                    <filter id="filter1_f_426_3748" x="1480" y="195" width="130" height="131"
                                        filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                        <feFlood flood-opacity="0" result="BackgroundImageFix" />
                                        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix"
                                            result="shape" />
                                        <feGaussianBlur stdDeviation="8" result="effect1_foregroundBlur_426_3748" />
                                    </filter>
                                    <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
                                        <use xlink:href="#image0_426_3748" transform="scale(0.012987 0.0128205)" />
                                    </pattern>
                                    <pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
                                        <use xlink:href="#image1_426_3748" transform="scale(0.012987 0.0128205)" />
                                    </pattern>
                                    <linearGradient id="paint0_linear_426_3748" x1="-463.625" y1="1060.09" x2="506.473"
                                        y2="616.75" gradientUnits="userSpaceOnUse">
                                        <stop offset="0.585458" stop-color="#FCE1A2" />
                                        <stop offset="0.708489" stop-color="#FAD788" />
                                        <stop offset="0.782794" stop-color="#FAD486" />
                                        <stop offset="0.864145" stop-color="#DE9142" />
                                        <stop offset="0.886666" stop-color="#EFB259" />
                                        <stop offset="0.911288" stop-color="#FFF9C5" />
                                        <stop offset="0.954736" stop-color="#F7C777" />
                                    </linearGradient>
                                    <linearGradient id="paint1_linear_426_3748" x1="1672.87" y1="930.81" x2="2054.48"
                                        y2="1065.22" gradientUnits="userSpaceOnUse">
                                        <stop stop-color="#FBD994" />
                                        <stop offset="0.0975583" stop-color="#F4CD6F" />
                                        <stop offset="0.18999" stop-color="#F1C66E" />
                                        <stop offset="0.313302" stop-color="#F7ED97" />
                                        <stop offset="0.4153" stop-color="#F4CC76" />
                                        <stop offset="0.551347" stop-color="#AD8D4D" />
                                        <stop offset="0.638845" stop-color="#A36A30" />
                                        <stop offset="0.779765" stop-color="#F8E5A1" />
                                        <stop offset="0.906358" stop-color="#FAD087" />
                                        <stop offset="1" stop-color="#FCE0A0" />
                                    </linearGradient>
                                    <linearGradient id="paint2_linear_426_3748" x1="555.341" y1="545.858" x2="1855.89"
                                        y2="537.465" gradientUnits="userSpaceOnUse">
                                        <stop stop-color="#FEF6BD" />
                                        <stop offset="0.0743805" stop-color="#F4C872" />
                                        <stop offset="0.18633" stop-color="#ECD180" />
                                        <stop offset="0.276608" stop-color="#E1D78B" />
                                        <stop offset="0.317988" stop-color="#A0672E" />
                                        <stop offset="0.36739" stop-color="#9C7B41" />
                                        <stop offset="0.430421" stop-color="#4C3C22" />
                                        <stop offset="0.535767" stop-color="#9A7E46" />
                                        <stop offset="0.610728" stop-color="#FEEFB7" />
                                        <stop offset="0.673759" stop-color="#FAD587" />
                                        <stop offset="0.715368" stop-color="#EFB65C" />
                                        <stop offset="0.770927" stop-color="#FADA8B" />
                                        <stop offset="0.854866" stop-color="#FADB8C" />
                                        <stop offset="0.963519" stop-color="#DE9242" />
                                        <stop offset="0.975212" stop-color="#EAAC55" />
                                        <stop offset="1" stop-color="#F5C779" />
                                    </linearGradient>
                                    <linearGradient id="paint3_linear_426_3748" x1="1806.69" y1="444.84" x2="559.857"
                                        y2="725.623" gradientUnits="userSpaceOnUse">
                                        <stop stop-color="#FBD994" />
                                        <stop offset="0.0975583" stop-color="#F4CD6F" />
                                        <stop offset="0.18999" stop-color="#F1C66E" />
                                        <stop offset="0.313302" stop-color="#F7ED97" />
                                        <stop offset="0.4153" stop-color="#F4CC76" />
                                        <stop offset="0.551347" stop-color="#AD8D4D" />
                                        <stop offset="0.638845" stop-color="#A36A30" />
                                        <stop offset="0.779765" stop-color="#F8E5A1" />
                                        <stop offset="0.906358" stop-color="#FAD087" />
                                        <stop offset="1" stop-color="#FCE0A0" />
                                    </linearGradient>
                                    <clipPath id="clip0_426_3748">
                                        <rect width="99" height="100" fill="white" transform="translate(1496 211)" />
                                    </clipPath>
                                    
                                  

                               
                              <mask id="msk">
                                 <rect width="100%" height="100%" fill="white" />
                                <path fill="white" stroke-dasharray="5867" stroke-dashoffset="0" stroke-width="55" stroke="black" d="M2049.8 892s-40.5 91-78.5 119.9c-32.3 24.5-75.5 41.6-115.9 37.3-37.6-4-80.5-23.5-98.1-57-9.4-17.8-9.4-45.7 4.6-60.1 10.4-10.7 32.4-13.5 44.5-4.7 15.6 11.5 24.3 42.2 11.7 57-56.8 66.8-196.3 92.7-231.6 95.2-84.6 5.9-172.7 7.6-257.3-6.9-69.1-11.8-135.5-37.8-200.2-64.8-42.2-17.5 20.7 27-118.8-64.8C939.8 897 872.9 861.8 805 807.7 741.5 757 694.4 685.8 657.7 613.3c-24.9-49.4-48.8-103.8-47-159 1.6-53.7 19.2-111.2 54.9-151.2 40.9-46 104.4-71.6 165-82.5 68.3-12.3 144.3-7.2 207 22.6a164 164 0 0 1 77.6 76.6c8.3 18.1 13.5 42.3 4 59.8a31 31 0 0 1-27.7 15.5c-16.1-1.6-36.3-15-37.1-31.2-4.3-79.7 94-138.2 165.9-172.8 61.9-29.7 138-41.1 205.2-18.6 92.4 31 176 134.8 172.7 232.7-4.8 140-104.6 268.3-202.2 369a935.3 935.3 0 0 1-255.2 184.6c-67.2 33.6-142 50-215 66.8a1199.5 1199.5 0 0 1-154.2 23.6c-44.6 4.3-91 16.5-134.4 5.4-35.5-9-74.3-25.8-94.3-56.5-18-27.6-17.7-59.3 3-70.7 18.4-10.2 54.9 10.3 55 31.4 0 21.4-2.4 30.5-10 43.2-18.6 32-47.8 53.7-82.4 74.7-28.4 17.1-89.1 30.4-142.3 35.3-50.7 4.6-101.3 10.2-152.2 11.8-68.4 2-205.4-3.3-205.4-3.3">
                                       <animate attributeName="stroke-dashoffset" begin="svg1.click" dur="6s" values="0;5867" fill="freeze" restart="whenNotActive" />
                                </path>
                                </mask>
                             </defs>    
                            </svg>

Answer 2

▲ 1

Из-за ограничения сниппета 30.000, публикуется второй вариант в дополнительном ответе:

Вариант рисования и стирания изображения через паузу:

<svg id="svg1" width="1077" height="655" viewBox="0 0 2155 1310" fill="none"
                                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                       <!-- Фон -->
                            <rect width="100%" height="100%" fill="dodgerblue" />   
                               <g id=all-gr" mask="url(#msk)">
                               <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M707.543 1056.11C711.672 1055.9 716 1055.69 720.549 1055.47C720.549 1055.47 694.281 1062.6 657.739 1057.43C671.117 1057.9 686.815 1057.13 707.543 1056.11ZM657.739 1057.43C634.781 1056.63 618.655 1052.17 595.661 1039.02C595.352 1038.87 595.042 1038.71 594.732 1038.55C591.2 1036.75 587.581 1034.91 584.06 1032.9C568.345 1051.21 538.041 1073.99 526.265 1081.97C514.489 1089.95 493.989 1098.62 459.859 1106.97C299.309 1146.27 0 1131.37 0 1131.37L24.3092 1111.66C24.3092 1111.66 330.992 1121.38 435.709 1089.55C467.09 1080 488.78 1070.3 506.023 1060.68C523.267 1051.07 542.722 1032.45 556.841 1015.96C548.499 1009.98 540.877 1003.56 534.795 996.706C518.846 978.983 506.353 947.887 531.508 930.993C546.373 920.982 560.979 923.281 574.223 929.387L575.088 929.9C582.248 933.323 588.989 937.821 595.15 941.931C596.36 942.738 597.547 943.531 598.712 944.297C622.744 960.401 609.601 994.545 598.167 1013.61C594.723 1019.3 590.698 1024.86 586.273 1030.22C586.273 1030.22 610.293 1045.33 628.933 1051.04C639.003 1054.12 648.686 1056.15 657.739 1057.43ZM559.891 1011.24C560.013 1011.4 560.137 1011.56 560.261 1011.72C564.154 1006.96 567.738 1001.99 570.985 996.959C580.143 982.798 590.086 957.85 582.603 940.375C561.045 939.905 543.059 958.633 544.581 975.071C545.74 986.9 550.6 998.283 557.96 1008.65C558.55 1009.51 559.206 1010.36 559.891 1011.24Z"
                                    fill="url(#paint0_linear_426_3748)" />
                                <path
                                    d="M1765.22 1022.56C1784.23 1045.25 1858.81 1080.17 1936.13 1043.15C1971.5 1026.22 2001.12 983.526 2022.03 944.639C2046.91 905.143 2055.79 868.874 2055.79 868.874C2055.79 868.874 2043.48 904.757 2022.03 944.639C1995.86 986.19 1951.97 1031.31 1882.08 1041.53C1852.3 1045.89 1806.55 1022.1 1792.44 1005.61C1788.54 1000.86 1781.54 991.64 1778.29 986.611C1769.13 972.45 1759.19 947.502 1766.67 930.027L1773.13 919.951C1765.97 923.374 1760.29 927.473 1754.13 931.583C1752.92 932.391 1751.73 933.183 1750.56 933.949C1726.53 950.053 1739.67 984.197 1751.11 1003.26C1754.55 1008.95 1758.58 1014.51 1763 1019.87C1763 1019.87 1764.34 1021.52 1765.22 1022.56Z"
                                    fill="url(#paint1_linear_426_3748)" />
                                <path
                                    d="M910.295 887.395C962.15 920.49 1107.94 1008.28 1166.96 1032.55C1225.97 1056.83 1294.39 1090.73 1505.34 1091.09C1682.45 1091.39 1740.77 1061.8 1796.94 1018.06C1827 994.654 1836.87 966.101 1827.39 939.61C1812.68 898.49 1768.12 922.379 1768.12 922.379L1761.89 932.057C1761.89 932.057 1783.3 933.756 1792.17 947.195C1806.86 969.455 1779.24 1001.24 1779.24 1001.24C1779.24 1001.24 1696.48 1077.29 1505.34 1072.42C1321.45 1067.73 1262.47 1051.02 1188.05 1024.56C1113.64 998.1 951.632 904.887 885.88 862.501C855.467 842.917 826.095 821.851 799.027 798.342C792.41 792.572 785.75 786.622 779.351 780.515C778.05 779.203 776.676 778.004 775.375 776.693C775.217 776.444 770.611 771.629 769.268 770.137C759.203 758.993 749.357 747.513 740.126 735.698C673.647 650.956 612.026 537.482 628.113 426.478C645.634 305.529 771.88 232.846 891.212 227.434C954.952 224.532 1027.26 241.748 1082.85 273.064C1094.5 282.779 1101.59 295.97 1101.59 295.97C1107.23 310.246 1112.73 329.481 1111.98 344.878C1110.86 366.264 1090 388.195 1068.69 384.93L1075.66 398.91C1087.82 408.419 1102.72 413.954 1119.07 402.878C1146.74 384.195 1138.48 344.545 1125.5 319.722C1125.5 319.722 1114.36 295.786 1108.43 289.421C1100.54 280.949 1085.26 269.72 1085.26 269.72C1081.81 266.44 1076.65 262.519 1073.16 259.532C1047.43 237.896 1015.7 223.666 982.775 214.946C914.933 197.026 845.53 198.216 778.305 220.49C720.651 239.562 664.071 271.226 631.997 323.101C572.834 418.925 609.635 538.71 660.314 628.023C719.269 731.848 808.128 822.27 910.295 887.395Z"
                                    fill="url(#paint2_linear_426_3748)" />
                                <path
                                    d="M853.268 1030.24C984.872 1004.34 1164.55 960.175 1307.52 829.004C1474.53 675.776 1560.13 562.379 1576.12 429.017C1582.8 373.399 1571.26 317.973 1543.41 269.617C1536.23 257.223 1527.91 245.477 1518.64 234.335C1521.34 237.895 1515.9 232.944 1509.84 227.421L1509.84 227.421C1505.59 223.549 1501.03 219.397 1498.74 217.698C1491.07 212.08 1482.86 207.158 1474.53 202.551C1443.04 185.122 1407.05 176.455 1370.73 174.431C1297.5 170.335 1224.44 197.407 1165.28 238.816C1106.12 280.225 1089.41 313.447 1089.41 313.447C1078.05 330.581 1064.18 361.532 1068.8 384.995L1075.77 398.977C1069.21 393.68 1063.25 387.05 1057.8 380.99L1057.67 380.852C1056.64 379.707 1055.63 378.583 1054.64 377.493C1033.37 353.756 1069.99 261.537 1148.61 208.861C1224.3 158.145 1296.02 140.805 1375.01 152.493C1450.1 163.668 1516.3 212.278 1559.36 269.617C1596.88 319.411 1610.6 361.335 1610.6 424.788C1610.6 519.431 1543.52 643.263 1437.32 756.734C1378.1 820.009 1314.45 883.055 1231.49 929.319C1176.35 960.07 1136.75 985.85 1063.78 1005.17C840.394 1064.32 702.996 1058.54 702.996 1058.54C702.996 1058.54 679.094 1059.19 666.248 1058.54C655.001 1057.97 641.509 1056.14 641.509 1056.14L637.212 1054.63C637.212 1054.63 757.447 1049.16 853.268 1030.24Z"
                                    fill="url(#paint3_linear_426_3748)" />
                                
                                <g clip-path="url(#clip0_426_3748)">
                                    <g filter="url(#filter1_f_426_3748)">
                                        <path d="1M1496 211H1594V310H1496V211Z" fill="url(#pattern0)" />
                                    </g>
                                    <path d="M1495 213H1593V312H1495V213Z" fill="url(#pattern1)" />
                                </g>
                                </g>
                                <defs>
                                    <filter id="filter0_f_426_3748" x="1461.8" y="192.26" width="136.988"
                                        height="116.504" filterUnits="userSpaceOnUse"
                                        color-interpolation-filters="sRGB">
                                        <feFlood flood-opacity="0" result="BackgroundImageFix" />
                                        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix"
                                            result="shape" />
                                        <feGaussianBlur stdDeviation="5.12105"
                                            result="effect1_foregroundBlur_426_3748" />
                                    </filter>
                                    <filter id="filter1_f_426_3748" x="1480" y="195" width="130" height="131"
                                        filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                        <feFlood flood-opacity="0" result="BackgroundImageFix" />
                                        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix"
                                            result="shape" />
                                        <feGaussianBlur stdDeviation="8" result="effect1_foregroundBlur_426_3748" />
                                    </filter>
                                    <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
                                        <use xlink:href="#image0_426_3748" transform="scale(0.012987 0.0128205)" />
                                    </pattern>
                                    <pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
                                        <use xlink:href="#image1_426_3748" transform="scale(0.012987 0.0128205)" />
                                    </pattern>
                                    <linearGradient id="paint0_linear_426_3748" x1="-463.625" y1="1060.09" x2="506.473"
                                        y2="616.75" gradientUnits="userSpaceOnUse">
                                        <stop offset="0.585458" stop-color="#FCE1A2" />
                                        <stop offset="0.708489" stop-color="#FAD788" />
                                        <stop offset="0.782794" stop-color="#FAD486" />
                                        <stop offset="0.864145" stop-color="#DE9142" />
                                        <stop offset="0.886666" stop-color="#EFB259" />
                                        <stop offset="0.911288" stop-color="#FFF9C5" />
                                        <stop offset="0.954736" stop-color="#F7C777" />
                                    </linearGradient>
                                    <linearGradient id="paint1_linear_426_3748" x1="1672.87" y1="930.81" x2="2054.48"
                                        y2="1065.22" gradientUnits="userSpaceOnUse">
                                        <stop stop-color="#FBD994" />
                                        <stop offset="0.0975583" stop-color="#F4CD6F" />
                                        <stop offset="0.18999" stop-color="#F1C66E" />
                                        <stop offset="0.313302" stop-color="#F7ED97" />
                                        <stop offset="0.4153" stop-color="#F4CC76" />
                                        <stop offset="0.551347" stop-color="#AD8D4D" />
                                        <stop offset="0.638845" stop-color="#A36A30" />
                                        <stop offset="0.779765" stop-color="#F8E5A1" />
                                        <stop offset="0.906358" stop-color="#FAD087" />
                                        <stop offset="1" stop-color="#FCE0A0" />
                                    </linearGradient>
                                    <linearGradient id="paint2_linear_426_3748" x1="555.341" y1="545.858" x2="1855.89"
                                        y2="537.465" gradientUnits="userSpaceOnUse">
                                        <stop stop-color="#FEF6BD" />
                                        <stop offset="0.0743805" stop-color="#F4C872" />
                                        <stop offset="0.18633" stop-color="#ECD180" />
                                        <stop offset="0.276608" stop-color="#E1D78B" />
                                        <stop offset="0.317988" stop-color="#A0672E" />
                                        <stop offset="0.36739" stop-color="#9C7B41" />
                                        <stop offset="0.430421" stop-color="#4C3C22" />
                                        <stop offset="0.535767" stop-color="#9A7E46" />
                                        <stop offset="0.610728" stop-color="#FEEFB7" />
                                        <stop offset="0.673759" stop-color="#FAD587" />
                                        <stop offset="0.715368" stop-color="#EFB65C" />
                                        <stop offset="0.770927" stop-color="#FADA8B" />
                                        <stop offset="0.854866" stop-color="#FADB8C" />
                                        <stop offset="0.963519" stop-color="#DE9242" />
                                        <stop offset="0.975212" stop-color="#EAAC55" />
                                        <stop offset="1" stop-color="#F5C779" />
                                    </linearGradient>
                                    <linearGradient id="paint3_linear_426_3748" x1="1806.69" y1="444.84" x2="559.857"
                                        y2="725.623" gradientUnits="userSpaceOnUse">
                                        <stop stop-color="#FBD994" />
                                        <stop offset="0.0975583" stop-color="#F4CD6F" />
                                        <stop offset="0.18999" stop-color="#F1C66E" />
                                        <stop offset="0.313302" stop-color="#F7ED97" />
                                        <stop offset="0.4153" stop-color="#F4CC76" />
                                        <stop offset="0.551347" stop-color="#AD8D4D" />
                                        <stop offset="0.638845" stop-color="#A36A30" />
                                        <stop offset="0.779765" stop-color="#F8E5A1" />
                                        <stop offset="0.906358" stop-color="#FAD087" />
                                        <stop offset="1" stop-color="#FCE0A0" />
                                    </linearGradient>
                                    <clipPath id="clip0_426_3748">
                                        <rect width="99" height="100" fill="white" transform="translate(1496 211)" />
                                    </clipPath>
                                    
                                  

                               
                              <mask id="msk">
                                 <rect width="100%" height="100%" fill="white" />
                                <path fill="white" stroke-dasharray="5867" stroke-dashoffset="0" stroke-width="55" stroke="black" stroke-linecap="round" d="M2049.8 892s-40.5 91-78.5 119.9c-32.3 24.5-75.5 41.6-115.9 37.3-37.6-4-80.5-23.5-98.1-57-9.4-17.8-9.4-45.7 4.6-60.1 10.4-10.7 32.4-13.5 44.5-4.7 15.6 11.5 24.3 42.2 11.7 57-56.8 66.8-196.3 92.7-231.6 95.2-84.6 5.9-172.7 7.6-257.3-6.9-69.1-11.8-135.5-37.8-200.2-64.8-42.2-17.5 20.7 27-118.8-64.8C939.8 897 872.9 861.8 805 807.7 741.5 757 694.4 685.8 657.7 613.3c-24.9-49.4-48.8-103.8-47-159 1.6-53.7 19.2-111.2 54.9-151.2 40.9-46 104.4-71.6 165-82.5 68.3-12.3 144.3-7.2 207 22.6a164 164 0 0 1 77.6 76.6c8.3 18.1 13.5 42.3 4 59.8a31 31 0 0 1-27.7 15.5c-16.1-1.6-36.3-15-37.1-31.2-4.3-79.7 94-138.2 165.9-172.8 61.9-29.7 138-41.1 205.2-18.6 92.4 31 176 134.8 172.7 232.7-4.8 140-104.6 268.3-202.2 369a935.3 935.3 0 0 1-255.2 184.6c-67.2 33.6-142 50-215 66.8a1199.5 1199.5 0 0 1-154.2 23.6c-44.6 4.3-91 16.5-134.4 5.4-35.5-9-74.3-25.8-94.3-56.5-18-27.6-17.7-59.3 3-70.7 18.4-10.2 54.9 10.3 55 31.4 0 21.4-2.4 30.5-10 43.2-18.6 32-47.8 53.7-82.4 74.7-28.4 17.1-89.1 30.4-142.3 35.3-50.7 4.6-101.3 10.2-152.2 11.8-68.4 2-205.4-3.3-205.4-3.3">
                                       <animate attributeName="stroke-dashoffset" begin="svg1.click" dur="10s" values="0;5867;5867;0" fill="freeze" restart="whenNotActive" repeatCount="indefinite" />
                                </path>
                                </mask>
                             </defs>    
                            </svg>

Answer 3

▲ 0

Можно реализовать такой функционал с помощью clip-path.

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

В дефолтном состоянии для svg стоит прописать следующие стили:

clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); // делаем область невидимой
transition: 1s;

И уже для активного состоянии следующие стили:

clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); // делаем область видимой

Как плавно отрисовать svg с разной шириной строки

Ответы