Home > Blockchain >  How to fade out an SVG (bottom opacity 0, top opacity 1) using linear gradient mask?
How to fade out an SVG (bottom opacity 0, top opacity 1) using linear gradient mask?

Time：12-21

I have an SVG like this:

<svg width="1848" height="862" viewBox="0 0 1848 862" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="clip0_529_2072">
      <rect width="1848" height="862" fill="white" />
    </clipPath>
    <linearGradient id="fadeGrad" x2="0%" y2="100%">
      <stop offset="0.5" stop-color="white" stop-opacity="0" />
      <stop offset="1" stop-color="white" stop-opacity="1" />
    </linearGradient>
    <mask id="fade" maskContentUnits="objectBoundingBox">
      <rect width="1848" height="862" fill="url(#fadeGrad)" />
    </mask>
  </defs>
  <g clip-path="url(#clip0_529_2072)" mask="url(#fade)">
    <g opacity="0.15">
      <rect x="407.504" y="361.524" width="23.9244" height="23.9244" rx="1.32913" fill="#C4C4C4" />
      <path d="M487.43 363.518C487.942 362.632 489.221 362.632 489.732 363.518L501.243 383.455C501.754 384.341 501.115 385.449 500.092 385.449H477.07C476.047 385.449 475.408 384.341 475.919 383.455L487.43 363.518Z" fill="#C4C4C4" />
      <rect opacity="0.72" x="112.436" y="25.2535" width="28.47" height="28.47" rx="1.32913" transform="rotate(-14 112.436 25.2535)" fill="#C4C4C4" />
      <path opacity="0.92" d="M199.829 48.6394C200.848 48.7285 201.389 49.8877 200.802 50.7258L186.33 71.3941C185.743 72.2322 184.469 72.1207 184.036 71.1934L173.373 48.3261C172.941 47.3988 173.674 46.3511 174.694 46.4403L199.829 48.6394Z" fill="#C4C4C4" />
      <circle opacity="0.89" cx="331.549" cy="32.5986" r="10.0483" transform="rotate(18 331.549 32.5986)" fill="#C4C4C4" />
      <rect opacity="0.72" x="384.909" y="43.8614" width="15.7901" height="15.7901" rx="1.32913" transform="rotate(47 384.909 43.8614)" fill="#C4C4C4" />
      <path opacity="0.99" d="M502.651 46.1519C503.672 46.2233 504.232 47.3728 503.66 48.2211L493.568 63.1841C492.995 64.0324 491.72 63.9431 491.271 63.0235L483.359 46.8015C482.91 45.8819 483.626 44.8216 484.646 44.8929L502.651 46.1519Z" fill="#C4C4C4" />
      <circle opacity="0.86" cx="641.604" cy="27.6894" r="11.4837" transform="rotate(-11 641.604 27.6894)" fill="#C4C4C4" />
      <path opacity="0.93" d="M707.963 26.7505C708.228 25.7622 709.463 25.4312 710.187 26.1546L722.949 38.917C723.673 39.6405 723.342 40.8759 722.353 41.1407L704.92 45.812C703.931 46.0768 703.027 45.1725 703.292 44.1842L707.963 26.7505Z" fill="#C4C4C4" />
      <rect opacity="0.94" x="741.117" y="6.64569" width="21.0535" height="21.0535" rx="1.32913" transform="rotate(-122 741.117 6.64569)" fill="#C4C4C4" />
      <path opacity="0.9" d="M883.534 49.3855C884.557 49.3677 885.216 50.4639 884.72 51.3588L876.371 66.4197C875.875 67.3146 874.597 67.3369 874.07 66.4599L865.201 51.6995C864.674 50.8225 865.294 49.7039 866.317 49.686L883.534 49.3855Z" fill="#C4C4C4" />
      <circle opacity="0.93" cx="1007.81" cy="17.8048" r="13.8762" transform="rotate(-76 1007.81 17.8048)" fill="#C4C4C4" />
      <rect opacity="0.98" x="1042.83" y="27.9118" width="23.9244" height="23.9244" rx="1.32913" transform="rotate(162 1042.83 27.9118)" fill="#C4C4C4" />
      <circle cx="1185.31" cy="17.5446" r="14.3546" transform="rotate(-180 1185.31 17.5446)" fill="#C4C4C4" />
      <circle opacity="0.87" cx="1254.92" cy="12.65" r="9.56976" transform="rotate(-65 1254.92 12.65)" fill="#C4C4C4" />
      <circle opacity="0.71" cx="1392.7" cy="41.544" r="9.68939" transform="rotate(-38 1392.7 41.544)" fill="#C4C4C4" />
      <path opacity="0.88" d="M1467.05 47.0341C1468.06 46.8389 1468.9 47.8041 1468.56 48.7715L1461.07 70.5386C1460.74 71.506 1459.48 71.75 1458.81 70.9778L1443.71 53.6035C1443.03 52.8313 1443.45 51.622 1444.45 51.4267L1467.05 47.0341Z" fill="#C4C4C4" />
      <path opacity="0.89" d="M1548.09 -5.22846C1547.07 -5.35316 1546.57 -6.53045 1547.19 -7.34758L1564.2 -29.9251C1564.82 -30.7422 1566.09 -30.5864 1566.49 -29.6445L1577.53 -3.62176C1577.93 -2.67993 1577.16 -1.65851 1576.15 -1.7832L1548.09 -5.22846Z" fill="#C4C4C4" />
      <rect opacity="0.71" x="1724.68" y="6.64569" width="26.7953" height="26.7953" rx="1.32913" transform="rotate(-45 1724.68 6.64569)" fill="#C4C4C4" />
      <path opacity="0.7" d="M1768.7 30.1902C1769.61 29.7257 1770.69 30.4222 1770.63 31.444L1769.34 56.089C1769.29 57.1108 1768.15 57.6914 1767.29 57.1341L1746.59 43.6931C1745.73 43.1358 1745.8 41.8586 1746.71 41.3941L1768.7 30.1902Z" fill="#C4C4C4" />
      <path opacity="0.95" d="M48.2634 74.7334C47.4252 75.3203 46.2661 74.7798 46.1769 73.7605L44.652 56.3309C44.5629 55.3116 45.6105 54.5781 46.5378 55.0105L62.3947 62.4047C63.322 62.8371 63.4335 64.1112 62.5954 64.698L48.2634 74.7334Z" fill="#C4C4C4" />
      <rect opacity="0.7" x="172.247" y="58.8511" width="21.532" height="21.532" rx="1.32913" transform="rotate(-51 172.247 58.8511)" fill="#C4C4C4" />
      <circle opacity="0.7" cx="294.255" cy="70.8699" r="9.92863" transform="rotate(-67 294.255 70.8699)" fill="#C4C4C4" />
      <rect opacity="0.81" x="400.858" y="78.7881" width="14.3546" height="14.3546" rx="1.32913" transform="rotate(-26 400.858 78.7881)" fill="#C4C4C4" />
      <path opacity="0.72" d="M534.287 78.4336C534.022 77.4453 534.927 76.541 535.915 76.8058L550.147 80.6191C551.135 80.884 551.466 82.1193 550.743 82.8428L540.324 93.2611C539.601 93.9846 538.365 93.6535 538.101 92.6652L534.287 78.4336Z" fill="#C4C4C4" />
      <path opacity="0.93" d="M592.734 47.7218C591.721 47.8642 590.933 46.8564 591.317 45.9077L598.492 28.1487C598.875 27.2001 600.142 27.0221 600.772 27.8283L612.564 42.9217C613.194 43.7279 612.715 44.9138 611.701 45.0562L592.734 47.7218Z" fill="#C4C4C4" />
      <rect opacity="0.8" x="649.406" y="49.5471" width="22.0105" height="22.0105" rx="1.32913" transform="rotate(-83 649.406 49.5471)" fill="#C4C4C4" />
      <path opacity="0.79" d="M782.91 71.9042C783.21 70.9257 784.456 70.638 785.153 71.3863L794.825 81.7577C795.523 82.506 795.149 83.7291 794.152 83.9593L780.334 87.1493C779.337 87.3795 778.465 86.4441 778.764 85.4657L782.91 71.9042Z" fill="#C4C4C4" />
      <path opacity="0.87" d="M875.592 71.8921C875.327 72.8804 874.092 73.2114 873.369 72.4879L860.997 60.1162C860.273 59.3927 860.604 58.1574 861.593 57.8925L878.493 53.3642C879.481 53.0994 880.385 54.0038 880.121 54.9921L875.592 71.8921Z" fill="#C4C4C4" />
      <rect opacity="0.88" x="998.969" y="65.4968" width="21.0535" height="21.0535" rx="1.32913" transform="rotate(87 998.969 65.4968)" fill="#C4C4C4" />
      <path opacity="0.94" d="M1140.67 47.3072C1141.1 46.3799 1142.38 46.2684 1142.97 47.1065L1159.34 70.4903C1159.93 71.3285 1159.38 72.4876 1158.37 72.5768L1129.93 75.0648C1128.91 75.1539 1128.18 74.1063 1128.61 73.179L1140.67 47.3072Z" fill="#C4C4C4" />
      <circle opacity="0.92" cx="1208.02" cy="71.1757" r="12.9192" transform="rotate(-138 1208.02 71.1757)" fill="#C4C4C4" />
      <rect opacity="0.78" x="1315.3" y="85.4338" width="24.8814" height="24.8814" rx="1.32913" transform="rotate(81 1315.3 85.4338)" fill="#C4C4C4" />
      <path opacity="0.9" d="M1430.16 55.2327C1429.17 54.9679 1428.84 53.7325 1429.56 53.009L1446.81 35.7538C1447.54 35.0303 1448.77 35.3613 1449.04 36.3496L1455.35 59.9207C1455.62 60.909 1454.71 61.8133 1453.73 61.5485L1430.16 55.2327Z" fill="#C4C4C4" />
      <circle opacity="0.72" cx="1519.59" cy="77.6056" r="8.37354" transform="rotate(100 1519.59 77.6056)" fill="#C4C4C4" />
      <rect opacity="0.86" x="1595.75" y="54.8637" width="20.575" height="20.575" rx="1.32913" transform="rotate(164 1595.75 54.8637)" fill="#C4C4C4" />
      <path opacity="0.72" d="M1646.46 56.4546C1646.15 57.4277 1644.89 57.6936 1644.21 56.9332L1626.22 36.9509C1625.53 36.1906 1625.93 34.9742 1626.93 34.7615L1653.23 29.171C1654.23 28.9582 1655.09 29.9087 1654.77 30.8818L1646.46 56.4546Z" fill="#C4C4C4" />
      <path opacity="0.87" d="M1756.22 59.9023C1755.85 60.8575 1754.59 61.0576 1753.94 60.2624L1743.8 47.7388C1743.16 46.9436 1743.62 45.7496 1744.63 45.5896L1760.54 43.0686C1761.55 42.9086 1762.36 43.9025 1761.99 44.8577L1756.22 59.9023Z" fill="#C4C4C4" />
      <circle opacity="0.72" cx="96.8289" cy="116.07" r="12.3211" transform="rotate(93 96.8289 116.07)" fill="#C4C4C4" />
      <circle opacity="0.83" cx="194.679" cy="84.4305" r="9.80901" transform="rotate(-119 194.679 84.4305)" fill="#C4C4C4" />
      <path opacity="0.92" d="M284.317 124.301C283.984 125.269 282.729 125.513 282.058 124.741L272.392 113.621C271.72 112.849 272.137 111.64 273.141 111.444L287.604 108.633C288.608 108.438 289.447 109.403 289.114 110.371L284.317 124.301Z" fill="#C4C4C4" />
      <rect opacity="0.81" x="364.972" y="116.373" width="24.1637" height="24.1637" rx="1.32913" transform="rotate(101 364.972 116.373)" fill="#C4C4C4" />
      <rect opacity="0.99" x="444.72" y="103.082" width="26.7953" height="26.7953" rx="1.32913" transform="rotate(19 444.72 103.082)" fill="#C4C4C4" />
      <circle opacity="0.9" cx="634.485" cy="132.988" r="10.6464" transform="rotate(-27 634.485 132.988)" fill="#C4C4C4" />
      <circle opacity="0.9" cx="693.638" cy="127.327" r="7.77543" transform="rotate(50 693.638 127.327)" fill="#C4C4C4" />
      <rect opacity="0.9" x="774.345" y="108.398" width="23.6852" height="23.6852" rx="1.32913" transform="rotate(-163 774.345 108.398)" fill="#C4C4C4" />
      <circle opacity="0.99" cx="924.989" cy="126.554" r="8.85203" transform="rotate(90 924.989 126.554)" fill="#C4C4C4" />
      <rect opacity="0.93" x="1018.91" y="96.436" width="27.7523" height="27.7523" rx="1.32913" transform="rotate(-173 1018.91 96.436)" fill="#C4C4C4" />
      <circle opacity="0.99" cx="1047.67" cy="121.531" r="11.6033" transform="rotate(-146 1047.67 121.531)" fill="#C4C4C4" />
      <circle opacity="0.89" cx="1198.24" cy="111.947" r="14.235" transform="rotate(178 1198.24 111.947)" fill="#C4C4C4" />
      <circle opacity="0.87" cx="1290.39" cy="108.095" r="12.3211" transform="rotate(93 1290.39 108.095)" fill="#C4C4C4" />
      <path opacity="0.7" d="M1368.54 112.789C1367.85 112.029 1368.25 110.813 1369.25 110.6L1393.12 105.526C1394.12 105.314 1394.97 106.264 1394.66 107.237L1387.12 130.445C1386.8 131.419 1385.55 131.684 1384.87 130.924L1368.54 112.789Z" fill="#C4C4C4" />
      <rect opacity="0.88" x="1441.57" y="99.0943" width="23.6852" height="23.6852" rx="1.32913" transform="rotate(112 1441.57 99.0943)" fill="#C4C4C4" />
      <rect opacity="0.99" x="1601.07" y="97.7652" width="20.3357" height="20.3357" rx="1.32913" transform="rotate(168 1601.07 97.7652)" fill="#C4C4C4" />
      <rect opacity="0.98" x="1644.93" y="115.044" width="20.0965" height="20.0965" rx="1.32913" transform="rotate(65 1644.93 115.044)" fill="#C4C4C4" />
      <path opacity="0.83" d="M1733.45 88.7933C1732.43 88.8825 1731.7 87.8348 1732.13 86.9075L1743.96 61.5364C1744.4 60.6091 1745.67 60.4977 1746.26 61.3358L1762.31 84.267C1762.9 85.1052 1762.36 86.2643 1761.34 86.3535L1733.45 88.7933Z" fill="#C4C4C4" />
      <circle opacity="0.79" cx="89.2603" cy="153.483" r="9.92863" transform="rotate(172 89.2603 153.483)" fill="#C4C4C4" />
      <circle opacity="0.93" cx="210.555" cy="165.098" r="9.45014" transform="rotate(-166 210.555 165.098)" fill="#C4C4C4" />
      <path opacity="0.87" d="M291.409 135.948C290.435 135.632 290.17 134.381 290.93 133.696L312.144 114.595C312.904 113.91 314.121 114.306 314.333 115.306L320.269 143.229C320.481 144.23 319.531 145.086 318.558 144.769L291.409 135.948Z" fill="#C4C4C4" />
      <rect opacity="0.91" x="387.567" y="167.249" width="25.3599" height="25.3599" rx="1.32913" transform="rotate(-176 387.567 167.249)" fill="#C4C4C4" />
      <path opacity="0.76" d="M518.978 149.258C519.138 150.268 518.144 151.073 517.189 150.706L496.986 142.951C496.031 142.585 495.831 141.321 496.626 140.677L513.443 127.059C514.238 126.415 515.432 126.873 515.593 127.884L518.978 149.258Z" fill="#C4C4C4" />
      <rect opacity="0.77" x="584.279" y="171.237" width="27.9916" height="27.9916" rx="1.32913" transform="rotate(114 584.279 171.237)" fill="#C4C4C4" />
      <path d="M684.904 166.948C684.143 166.263 684.409 165.012 685.382 164.696L706.489 157.838C707.462 157.522 708.412 158.378 708.2 159.379L703.586 181.086C703.373 182.087 702.156 182.482 701.396 181.798L684.904 166.948Z" fill="#C4C4C4" />
      <path opacity="0.99" d="M753.68 179.413C754.677 179.643 755.051 180.866 754.353 181.615L735.261 202.088C734.563 202.836 733.317 202.549 733.018 201.57L724.834 174.8C724.534 173.821 725.407 172.886 726.404 173.116L753.68 179.413Z" fill="#C4C4C4" />
      <circle opacity="0.76" cx="884.87" cy="173.423" r="8.37354" transform="rotate(31 884.87 173.423)" fill="#C4C4C4" />
      <path opacity="0.9" d="M968.451 176.592C968.273 177.6 967.071 178.037 966.287 177.379L950.557 164.18C949.773 163.522 949.995 162.263 950.956 161.913L970.253 154.889C971.214 154.539 972.194 155.361 972.016 156.369L968.451 176.592Z" fill="#C4C4C4" />
      <rect opacity="0.83" x="1099.98" y="181.87" width="16.5078" height="16.5078" rx="1.32913" transform="rotate(-137 1099.98 181.87)" fill="#C4C4C4" />
      <rect opacity="0.92" x="1227.58" y="179.212" width="21.0535" height="21.0535" rx="1.32913" transform="rotate(-74 1227.58 179.212)" fill="#C4C4C4" />
      <rect opacity="0.91" x="1292.71" y="161.933" width="14.5939" height="14.5939" rx="1.32913" transform="rotate(167 1292.71 161.933)" fill="#C4C4C4" />
      <path opacity="0.75" d="M1414.12 170.366C1414.79 169.594 1416.05 169.838 1416.38 170.805L1422.89 189.699C1423.22 190.667 1422.38 191.632 1421.38 191.437L1401.76 187.624C1400.76 187.429 1400.34 186.219 1401.01 185.447L1414.12 170.366Z" fill="#C4C4C4" />
      <rect opacity="0.97" x="1484.1" y="160.604" width="28.47" height="28.47" rx="1.32913" transform="rotate(125 1484.1 160.604)" fill="#C4C4C4" />
      <circle opacity="0.71" cx="1573.97" cy="167.125" r="13.1584" transform="rotate(152 1573.97 167.125)" fill="#C4C4C4" />
      <rect opacity="0.75" x="1639.61" y="181.87" width="27.2738" height="27.2738" rx="1.32913" transform="rotate(144 1639.61 181.87)" fill="#C4C4C4" />
      <circle opacity="0.77" cx="1834.01" cy="180.473" r="8.49317" transform="rotate(37 1834.01 180.473)" fill="#C4C4C4" />
      <circle opacity="0.78" cx="51.0069" cy="233.076" r="7.29694" transform="rotate(24 51.0069 233.076)" fill="#C4C4C4" />
      <circle opacity="0.86" cx="128.593" cy="197.128" r="12.4407" transform="rotate(121 128.593 197.128)" fill="#C4C4C4" />
      <path opacity="0.91" d="M254.16 198.319C254.373 197.319 255.589 196.923 256.35 197.608L267.299 207.467C268.059 208.151 267.793 209.402 266.82 209.719L252.808 214.272C251.835 214.588 250.884 213.732 251.097 212.731L254.16 198.319Z" fill="#C4C4C4" />
      <circle opacity="0.91" cx="438.537" cy="200.245" r="10.5267" transform="rotate(-94 438.537 200.245)" fill="#C4C4C4" />
      <rect opacity="0.98" x="452.695" y="219.455" width="19.1395" height="19.1395" rx="1.32913" transform="rotate(107 452.695 219.455)" fill="#C4C4C4" />
      <rect opacity="0.95" x="633.457" y="190.214" width="24.4029" height="24.4029" rx="1.32913" transform="rotate(-120 633.457 190.214)" fill="#C4C4C4" />
      <circle opacity="0.93" cx="670.395" cy="222.284" r="8.97165" transform="rotate(28 670.395 222.284)" fill="#C4C4C4" />
      <circle opacity="0.86" cx="784.916" cy="208.493" r="14.3546" transform="rotate(30 784.916 208.493)" fill="#C4C4C4" />
      <rect opacity="0.8" x="924.537" y="207.493" width="21.532" height="21.532" rx="1.32913" transform="rotate(119 924.537 207.493)" fill="#C4C4C4" />
      <path opacity="0.72" d="M925.872 205.784C925.215 206.568 923.955 206.346 923.605 205.384L916.298 185.309C915.948 184.347 916.771 183.368 917.778 183.545L938.817 187.255C939.825 187.433 940.262 188.634 939.605 189.418L925.872 205.784Z" fill="#C4C4C4" />
      <rect opacity="0.75" x="1058.78" y="218.126" width="24.1637" height="24.1637" rx="1.32913" transform="rotate(-35 1058.78 218.126)" fill="#C4C4C4" />
      <circle cx="1153.61" cy="232.03" r="10.5267" transform="rotate(117 1153.61 232.03)" fill="#C4C4C4" />
      <circle opacity="0.74" cx="1304.88" cy="203.461" r="10.6464" transform="rotate(-35 1304.88 203.461)" fill="#C4C4C4" />
      <rect opacity="0.86" x="1345.87" y="212.809" width="18.9003" height="18.9003" rx="1.32913" transform="rotate(-51 1345.87 212.809)" fill="#C4C4C4" />
      <rect opacity="0.82" x="1438.91" y="220.784" width="19.1395" height="19.1395" rx="1.32913" transform="rotate(107 1438.91 220.784)" fill="#C4C4C4" />
      <circle opacity="0.86" cx="1551.56" cy="221.788" r="11.2445" transform="rotate(-71 1551.56 221.788)" fill="#C4C4C4" />
      <path opacity="0.72" d="M1689.75 194.459C1689.09 195.242 1687.83 195.02 1687.48 194.059L1682.35 179.954C1682 178.993 1682.82 178.013 1683.83 178.191L1698.61 180.797C1699.62 180.975 1700.06 182.177 1699.4 182.96L1689.75 194.459Z" fill="#C4C4C4" />
      <rect opacity="0.9" x="1747.27" y="215.467" width="18.9003" height="18.9003" rx="1.32913" transform="rotate(-149 1747.27 215.467)" fill="#C4C4C4" />
      <circle opacity="0.91" cx="58.043" cy="281.693" r="9.09128" transform="rotate(100 58.043 281.693)" fill="#C4C4C4" />
      <rect opacity="0.77" x="236.046" y="234.444" width="28.7093" height="28.7093" rx="1.32913" transform="rotate(131 236.046 234.444)" fill="#C4C4C4" />
      <rect opacity="0.93" x="303.831" y="257.04" width="20.0965" height="20.0965" rx="1.32913" transform="rotate(168 303.831 257.04)" fill="#C4C4C4" />
      <rect opacity="0.95" x="391.554" y="243.748" width="16.9863" height="16.9863" rx="1.32913" transform="rotate(-75 391.554 243.748)" fill="#C4C4C4" />
      <rect opacity="0.7" x="515.164" y="266.344" width="23.9244" height="23.9244" rx="1.32913" transform="rotate(-158 515.164 266.344)" fill="#C4C4C4" />
      <rect opacity="0.86" x="634.786" y="275.648" width="17.2256" height="17.2256" rx="1.32913" transform="rotate(34 634.786 275.648)" fill="#C4C4C4" />
      <rect opacity="0.96" x="717.192" y="271.66" width="24.8814" height="24.8814" rx="1.32913" transform="rotate(-9 717.192 271.66)" fill="#C4C4C4" />
      <path opacity="0.84" d="M735.951 266.589C735.809 267.602 734.623 268.081 733.816 267.451L713.716 251.747C712.91 251.118 713.088 249.851 714.037 249.468L737.687 239.912C738.635 239.529 739.643 240.317 739.501 241.33L735.951 266.589Z" fill="#C4C4C4" />
      <rect x="928.524" y="239.761" width="16.9863" height="16.9863" rx="1.32913" transform="rotate(127 928.524 239.761)" fill="#C4C4C4" />
      <rect opacity="0.98" x="985.677" y="263.685" width="26.0776" height="26.0776" rx="1.32913" transform="rotate(44 985.677 263.685)" fill="#C4C4C4" />
      <circle opacity="0.78" cx="1077.39" cy="250.272" r="11.3641" transform="rotate(-135 1077.39 250.272)" fill="#C4C4C4" />
      <circle opacity="0.73" cx="1179.14" cy="277.508" r="12.0818" transform="rotate(9 1179.14 277.508)" fill="#C4C4C4" />
      <circle opacity="0.94" cx="1250.78" cy="255.621" r="13.0388" transform="rotate(83 1250.78 255.621)" fill="#C4C4C4" />
      <path opacity="0.86" d="M1390.44 250.199C1391.25 249.569 1392.43 250.048 1392.58 251.062L1394.32 263.463C1394.46 264.477 1393.45 265.264 1392.51 264.881L1380.89 260.189C1379.95 259.806 1379.77 258.539 1380.57 257.91L1390.44 250.199Z" fill="#C4C4C4" />
      <rect opacity="0.95" x="1472.14" y="253.052" width="17.9433" height="17.9433" rx="1.32913" transform="rotate(65 1472.14 253.052)" fill="#C4C4C4" />
      <path opacity="0.94" d="M1565.08 273.54C1565.31 274.537 1564.37 275.409 1563.39 275.11L1541.64 268.46C1540.66 268.161 1540.37 266.915 1541.12 266.217L1557.76 250.705C1558.51 250.007 1559.73 250.381 1559.96 251.378L1565.08 273.54Z" fill="#C4C4C4" />
      <rect opacity="0.75" x="1662.21" y="259.698" width="24.6421" height="24.6421" rx="1.32913" transform="rotate(-179 1662.21 259.698)" fill="#C4C4C4" />
      <circle opacity="0.74" cx="1754.06" cy="276.977" r="13.9958" transform="rotate(135 1754.06 276.977)" fill="#C4C4C4" />
      <path opacity="0.97" d="M150.643 309.39C150.59 308.368 151.662 307.672 152.574 308.136L169.64 316.832C170.552 317.296 170.619 318.574 169.76 319.131L153.697 329.563C152.839 330.12 151.699 329.539 151.646 328.518L150.643 309.39Z" fill="#C4C4C4" />
      <path opacity="0.76" d="M144.539 318.751C143.701 319.338 142.542 318.798 142.453 317.779L141.024 301.45C140.935 300.431 141.983 299.697 142.91 300.129L157.765 307.057C158.693 307.489 158.804 308.763 157.966 309.35L144.539 318.751Z" fill="#C4C4C4" />
      <circle opacity="0.81" cx="323.937" cy="276.144" r="12.9192" transform="rotate(-165 323.937 276.144)" fill="#C4C4C4" />
      <rect opacity="0.9" x="414.15" y="294.625" width="24.8814" height="24.8814" rx="1.32913" transform="rotate(69 414.15 294.625)" fill="#C4C4C4" />
      <circle opacity="0.79" cx="470.94" cy="275.159" r="8.25392" transform="rotate(-85 470.94 275.159)" fill="#C4C4C4" />
      <path opacity="0.81" d="M616.551 292.558C616.605 291.536 617.744 290.956 618.602 291.513L637.214 303.6C638.073 304.157 638.006 305.434 637.094 305.899L617.32 315.974C616.409 316.439 615.336 315.742 615.39 314.72L616.551 292.558Z" fill="#C4C4C4" />
      <rect opacity="0.99" x="731.813" y="315.891" width="16.5078" height="16.5078" rx="1.32913" transform="rotate(-50 731.813 315.891)" fill="#C4C4C4" />
      <path opacity="0.73" d="M821.363 317.862C821.763 316.92 823.032 316.764 823.648 317.581L833.513 330.672C834.128 331.489 833.629 332.666 832.613 332.791L816.344 334.789C815.329 334.913 814.559 333.892 814.959 332.95L821.363 317.862Z" fill="#C4C4C4" />
      <circle opacity="0.98" cx="875.689" cy="289.597" r="7.29694" transform="rotate(-66 875.689 289.597)" fill="#C4C4C4" />
      <path opacity="0.84" d="M941.859 332.31C942.727 332.852 942.682 334.131 941.779 334.611L916.818 347.883C915.915 348.363 914.83 347.686 914.866 346.663L915.852 318.41C915.888 317.388 917.017 316.787 917.885 317.329L941.859 332.31Z" fill="#C4C4C4" />
      <circle opacity="0.8" cx="1058.95" cy="285.151" r="9.56976" transform="rotate(-82 1058.95 285.151)" fill="#C4C4C4" />
      <rect opacity="0.72" x="1214.29" y="298.612" width="14.3546" height="14.3546" rx="1.32913" transform="rotate(14 1214.29 298.612)" fill="#C4C4C4" />
      <circle opacity="0.77" cx="1313.15" cy="317.785" r="9.80901" transform="rotate(-71 1313.15 317.785)" fill="#C4C4C4" />
      <rect opacity="0.7" x="1407.01" y="314.562" width="14.5939" height="14.5939" rx="1.32913" transform="rotate(-128 1407.01 314.562)" fill="#C4C4C4" />
      <rect opacity="0.71" x="1531.95" y="283.992" width="15.7901" height="15.7901" rx="1.32913" transform="rotate(25 1531.95 283.992)" fill="#C4C4C4" />
      <circle opacity="0.93" cx="1575.25" cy="300.174" r="10.5267" transform="rotate(80 1575.25 300.174)" fill="#C4C4C4" />
      <rect opacity="0.72" x="1726" y="302.599" width="28.7093" height="28.7093" rx="1.32913" transform="rotate(39 1726 302.599)" fill="#C4C4C4" />
      <path opacity="0.83" d="M1828.33 303.794C1829.28 303.394 1830.3 304.164 1830.17 305.179L1827.37 328.029C1827.24 329.044 1826.06 329.544 1825.25 328.928L1806.86 315.074C1806.04 314.458 1806.2 313.189 1807.14 312.789L1828.33 303.794Z" fill="#C4C4C4" />
      <circle opacity="0.71" cx="53.3552" cy="344.746" r="10.6464" transform="rotate(-4 53.3552 344.746)" fill="#C4C4C4" />
      <circle opacity="0.88" cx="245.814" cy="354.699" r="13.0388" transform="rotate(-98 245.814 354.699)" fill="#C4C4C4" />
      <circle opacity="0.78" cx="236.132" cy="367.838" r="7.17732" transform="rotate(96 236.132 367.838)" fill="#C4C4C4" />
      <path opacity="0.7" d="M410.729 354.987C411.746 355.094 412.266 356.262 411.665 357.09L400.569 372.362C399.968 373.19 398.696 373.057 398.28 372.122L390.601 354.876C390.185 353.942 390.937 352.907 391.955 353.014L410.729 354.987Z" fill="#C4C4C4" />
      <circle opacity="0.96" cx="508.567" cy="324.416" r="12.2014" transform="rotate(-67 508.567 324.416)" fill="#C4C4C4" />
      <path opacity="0.92" d="M540.312 342.342C539.816 343.237 538.537 343.259 538.01 342.382L530.991 330.7C530.464 329.823 531.084 328.705 532.107 328.687L545.734 328.449C546.757 328.431 547.416 329.527 546.92 330.422L540.312 342.342Z" fill="#C4C4C4" />
      <circle opacity="0.75" cx="1789.96" cy="812.45" r="12.3211" transform="rotate(110 1789.96 812.45)" fill="#C4C4C4" />
    </g>
  </g>
</svg>

As you can see, I tried applying a linear gradient mask to "fade out" the image at the bottom, but it's not working. How do I have it fade out at the last 20% of the image? (opacity = 1 for first 80%, opacity fades out to 0 over the last 20%)?

Basically it doesn't appear I can fade out the image like this using CSS, I need to fade out the image by adding some sort of SVG linear gradient, but not sure how.

I tried this as well, but not getting any feedback:

<defs>
  <clipPath id="clip0_529_2072">
    <rect width="1848" height="862" fill="white" />
  </clipPath>
  <linearGradient id="fadeGrad" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0.5" stop-color="white" stop-opacity="1" />
    <stop offset="1" stop-color="white" stop-opacity="0" />
  </linearGradient>
  <mask id="fade" maskContentUnits="objectBoundingBox">
    <rect width="100%" height="100%" fill="url(#fadeGrad)" />
  </mask>
</defs>

CodePudding user response：

The gradient should paint in black and white and the mask makes the white visible and the black not visible.

<svg viewBox="0 0 1848 862" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="fadeGrad">
      <stop offset="0.5" stop-color="white" />
      <stop offset="1" stop-color="black" />
    </linearGradient>
    <mask id="fade">
      <rect width="1848" height="862" fill="url(#fadeGrad)" />
    </mask>
  </defs>
  <g mask="url(#fade)">
    <g>
      <rect x="407.504" y="361.524" width="23.9244" height="23.9244" rx="1.32913" fill="#C4C4C4" />
      <path d="M487.43 363.518C487.942 362.632 489.221 362.632 489.732 363.518L501.243 383.455C501.754 384.341 501.115 385.449 500.092 385.449H477.07C476.047 385.449 475.408 384.341 475.919 383.455L487.43 363.518Z" fill="#C4C4C4" />
      <rect opacity="0.72" x="112.436" y="25.2535" width="28.47" height="28.47" rx="1.32913" transform="rotate(-14 112.436 25.2535)" fill="#C4C4C4" />
      <path opacity="0.92" d="M199.829 48.6394C200.848 48.7285 201.389 49.8877 200.802 50.7258L186.33 71.3941C185.743 72.2322 184.469 72.1207 184.036 71.1934L173.373 48.3261C172.941 47.3988 173.674 46.3511 174.694 46.4403L199.829 48.6394Z" fill="#C4C4C4" />
      <circle opacity="0.89" cx="331.549" cy="32.5986" r="10.0483" transform="rotate(18 331.549 32.5986)" fill="#C4C4C4" />
      <rect opacity="0.72" x="384.909" y="43.8614" width="15.7901" height="15.7901" rx="1.32913" transform="rotate(47 384.909 43.8614)" fill="#C4C4C4" />
      <path opacity="0.99" d="M502.651 46.1519C503.672 46.2233 504.232 47.3728 503.66 48.2211L493.568 63.1841C492.995 64.0324 491.72 63.9431 491.271 63.0235L483.359 46.8015C482.91 45.8819 483.626 44.8216 484.646 44.8929L502.651 46.1519Z" fill="#C4C4C4" />
      <circle opacity="0.86" cx="641.604" cy="27.6894" r="11.4837" transform="rotate(-11 641.604 27.6894)" fill="#C4C4C4" />
      <path opacity="0.93" d="M707.963 26.7505C708.228 25.7622 709.463 25.4312 710.187 26.1546L722.949 38.917C723.673 39.6405 723.342 40.8759 722.353 41.1407L704.92 45.812C703.931 46.0768 703.027 45.1725 703.292 44.1842L707.963 26.7505Z" fill="#C4C4C4" />
      <rect opacity="0.94" x="741.117" y="6.64569" width="21.0535" height="21.0535" rx="1.32913" transform="rotate(-122 741.117 6.64569)" fill="#C4C4C4" />
      <path opacity="0.9" d="M883.534 49.3855C884.557 49.3677 885.216 50.4639 884.72 51.3588L876.371 66.4197C875.875 67.3146 874.597 67.3369 874.07 66.4599L865.201 51.6995C864.674 50.8225 865.294 49.7039 866.317 49.686L883.534 49.3855Z" fill="#C4C4C4" />
      <circle opacity="0.93" cx="1007.81" cy="17.8048" r="13.8762" transform="rotate(-76 1007.81 17.8048)" fill="#C4C4C4" />
      <rect opacity="0.98" x="1042.83" y="27.9118" width="23.9244" height="23.9244" rx="1.32913" transform="rotate(162 1042.83 27.9118)" fill="#C4C4C4" />
      <circle cx="1185.31" cy="17.5446" r="14.3546" transform="rotate(-180 1185.31 17.5446)" fill="#C4C4C4" />
      <circle opacity="0.87" cx="1254.92" cy="12.65" r="9.56976" transform="rotate(-65 1254.92 12.65)" fill="#C4C4C4" />
      <circle opacity="0.71" cx="1392.7" cy="41.544" r="9.68939" transform="rotate(-38 1392.7 41.544)" fill="#C4C4C4" />
      <path opacity="0.88" d="M1467.05 47.0341C1468.06 46.8389 1468.9 47.8041 1468.56 48.7715L1461.07 70.5386C1460.74 71.506 1459.48 71.75 1458.81 70.9778L1443.71 53.6035C1443.03 52.8313 1443.45 51.622 1444.45 51.4267L1467.05 47.0341Z" fill="#C4C4C4" />
      <path opacity="0.89" d="M1548.09 -5.22846C1547.07 -5.35316 1546.57 -6.53045 1547.19 -7.34758L1564.2 -29.9251C1564.82 -30.7422 1566.09 -30.5864 1566.49 -29.6445L1577.53 -3.62176C1577.93 -2.67993 1577.16 -1.65851 1576.15 -1.7832L1548.09 -5.22846Z" fill="#C4C4C4" />
      <rect opacity="0.71" x="1724.68" y="6.64569" width="26.7953" height="26.7953" rx="1.32913" transform="rotate(-45 1724.68 6.64569)" fill="#C4C4C4" />
      <path opacity="0.7" d="M1768.7 30.1902C1769.61 29.7257 1770.69 30.4222 1770.63 31.444L1769.34 56.089C1769.29 57.1108 1768.15 57.6914 1767.29 57.1341L1746.59 43.6931C1745.73 43.1358 1745.8 41.8586 1746.71 41.3941L1768.7 30.1902Z" fill="#C4C4C4" />
      <path opacity="0.95" d="M48.2634 74.7334C47.4252 75.3203 46.2661 74.7798 46.1769 73.7605L44.652 56.3309C44.5629 55.3116 45.6105 54.5781 46.5378 55.0105L62.3947 62.4047C63.322 62.8371 63.4335 64.1112 62.5954 64.698L48.2634 74.7334Z" fill="#C4C4C4" />
      <rect opacity="0.7" x="172.247" y="58.8511" width="21.532" height="21.532" rx="1.32913" transform="rotate(-51 172.247 58.8511)" fill="#C4C4C4" />
      <circle opacity="0.7" cx="294.255" cy="70.8699" r="9.92863" transform="rotate(-67 294.255 70.8699)" fill="#C4C4C4" />
      <rect opacity="0.81" x="400.858" y="78.7881" width="14.3546" height="14.3546" rx="1.32913" transform="rotate(-26 400.858 78.7881)" fill="#C4C4C4" />
      <path opacity="0.72" d="M534.287 78.4336C534.022 77.4453 534.927 76.541 535.915 76.8058L550.147 80.6191C551.135 80.884 551.466 82.1193 550.743 82.8428L540.324 93.2611C539.601 93.9846 538.365 93.6535 538.101 92.6652L534.287 78.4336Z" fill="#C4C4C4" />
      <path opacity="0.93" d="M592.734 47.7218C591.721 47.8642 590.933 46.8564 591.317 45.9077L598.492 28.1487C598.875 27.2001 600.142 27.0221 600.772 27.8283L612.564 42.9217C613.194 43.7279 612.715 44.9138 611.701 45.0562L592.734 47.7218Z" fill="#C4C4C4" />
      <rect opacity="0.8" x="649.406" y="49.5471" width="22.0105" height="22.0105" rx="1.32913" transform="rotate(-83 649.406 49.5471)" fill="#C4C4C4" />
      <path opacity="0.79" d="M782.91 71.9042C783.21 70.9257 784.456 70.638 785.153 71.3863L794.825 81.7577C795.523 82.506 795.149 83.7291 794.152 83.9593L780.334 87.1493C779.337 87.3795 778.465 86.4441 778.764 85.4657L782.91 71.9042Z" fill="#C4C4C4" />
      <path opacity="0.87" d="M875.592 71.8921C875.327 72.8804 874.092 73.2114 873.369 72.4879L860.997 60.1162C860.273 59.3927 860.604 58.1574 861.593 57.8925L878.493 53.3642C879.481 53.0994 880.385 54.0038 880.121 54.9921L875.592 71.8921Z" fill="#C4C4C4" />
      <rect opacity="0.88" x="998.969" y="65.4968" width="21.0535" height="21.0535" rx="1.32913" transform="rotate(87 998.969 65.4968)" fill="#C4C4C4" />
      <path opacity="0.94" d="M1140.67 47.3072C1141.1 46.3799 1142.38 46.2684 1142.97 47.1065L1159.34 70.4903C1159.93 71.3285 1159.38 72.4876 1158.37 72.5768L1129.93 75.0648C1128.91 75.1539 1128.18 74.1063 1128.61 73.179L1140.67 47.3072Z" fill="#C4C4C4" />
      <circle opacity="0.92" cx="1208.02" cy="71.1757" r="12.9192" transform="rotate(-138 1208.02 71.1757)" fill="#C4C4C4" />
      <rect opacity="0.78" x="1315.3" y="85.4338" width="24.8814" height="24.8814" rx="1.32913" transform="rotate(81 1315.3 85.4338)" fill="#C4C4C4" />
      <path opacity="0.9" d="M1430.16 55.2327C1429.17 54.9679 1428.84 53.7325 1429.56 53.009L1446.81 35.7538C1447.54 35.0303 1448.77 35.3613 1449.04 36.3496L1455.35 59.9207C1455.62 60.909 1454.71 61.8133 1453.73 61.5485L1430.16 55.2327Z" fill="#C4C4C4" />
      <circle opacity="0.72" cx="1519.59" cy="77.6056" r="8.37354" transform="rotate(100 1519.59 77.6056)" fill="#C4C4C4" />
      <rect opacity="0.86" x="1595.75" y="54.8637" width="20.575" height="20.575" rx="1.32913" transform="rotate(164 1595.75 54.8637)" fill="#C4C4C4" />
      <path opacity="0.72" d="M1646.46 56.4546C1646.15 57.4277 1644.89 57.6936 1644.21 56.9332L1626.22 36.9509C1625.53 36.1906 1625.93 34.9742 1626.93 34.7615L1653.23 29.171C1654.23 28.9582 1655.09 29.9087 1654.77 30.8818L1646.46 56.4546Z" fill="#C4C4C4" />
      <path opacity="0.87" d="M1756.22 59.9023C1755.85 60.8575 1754.59 61.0576 1753.94 60.2624L1743.8 47.7388C1743.16 46.9436 1743.62 45.7496 1744.63 45.5896L1760.54 43.0686C1761.55 42.9086 1762.36 43.9025 1761.99 44.8577L1756.22 59.9023Z" fill="#C4C4C4" />
      <circle opacity="0.72" cx="96.8289" cy="116.07" r="12.3211" transform="rotate(93 96.8289 116.07)" fill="#C4C4C4" />
      <circle opacity="0.83" cx="194.679" cy="84.4305" r="9.80901" transform="rotate(-119 194.679 84.4305)" fill="#C4C4C4" />
      <path opacity="0.92" d="M284.317 124.301C283.984 125.269 282.729 125.513 282.058 124.741L272.392 113.621C271.72 112.849 272.137 111.64 273.141 111.444L287.604 108.633C288.608 108.438 289.447 109.403 289.114 110.371L284.317 124.301Z" fill="#C4C4C4" />
      <rect opacity="0.81" x="364.972" y="116.373" width="24.1637" height="24.1637" rx="1.32913" transform="rotate(101 364.972 116.373)" fill="#C4C4C4" />
      <rect opacity="0.99" x="444.72" y="103.082" width="26.7953" height="26.7953" rx="1.32913" transform="rotate(19 444.72 103.082)" fill="#C4C4C4" />
      <circle opacity="0.9" cx="634.485" cy="132.988" r="10.6464" transform="rotate(-27 634.485 132.988)" fill="#C4C4C4" />
      <circle opacity="0.9" cx="693.638" cy="127.327" r="7.77543" transform="rotate(50 693.638 127.327)" fill="#C4C4C4" />
      <rect opacity="0.9" x="774.345" y="108.398" width="23.6852" height="23.6852" rx="1.32913" transform="rotate(-163 774.345 108.398)" fill="#C4C4C4" />
      <circle opacity="0.99" cx="924.989" cy="126.554" r="8.85203" transform="rotate(90 924.989 126.554)" fill="#C4C4C4" />
      <rect opacity="0.93" x="1018.91" y="96.436" width="27.7523" height="27.7523" rx="1.32913" transform="rotate(-173 1018.91 96.436)" fill="#C4C4C4" />
      <circle opacity="0.99" cx="1047.67" cy="121.531" r="11.6033" transform="rotate(-146 1047.67 121.531)" fill="#C4C4C4" />
      <circle opacity="0.89" cx="1198.24" cy="111.947" r="14.235" transform="rotate(178 1198.24 111.947)" fill="#C4C4C4" />
      <circle opacity="0.87" cx="1290.39" cy="108.095" r="12.3211" transform="rotate(93 1290.39 108.095)" fill="#C4C4C4" />
      <path opacity="0.7" d="M1368.54 112.789C1367.85 112.029 1368.25 110.813 1369.25 110.6L1393.12 105.526C1394.12 105.314 1394.97 106.264 1394.66 107.237L1387.12 130.445C1386.8 131.419 1385.55 131.684 1384.87 130.924L1368.54 112.789Z" fill="#C4C4C4" />
      <rect opacity="0.88" x="1441.57" y="99.0943" width="23.6852" height="23.6852" rx="1.32913" transform="rotate(112 1441.57 99.0943)" fill="#C4C4C4" />
      <rect opacity="0.99" x="1601.07" y="97.7652" width="20.3357" height="20.3357" rx="1.32913" transform="rotate(168 1601.07 97.7652)" fill="#C4C4C4" />
      <rect opacity="0.98" x="1644.93" y="115.044" width="20.0965" height="20.0965" rx="1.32913" transform="rotate(65 1644.93 115.044)" fill="#C4C4C4" />
      <path opacity="0.83" d="M1733.45 88.7933C1732.43 88.8825 1731.7 87.8348 1732.13 86.9075L1743.96 61.5364C1744.4 60.6091 1745.67 60.4977 1746.26 61.3358L1762.31 84.267C1762.9 85.1052 1762.36 86.2643 1761.34 86.3535L1733.45 88.7933Z" fill="#C4C4C4" />
      <circle opacity="0.79" cx="89.2603" cy="153.483" r="9.92863" transform="rotate(172 89.2603 153.483)" fill="#C4C4C4" />
      <circle opacity="0.93" cx="210.555" cy="165.098" r="9.45014" transform="rotate(-166 210.555 165.098)" fill="#C4C4C4" />
      <path opacity="0.87" d="M291.409 135.948C290.435 135.632 290.17 134.381 290.93 133.696L312.144 114.595C312.904 113.91 314.121 114.306 314.333 115.306L320.269 143.229C320.481 144.23 319.531 145.086 318.558 144.769L291.409 135.948Z" fill="#C4C4C4" />
      <rect opacity="0.91" x="387.567" y="167.249" width="25.3599" height="25.3599" rx="1.32913" transform="rotate(-176 387.567 167.249)" fill="#C4C4C4" />
      <path opacity="0.76" d="M518.978 149.258C519.138 150.268 518.144 151.073 517.189 150.706L496.986 142.951C496.031 142.585 495.831 141.321 496.626 140.677L513.443 127.059C514.238 126.415 515.432 126.873 515.593 127.884L518.978 149.258Z" fill="#C4C4C4" />
      <rect opacity="0.77" x="584.279" y="171.237" width="27.9916" height="27.9916" rx="1.32913" transform="rotate(114 584.279 171.237)" fill="#C4C4C4" />
      <path d="M684.904 166.948C684.143 166.263 684.409 165.012 685.382 164.696L706.489 157.838C707.462 157.522 708.412 158.378 708.2 159.379L703.586 181.086C703.373 182.087 702.156 182.482 701.396 181.798L684.904 166.948Z" fill="#C4C4C4" />
      <path opacity="0.99" d="M753.68 179.413C754.677 179.643 755.051 180.866 754.353 181.615L735.261 202.088C734.563 202.836 733.317 202.549 733.018 201.57L724.834 174.8C724.534 173.821 725.407 172.886 726.404 173.116L753.68 179.413Z" fill="#C4C4C4" />
      <circle opacity="0.76" cx="884.87" cy="173.423" r="8.37354" transform="rotate(31 884.87 173.423)" fill="#C4C4C4" />
      <path opacity="0.9" d="M968.451 176.592C968.273 177.6 967.071 178.037 966.287 177.379L950.557 164.18C949.773 163.522 949.995 162.263 950.956 161.913L970.253 154.889C971.214 154.539 972.194 155.361 972.016 156.369L968.451 176.592Z" fill="#C4C4C4" />
      <rect opacity="0.83" x="1099.98" y="181.87" width="16.5078" height="16.5078" rx="1.32913" transform="rotate(-137 1099.98 181.87)" fill="#C4C4C4" />
      <rect opacity="0.92" x="1227.58" y="179.212" width="21.0535" height="21.0535" rx="1.32913" transform="rotate(-74 1227.58 179.212)" fill="#C4C4C4" />
      <rect opacity="0.91" x="1292.71" y="161.933" width="14.5939" height="14.5939" rx="1.32913" transform="rotate(167 1292.71 161.933)" fill="#C4C4C4" />
      <path opacity="0.75" d="M1414.12 170.366C1414.79 169.594 1416.05 169.838 1416.38 170.805L1422.89 189.699C1423.22 190.667 1422.38 191.632 1421.38 191.437L1401.76 187.624C1400.76 187.429 1400.34 186.219 1401.01 185.447L1414.12 170.366Z" fill="#C4C4C4" />
      <rect opacity="0.97" x="1484.1" y="160.604" width="28.47" height="28.47" rx="1.32913" transform="rotate(125 1484.1 160.604)" fill="#C4C4C4" />
      <circle opacity="0.71" cx="1573.97" cy="167.125" r="13.1584" transform="rotate(152 1573.97 167.125)" fill="#C4C4C4" />
      <rect opacity="0.75" x="1639.61" y="181.87" width="27.2738" height="27.2738" rx="1.32913" transform="rotate(144 1639.61 181.87)" fill="#C4C4C4" />
      <circle opacity="0.77" cx="1834.01" cy="180.473" r="8.49317" transform="rotate(37 1834.01 180.473)" fill="#C4C4C4" />
      <circle opacity="0.78" cx="51.0069" cy="233.076" r="7.29694" transform="rotate(24 51.0069 233.076)" fill="#C4C4C4" />
      <circle opacity="0.86" cx="128.593" cy="197.128" r="12.4407" transform="rotate(121 128.593 197.128)" fill="#C4C4C4" />
      <path opacity="0.91" d="M254.16 198.319C254.373 197.319 255.589 196.923 256.35 197.608L267.299 207.467C268.059 208.151 267.793 209.402 266.82 209.719L252.808 214.272C251.835 214.588 250.884 213.732 251.097 212.731L254.16 198.319Z" fill="#C4C4C4" />
      <circle opacity="0.91" cx="438.537" cy="200.245" r="10.5267" transform="rotate(-94 438.537 200.245)" fill="#C4C4C4" />
      <rect opacity="0.98" x="452.695" y="219.455" width="19.1395" height="19.1395" rx="1.32913" transform="rotate(107 452.695 219.455)" fill="#C4C4C4" />
      <rect opacity="0.95" x="633.457" y="190.214" width="24.4029" height="24.4029" rx="1.32913" transform="rotate(-120 633.457 190.214)" fill="#C4C4C4" />
      <circle opacity="0.93" cx="670.395" cy="222.284" r="8.97165" transform="rotate(28 670.395 222.284)" fill="#C4C4C4" />
      <circle opacity="0.86" cx="784.916" cy="208.493" r="14.3546" transform="rotate(30 784.916 208.493)" fill="#C4C4C4" />
      <rect opacity="0.8" x="924.537" y="207.493" width="21.532" height="21.532" rx="1.32913" transform="rotate(119 924.537 207.493)" fill="#C4C4C4" />
      <path opacity="0.72" d="M925.872 205.784C925.215 206.568 923.955 206.346 923.605 205.384L916.298 185.309C915.948 184.347 916.771 183.368 917.778 183.545L938.817 187.255C939.825 187.433 940.262 188.634 939.605 189.418L925.872 205.784Z" fill="#C4C4C4" />
      <rect opacity="0.75" x="1058.78" y="218.126" width="24.1637" height="24.1637" rx="1.32913" transform="rotate(-35 1058.78 218.126)" fill="#C4C4C4" />
      <circle cx="1153.61" cy="232.03" r="10.5267" transform="rotate(117 1153.61 232.03)" fill="#C4C4C4" />
      <circle opacity="0.74" cx="1304.88" cy="203.461" r="10.6464" transform="rotate(-35 1304.88 203.461)" fill="#C4C4C4" />
      <rect opacity="0.86" x="1345.87" y="212.809" width="18.9003" height="18.9003" rx="1.32913" transform="rotate(-51 1345.87 212.809)" fill="#C4C4C4" />
      <rect opacity="0.82" x="1438.91" y="220.784" width="19.1395" height="19.1395" rx="1.32913" transform="rotate(107 1438.91 220.784)" fill="#C4C4C4" />
      <circle opacity="0.86" cx="1551.56" cy="221.788" r="11.2445" transform="rotate(-71 1551.56 221.788)" fill="#C4C4C4" />
      <path opacity="0.72" d="M1689.75 194.459C1689.09 195.242 1687.83 195.02 1687.48 194.059L1682.35 179.954C1682 178.993 1682.82 178.013 1683.83 178.191L1698.61 180.797C1699.62 180.975 1700.06 182.177 1699.4 182.96L1689.75 194.459Z" fill="#C4C4C4" />
      <rect opacity="0.9" x="1747.27" y="215.467" width="18.9003" height="18.9003" rx="1.32913" transform="rotate(-149 1747.27 215.467)" fill="#C4C4C4" />
      <circle opacity="0.91" cx="58.043" cy="281.693" r="9.09128" transform="rotate(100 58.043 281.693)" fill="#C4C4C4" />
      <rect opacity="0.77" x="236.046" y="234.444" width="28.7093" height="28.7093" rx="1.32913" transform="rotate(131 236.046 234.444)" fill="#C4C4C4" />
      <rect opacity="0.93" x="303.831" y="257.04" width="20.0965" height="20.0965" rx="1.32913" transform="rotate(168 303.831 257.04)" fill="#C4C4C4" />
      <rect opacity="0.95" x="391.554" y="243.748" width="16.9863" height="16.9863" rx="1.32913" transform="rotate(-75 391.554 243.748)" fill="#C4C4C4" />
      <rect opacity="0.7" x="515.164" y="266.344" width="23.9244" height="23.9244" rx="1.32913" transform="rotate(-158 515.164 266.344)" fill="#C4C4C4" />
      <rect opacity="0.86" x="634.786" y="275.648" width="17.2256" height="17.2256" rx="1.32913" transform="rotate(34 634.786 275.648)" fill="#C4C4C4" />
      <rect opacity="0.96" x="717.192" y="271.66" width="24.8814" height="24.8814" rx="1.32913" transform="rotate(-9 717.192 271.66)" fill="#C4C4C4" />
      <path opacity="0.84" d="M735.951 266.589C735.809 267.602 734.623 268.081 733.816 267.451L713.716 251.747C712.91 251.118 713.088 249.851 714.037 249.468L737.687 239.912C738.635 239.529 739.643 240.317 739.501 241.33L735.951 266.589Z" fill="#C4C4C4" />
      <rect x="928.524" y="239.761" width="16.9863" height="16.9863" rx="1.32913" transform="rotate(127 928.524 239.761)" fill="#C4C4C4" />
      <rect opacity="0.98" x="985.677" y="263.685" width="26.0776" height="26.0776" rx="1.32913" transform="rotate(44 985.677 263.685)" fill="#C4C4C4" />
      <circle opacity="0.78" cx="1077.39" cy="250.272" r="11.3641" transform="rotate(-135 1077.39 250.272)" fill="#C4C4C4" />
      <circle opacity="0.73" cx="1179.14" cy="277.508" r="12.0818" transform="rotate(9 1179.14 277.508)" fill="#C4C4C4" />
      <circle opacity="0.94" cx="1250.78" cy="255.621" r="13.0388" transform="rotate(83 1250.78 255.621)" fill="#C4C4C4" />
      <path opacity="0.86" d="M1390.44 250.199C1391.25 249.569 1392.43 250.048 1392.58 251.062L1394.32 263.463C1394.46 264.477 1393.45 265.264 1392.51 264.881L1380.89 260.189C1379.95 259.806 1379.77 258.539 1380.57 257.91L1390.44 250.199Z" fill="#C4C4C4" />
      <rect opacity="0.95" x="1472.14" y="253.052" width="17.9433" height="17.9433" rx="1.32913" transform="rotate(65 1472.14 253.052)" fill="#C4C4C4" />
      <path opacity="0.94" d="M1565.08 273.54C1565.31 274.537 1564.37 275.409 1563.39 275.11L1541.64 268.46C1540.66 268.161 1540.37 266.915 1541.12 266.217L1557.76 250.705C1558.51 250.007 1559.73 250.381 1559.96 251.378L1565.08 273.54Z" fill="#C4C4C4" />
      <rect opacity="0.75" x="1662.21" y="259.698" width="24.6421" height="24.6421" rx="1.32913" transform="rotate(-179 1662.21 259.698)" fill="#C4C4C4" />
      <circle opacity="0.74" cx="1754.06" cy="276.977" r="13.9958" transform="rotate(135 1754.06 276.977)" fill="#C4C4C4" />
      <path opacity="0.97" d="M150.643 309.39C150.59 308.368 151.662 307.672 152.574 308.136L169.64 316.832C170.552 317.296 170.619 318.574 169.76 319.131L153.697 329.563C152.839 330.12 151.699 329.539 151.646 328.518L150.643 309.39Z" fill="#C4C4C4" />
      <path opacity="0.76" d="M144.539 318.751C143.701 319.338 142.542 318.798 142.453 317.779L141.024 301.45C140.935 300.431 141.983 299.697 142.91 300.129L157.765 307.057C158.693 307.489 158.804 308.763 157.966 309.35L144.539 318.751Z" fill="#C4C4C4" />
      <circle opacity="0.81" cx="323.937" cy="276.144" r="12.9192" transform="rotate(-165 323.937 276.144)" fill="#C4C4C4" />
      <rect opacity="0.9" x="414.15" y="294.625" width="24.8814" height="24.8814" rx="1.32913" transform="rotate(69 414.15 294.625)" fill="#C4C4C4" />
      <circle opacity="0.79" cx="470.94" cy="275.159" r="8.25392" transform="rotate(-85 470.94 275.159)" fill="#C4C4C4" />
      <path opacity="0.81" d="M616.551 292.558C616.605 291.536 617.744 290.956 618.602 291.513L637.214 303.6C638.073 304.157 638.006 305.434 637.094 305.899L617.32 315.974C616.409 316.439 615.336 315.742 615.39 314.72L616.551 292.558Z" fill="#C4C4C4" />
      <rect opacity="0.99" x="731.813" y="315.891" width="16.5078" height="16.5078" rx="1.32913" transform="rotate(-50 731.813 315.891)" fill="#C4C4C4" />
      <path opacity="0.73" d="M821.363 317.862C821.763 316.92 823.032 316.764 823.648 317.581L833.513 330.672C834.128 331.489 833.629 332.666 832.613 332.791L816.344 334.789C815.329 334.913 814.559 333.892 814.959 332.95L821.363 317.862Z" fill="#C4C4C4" />
      <circle opacity="0.98" cx="875.689" cy="289.597" r="7.29694" transform="rotate(-66 875.689 289.597)" fill="#C4C4C4" />
      <path opacity="0.84" d="M941.859 332.31C942.727 332.852 942.682 334.131 941.779 334.611L916.818 347.883C915.915 348.363 914.83 347.686 914.866 346.663L915.852 318.41C915.888 317.388 917.017 316.787 917.885 317.329L941.859 332.31Z" fill="#C4C4C4" />
      <circle opacity="0.8" cx="1058.95" cy="285.151" r="9.56976" transform="rotate(-82 1058.95 285.151)" fill="#C4C4C4" />
      <rect opacity="0.72" x="1214.29" y="298.612" width="14.3546" height="14.3546" rx="1.32913" transform="rotate(14 1214.29 298.612)" fill="#C4C4C4" />
      <circle opacity="0.77" cx="1313.15" cy="317.785" r="9.80901" transform="rotate(-71 1313.15 317.785)" fill="#C4C4C4" />
      <rect opacity="0.7" x="1407.01" y="314.562" width="14.5939" height="14.5939" rx="1.32913" transform="rotate(-128 1407.01 314.562)" fill="#C4C4C4" />
      <rect opacity="0.71" x="1531.95" y="283.992" width="15.7901" height="15.7901" rx="1.32913" transform="rotate(25 1531.95 283.992)" fill="#C4C4C4" />
      <circle opacity="0.93" cx="1575.25" cy="300.174" r="10.5267" transform="rotate(80 1575.25 300.174)" fill="#C4C4C4" />
      <rect opacity="0.72" x="1726" y="302.599" width="28.7093" height="28.7093" rx="1.32913" transform="rotate(39 1726 302.599)" fill="#C4C4C4" />
      <path opacity="0.83" d="M1828.33 303.794C1829.28 303.394 1830.3 304.164 1830.17 305.179L1827.37 328.029C1827.24 329.044 1826.06 329.544 1825.25 328.928L1806.86 315.074C1806.04 314.458 1806.2 313.189 1807.14 312.789L1828.33 303.794Z" fill="#C4C4C4" />
      <circle opacity="0.71" cx="53.3552" cy="344.746" r="10.6464" transform="rotate(-4 53.3552 344.746)" fill="#C4C4C4" />
      <circle opacity="0.88" cx="245.814" cy="354.699" r="13.0388" transform="rotate(-98 245.814 354.699)" fill="#C4C4C4" />
      <circle opacity="0.78" cx="236.132" cy="367.838" r="7.17732" transform="rotate(96 236.132 367.838)" fill="#C4C4C4" />
      <path opacity="0.7" d="M410.729 354.987C411.746 355.094 412.266 356.262 411.665 357.09L400.569 372.362C399.968 373.19 398.696 373.057 398.28 372.122L390.601 354.876C390.185 353.942 390.937 352.907 391.955 353.014L410.729 354.987Z" fill="#C4C4C4" />
      <circle opacity="0.96" cx="508.567" cy="324.416" r="12.2014" transform="rotate(-67 508.567 324.416)" fill="#C4C4C4" />
      <path opacity="0.92" d="M540.312 342.342C539.816 343.237 538.537 343.259 538.01 342.382L530.991 330.7C530.464 329.823 531.084 328.705 532.107 328.687L545.734 328.449C546.757 328.431 547.416 329.527 546.92 330.422L540.312 342.342Z" fill="#C4C4C4" />
      <circle opacity="0.75" cx="1789.96" cy="812.45" r="12.3211" transform="rotate(110 1789.96 812.45)" fill="#C4C4C4" />
    </g>
  </g>
</svg>

Page link：https//www.codepudding.com/Blockchain/649240.html

Prev:Ggplot error: Invalid input: date_trans works with objects of class Date only
Next:how to make button align horizontally using css style
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding